O documento explica como criar e usar formulários HTML para coletar dados do usuário e enviá-los para um servidor. Ele descreve os principais elementos de formulário como inputs de texto, checkboxes, menus dropdown e botões, e explica como esses elementos enviam dados via métodos GET ou POST. Ele também discute como criar formulários acessíveis usando atributos como fieldset, legend e label.

1. Formulários
HTML
Evandro Manara Miletto
inf.poa.ifrs.edu.br/~evandro

2. Pra que serve e
quando vou usar
um Formulário
HTML?

3. Login
Cadastro

4. 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...

5. ‘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>

6. ‘Raio X’ do formulário
Texto que aparece Nome na variável
na página Forma de envio que receberá
ação / url para onde vai (aberto / como valor o que
empacotado) estiver no campo
nome
<form action="envia.jsp" method="post">
Usado para <label for="nome">Digite seu nome:</label>
associar o
rótulo com o <input type="text" id="nome" size="20" name="nome"/>
controle input
(acessibilidade)
<input type="submit" value="Enviar Nome" />
</form>
Valor/texto que
aparecerá no
Renderiza diversos Botão
tipos de controle Usados juntos
(entradas) do para relacionar o Diferentes tipos
formulário texto com o da entrada Input
campo (texto e botão de
envio)

7. 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.0
Content-type: text/x-www-form-urlencoded
Content-length: 15
nome=Carminha

8. 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

9. Entrada de texto
Elementos <input> com Com type="password" o
type="text" são usados para texto digitado é ocultado na
entrada de texto tela do browser

10. 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">

11. Chaves booleanas 1
Há dois tipos: checkboxes e radio buttons
Checkboxes permitem seleção múltipla

12. Chaves booleanas 2
Radio buttons, permite seleção única (marca um
desmarca o outro)

13. 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>

14. Área para entrada de texto
Possibilitam a entrada de texto de múltiplas linhas
tags <textarea> </textarea>
<form action="envia.php">
<textarea rows="6" cols="40">Texto Inicial</textarea>
</form>

15. Menus de seleção
Geram requisições similares a checkboxes e radio
buttons
Consistem de um par de elementos
<select> define o nome da coleção
<option> define o valor que será enviado
<form action="envia.php">
<form action="envia.php"> <select name="dia">
<select name="dias" size="4" multiple> <option value="seg">Segunda</option>
<option value="seg">Segunda</option> <option value="ter">Terca</option>
<option value="ter">Terca</option> <option value="qua">Quarta</option>
<option value="qua">Quarta</option> <option value="qui">Quinta</option>
<option value="qui">Quinta</option> <option value="sex">Sexta</option>
<option value="sex">Sexta</option> </select>
</select> </form>
</form>

16. 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>

17. Formulário e acessibilidade
Favorecida pelo uso dos atributos
fieldset: agrupa os itens do formulário com
características comuns
legend: usado em conjunto com o fieldset
envolvendo os itens
label: 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

18. 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>

19. 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.

20. Referências
http://www.w3schools.com/html/html_forms.asp
http://acessibilidadelegal.com/13-formularios.php