Formulário HTML

1,179 views

Published on

Sl

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,179
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
40
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Formulário HTML

  1. 1. FormuláriosHTMLEvandro Manara Milettoinf.poa.ifrs.edu.br/~evandro
  2. 2. Pra que serve equando vou usar um Formulário HTML?
  3. 3. LoginCadastro
  4. 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. 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. 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. 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. 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. 9. Entrada de textoElementos <input> com Com type="password" otype="text" são usados para texto digitado é ocultado naentrada de texto tela do browser
  10. 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. 11. Chaves booleanas 1Há dois tipos: checkboxes e radio buttonsCheckboxes permitem seleção múltipla
  12. 12. Chaves booleanas 2Radio buttons, permite seleção única (marca umdesmarca o outro)
  13. 13. Upload de ArquivosO elemento <input type="file"> cria um campo que permite o Upload de arquivos para o servidorSintaxe do formulário<form action="envia.php" method="post" enctype="text/multipart-form-data"> <label> Escolha um arquivo <input type="file" /> <label></form>
  14. 14. Área para entrada de textoPossibilitam a entrada de texto de múltiplas linhastags <textarea> </textarea><form action="envia.php"> <textarea rows="6" cols="40">Texto Inicial</textarea></form>
  15. 15. Menus de seleçãoGeram requisições similares a checkboxes e radiobuttonsConsistem 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. 16. Grupos na seleçãoCriando 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. 17. Formulário e acessibilidadeFavorecida 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. 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. 19. ExercíciosCrie um formulário Web HTML acessível que mostre campos econtroles 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. 20. Referênciashttp://www.w3schools.com/html/html_forms.asphttp://acessibilidadelegal.com/13-formularios.php

×