Formulário HTML
-
Upload
evandro-manara-miletto -
Category
Education
-
view
933 -
download
2
description
Transcript of Formulário HTML
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