Formulários HTML

Evandro Manara Milettoinf.poa.ifrs.edu.br/~evandro

Pra que serve e quando vou usar um Formulário

HTML?

Login

Cadastro

Formulários HTML

• Proporcionam interação com o internauta

• Selecionam diferentes tipos de entradas do usuário

• Usados para enviar dados ao servidor• Contém elementos de entrada como

texto, checkbox, botão-radio, botão enviar, menu drop-down, etc...

‘Anatomia’ do formulário

• Construído dentro do container <form>... </form>

• 2 atributos princiapis: action (define a URL que receberá o formulário) e method (define método usado para envio dos dados)<form action="URL para onde serão enviado os dados"

method="método HTTP (GET ou POST)"

enctype="formato de codificação"

target="nome da janela que mostrará a resposta" >

... corpo do formulário (elementos)...

</form>

<form action="envia.jsp" method="post">

<label for="nome">Digite seu nome:</label>

<input type="text" id="nome" size="20" name="nome"/>

<input type="submit" value="Enviar Nome" />

</form>

ação / url para onde vaiForma de envio (aberto / empacotado)

Texto que aparece na página

Nome na variável que receberá

como valor o que estiver no campo

nome

Valor/texto que aparecerá no Botão

Diferentes tipos da entrada Input (texto e botão de envio)

Usados juntos para relacionar o texto com o campo

Renderiza diversos tipos de controle

(entradas) do formulário

‘Raio X’ do formulário

Usado para associar o

rótulo com o controle input

(acessibilidade)

Envio de dados

• Os elementos de entrada de dados têm um nome e enviam um valor

• Exemplo de formulário simples<form action="/lib/envia.php" method="post">

<label for="nome">Nome:</label>

<input name="nome" type="text" id="nome" size="25" />

<input type="submit" value="ENVIAR Nome"/>

</form>

POST /lib/envia.php HTTP/1.0Content-type: text/x-www-form-urlencodedContent-length: 15

nome=Carminha

Disparo de eventos

• Os elementos <input> com atributo type submit, reset e button servem para disparar eventos Envio do formulário (Submit) Reinicialização do formulário (Reset) Evento programado por JavaScript (Button)

• O value do botão define o texto que mostrará

• Apenas se o botão contiver um atributo

name, o conteúdo de value será enviado ao servidor

Entrada de textoElementos <input> com type="text" são usados para entrada de texto

Com type="password" o texto digitado é ocultado na tela do browser

Campos ocultos

• Consistem de um par nome/valor embutido no HTML

• Usados para envio de dados ao servidor sobre configuração da aplicação comandos, para selecionar comportamentos

diferentes da aplicação parâmetros especiais para controle da aplicação,

sessão ou dados que pertencem ao contexto da aplicação

• Sintaxe <input type="hidden" name="nome" value="valor">

Chaves booleanas 1

Há dois tipos: checkboxes e radio buttonsCheckboxes permitem seleção múltipla

Chaves booleanas 2

Radio buttons, permite seleção única (marca um desmarca o outro)

Upload de Arquivos

O elemento <input type="file"> cria um campo que permite o Upload de arquivos para o servidor

Sintaxe do formulário

<form action="envia.php" method="post" enctype="text/multipart-form-data">

<label> Escolha um arquivo <input type="file" /> <label>

</form>

Área para entrada de texto

Possibilitam a entrada de texto de múltiplas linhastags <textarea> </textarea><form action="envia.php"> <textarea rows="6" cols="40">Texto Inicial</textarea></form>

Menus de seleçãoGeram requisições similares a checkboxes e radio buttonsConsistem de um par de elementos<select> define o nome da coleção

<option> define o valor que será enviado

<form action="envia.php"><select name="dias" size="4" multiple>

<option value="seg">Segunda</option><option value="ter">Terca</option><option value="qua">Quarta</option><option value="qui">Quinta</option><option value="sex">Sexta</option>

</select></form>

<form action="envia.php"><select name="dia">

<option value="seg">Segunda</option><option value="ter">Terca</option><option value="qua">Quarta</option><option value="qui">Quinta</option><option value="sex">Sexta</option>

</select></form>

Grupos na seleção

Criando grupos no menu de seleção

<select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup></select>

Formulário e acessibilidade

Favorecida pelo uso dos atributosfieldset: agrupa os itens do formulário com características comunslegend: usado em conjunto com o fieldset envolvendo os itenslabel: usado em conjunto com o for e id, associa o elemento ao seu rótulo optgroup: usado em conjunto com select para agrupar itens dentro do select

Formulário e acessibilidade<form id="form" method="post" action="enviar.php"> <fieldset><legend>Dados para Contato</legend> <label for="nome">Nome:<input type="text" name="nome" id="nome" value="*" /></label> <label for="email">E-mail:<input type="text" name="email" id="email" value="*" /></label> <label for="assunto">Assunto:<input type="text" name="assunto" id="assunto" value="*" /></label> <label for="msg">Mensagem:<br /><textarea rows="6" cols="50" name="msg" id="msg">*</textarea></label> <input type="submit" value="Enviar Mensagem" id="enviar" /> </fieldset></form>

Exercícios

Crie um formulário Web HTML acessível que mostre campos e controles para cadastro de usuário (inserção de dados), contendo:

Nome, data de nascimento, e-mail, sexo, formação (ensino básico, técnico, superior, pós-graduaçao), cargo - select -(programador, analista, teste de Sw), Conhecimentos (Java, JSP, PHP, HTML, CSS, MySQL), area de texto para resumée, campo para envio de arquivo (indicaçao para “Clique para enviar seu CV” e botão de Enviar dados.

Referências

http://www.w3schools.com/html/html_forms.asphttp://acessibilidadelegal.com/13-formularios.php