Post on 09-Jun-2015
Ambiente WebFormulários
HTMLAula Especial
Elementos de um site bastante úteis para:
- Envio de Mensagens- Cadastro de Pessoas
- Provas Online- Áreas Restritas
- Pesquisas de Opinião
Para que serve um formulário?
Todos os formulários utilizam um código específico para inserir os elementos
gráficos:
Campo de Texto <textfield>Campo de Senha <password>
Botão Rádio <radiobutton>Campo de Data <date>
Área de Texto <textarea>
Quais Elementos Importantes?
Campo para números <number>Campo para Seleção <selection>
Botão para Enviar <submit>Botão para Limpar <reset>
O formulário é inserido na página HTML através da TAG <form>
Todos os formulários utilizam dois atributos principais:
<method> Representa o método pelo qual as informações contidas nos campos serão
enviadas<function> Representa o local para onde esse formulário enviará os dados contidos
nos campos
Atributos de um Formulário
Analise a sintaxe abaixo:<HTML><HEAD><BODY>
<FORM method=“post” action=“recebe.php”>
</FORM></BODY></HTML>
A sintaxe para Iniciar um Formulário
O método utilizado acima foi o POST, poderíamos também utilizar o método GET
As informações desse formulário serão enviadas para uma página chamada
“recebe.php”, a qual armazenará os dados (DATE) contidos nos campos desse
formulário.
Percebam que neste formulário não foi inserido nenhum CAMPO, neste exemplo
utilizaremos apenas alguns campos:
<nome completo><email>
<data de nascimento><sexo>
<escolaridade><comentários>
<FORM method=“post” action=“recebe.php”>
Nome Completo <input type=“text”>E-mail <input type=“email”>
Data Nascimento <input type=“date”>Sexo <selection>
<option>Masculino</option><option>Feminino</option>
</selection>Escolaridade
<input type=“radiobutton”>Ensino Fundamental
<input type=“radiobutton”>Ensino Médio
O código que faz acontecer:
Comentários <textarea></textarea><input type=“submit” value=“Enviar”><input type=“reset” value=“Limpar”>
</FORM>
Principais atributos dos Campos de um formulário:
Size – especifica o tamanho do campoMaxlength – delimita a quantidade de
caracteres podem ser digitados
name – especifica um nome pelo qual o campo será identificado
Cols - especifica a quantidade de colunasRows – especifica a quantidade de linhas
Um pouco de HTML 5Required name – não permite que o campo
permaneça em brancoPlaceholder – digita um valor inicial dentro
do campo servindo como legenda
Atributos de um campo
autofocus – faz com que um campo seja automaticamente selecionado quando a página for carregada (focar no campo)
Value – determina qual valor será armazenado quando o campo for
selecionado (muito utilizado nos campos (select, radio, checkbox)
Pattern – permite criar uma máscara obrigado o usuário respeitar a forma de
escrita do campoAprendendo a utilizar o atributo pattern:
pattern="[0-9]{4}[\-][0-9]{4}
pattern="[0-9]{4}[\-][0-9]{4}O intervalo de números que se encontram entre colchetes determina quais números
podem ser aceitos nesse campoO número que se encontra entre chaves
determina a quantidade de números que o campo pode receber
[0-9] o usuário pode utilizar os números dentro desse intervalo Ex: 3639 no máximo
utilizar 4 números.[\-] o usuário deverá digitar o caractere –
pois a máscara é determinada pelo \ contido entre colchetes.