Os formulários são muito importantes
em websites; geralmente utilizados para reunir informações de cadastro de
clientes e usuários em uma base de dados, eles servem para facilitar o contato
do cliente com a empresa em diversos sentidos, já que não é necessário um
contato telefônico – por exemplo – para que possa dar seus dados cadastrais, fazer
uma reclamação, dar uma sugestão ou enviar uma dúvida.
Tag e atributos (para formulários):
<form>
</form>: Tag de abertura de um formulário.
-
Atributos da tag form:
*id: Agrupa
elementos, mas sua mais importante função é a de dar uma identificação para
eles (o Id é único, jamais deve haver 2 elementos com o mesmo).
*action: Indica
onde os dados informados serão guardados após sua submissão (ou seja, o local
onde as informações preenchidas serão guardadas [por ex: um banco de dados]).
*method:
Método de envio dos dados, existem apenas 2, que são:
-
Get:
Os dados são conduzidos através da URL do navegador. Esse método não é
aconselhável, pois informações importantes (como de variáveis, por exemplo)
aparecem na barra de endereço e a quantidade de caracteres é extremamente
limitada.
-
Post:
O método de envio mais seguro, devido ao fato de os dados serem transmitidos
diretamente no corpo da página. Outra vantagem é que não há uma quantidade
definida de caracteres que possam ser enviados de uma única vez.
*enctype: Determina
a maneira como serão codificados os dados do formulário (geralmente o formato texto é o escolhido).
<label>: Dá um rótulo para o campo.
Sua importância semântica é facilitar a leitura por intermédio de
sintetizadores de voz. A leitura da label é importante para sinalização dos
campos em casos de pessoas que não enxergam.
-
Atributos da tag label:
*accesskey: Utilizado para a criação de alguma tecla de atalho, assim
a navegação pelo teclado também é favorecida.
*for: Usa-se para criar uma ligação entre
a label e o campo à qual se refere.
<input>: Define um campo de
entrada de dados no formulário.
-
Atributos da tag input:
*type: O tipo de entrada de dado,
que tem como principais valores:
-
Text:
Cria um campo que receberá texto (letras, números, caracteres especiais);
-
Date:
Cria um minicalendário, onde o usuário escolhe uma data;
-
E-mail:
Cria um campo validado para receber um endereço de e-mail (se preencher sem @ e . o
endereço de e-mail não é aceito);
-
Number: Cria
um campo de tipo numérico;
- Range: Cria
um controle numérico (uma espécie de regulador), onde o desenvolvedor define
qual será o intervalo entre um número e outro (o intervalo sempre será o
mesmo);
- Password: Campo
de senha, aceita números, letras e alguns caracteres especiais. Sua máscara de
entrada é a •;
- Hidden: Cria
um elemento invisível ao usuário, entretanto ele contém informações que
geralmente são importantes ao desenvolvedor (última vez que o usuário fez
alteração dos seus dados, por exemplo);
- File: Cria
um botão que, quando clicado abre uma caixa de seleção de arquivo na máquina do
usuário;
- Checkbox: Cria
uma caixinha que funciona como seletor de opções;
- Radio: Lembra
um checkbox, entretanto sua forma é
circular e somente uma opção pode ser selecionada no radio. Muito utilizado
para questões onde a informação é fixa, por exemplo, sexo feminino ou
masculino;
- Button: Simplesmente
cria um botão. Deve-se inserir um script que especifique a utilidade do mesmo;
- Image: Inclui
uma imagem como botão de envio “submit”;
- Submit: Botão
de envio dos dados preenchidos no formulário para o local indicado no atributo action
do form;
- Reset: Botão
que devolve aos campos do formulário seus valores originais.
Obs: Muito parecido com o
botão ‘limpar’, já que aparentemente
os campos ficam em branco quando clicamos sobre ele, a diferença está no caso
de algum campo já ter algum valor específico e esse valor for alterado pelo
usuário, quando resetado, o valor
original torna a aparecer.
*id: Agrupa
elementos, mas sua mais importante função é a de dar uma identificação para
eles (o Id é único, jamais deve haver 2 elementos com o mesmo).
*name: Permite-nos
dar um nome ao elemento.
*accesskey: Utilizado para a criação de alguma tecla de atalho, assim
a navegação pelo teclado também é favorecida.
*alt: Texto alternativo somente para imagens.
Motivos: se a imagem
não carrega, ao passar o mouse acima do espaço onde ela ficaria, o texto - geralmente
descritivo - aparece. Também utilizado por sintetizadores de voz;
*checked: Determina
que uma opção no radio ou checkbox estará pré-selecionada;
*disabled: Desabilita
a utilidade do campo;
*maxlenght: Usado
em campos tipo text e password, delimita uma quantidade
máxima de caracteres permitidos;
*readonly: Indica
que o campo é somente de leitura, ou seja, o usuário não consegue digitar nele;
*size: Especifica
uma a largura (calculada por quantidade de caracteres) que um campo terá;
*src: Usado
sempre que o tipo for ‘img’ (imagem), indicará o caminho de onde a tal imagem
está guardada;
*tabindex: Apontará
qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla
tab for pressionada;
*value: Especifica
o valor que será enviado ao banco de dados;
---
Abaixo atributos que são utilizados exclusivamente para tipos number e range ---
*max: Valor
máximo;
*min: Valor
mínimo;
*step: Define
os intervalos entre os números.
<select>: O select expõe uma série
de opções que podem ser escolhidas, essas opções são apresentadas em forma de
lista.
*id: Agrupa
elementos, mas sua mais importante função é a de dar uma identificação para
eles (o Id é único, jamais deve haver 2 elementos com o mesmo).
*multiple:
Permite que mais de uma opção possa ser selecionada (por intermédio da tecla
ctrl);
*disabled: Desabilita
a utilidade do campo;
*size: Especifica
uma a largura (calculada por quantidade de caracteres) que um campo terá;
*tabindex: Apontará
qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla
tab for pressionada;
<option>:
Define uma opção em algum tipo de lista de seleção.
*value: Especifica
o valor que será enviado ao banco de dados;
*selected: Deixa
uma das opções pré-selecionada;
*label: Rotula
a opção;
*disabled: Desabilita
a utilidade do campo;
<optgroup>: Agrupa
as opções relacionadas, dando assim uma maior organização ao select.
<textarea>: É
uma área onde textos maiores podem ser digitados, aceita qualquer tipo de
caracter e quebras de linha também.
*id: Agrupa
elementos, mas sua mais importante função é a de dar uma identificação para
eles (o Id é único, jamais deve haver 2 elementos com o mesmo).
*tabindex: Apontará
qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla
tab for pressionada;
*accesskey: Utilizado para a criação de alguma tecla de atalho, assim
a navegação pelo teclado também é favorecida;
*cols: Define a
largura da área de texto;
*rows: Define a
altura da área de texto;
*readonly: Indica
que o campo é somente de leitura, ou seja, o usuário não consegue digitar nele;
<button>: Essa
tag define um botão, dependendo da utilidade que esse botão terá, um script
precisa ser criado para dar ao botão tal competência. Também podemos adicionar
uma imagem ao botão, adequando-o assim ao design do site.
<fieldset>: Cria uma borda em
volta dos elementos do formulário. Bastante útil para agrupar informações
semelhantes dentro do formulário.
<legend>: Define um título
para o fieldset.
*accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida.
Exemplo de utilização das tags:
<!DOCTYPE>
<html>
<head>
<title>Trabalhando com formulários</title>
<meta charset="utf-8">
</head>
<body>
<form id="cadastro" action="cadastrar.php" method="post">
<fieldset>
<legend>Formulário de Contato</legend>
<fieldset>
<legend>Dados Pessoais:</legend>
<label for="nome">Nome:*</label>
<input id="nome" type="text" required><br>
<label for="data">Data que iniciou as aulas:</label>
<input type="date" id="data"><br>
Sexo:
<label for="sexo">M</label>
<input type="radio" name="sexo" value="m">
<label for="sexo">F</label>
<input type="radio" name="sexo" value="f"><br>
<label for="endereco">Endereço:*</label>
<input id="endereco" type="text" required>
<label for="numero">Nº:*</label>
<input id="numero" type="text" required>
<label for="complemento">Complemento</label>
<input id="complemento" type="text"><br>
<label for="telefone">Telefone:</label>
(<input id="ddd" type="number">)
<input id="telefone" type="number"><br>
<label for="email">Email:</label>
<input type="email" id="email"><br>
</fieldset>
<fieldset>
<legend>Dados do curso</legend>
<label for="unidade">Unidade:</label><br>
<input list="list_unidade" id="unidade">
<datalist id="list_unidade">
<option value="Carapicuíba">
<option value="Barueri">
<option value="Osasco">
<option value="Embu das Artes">
<option value="São Paulo">
</datalist><br>
<label for="esportes">Período:</label><br>
<input type="checkbox" value="mn" name="esportes">Manhã
<input type="checkbox" value="td" name="esportes">Tarde
<input type="checkbox" value="nt" name="esportes">Noite<br>
<label for="curso">Curso:</label>
<select id="curso">
<option selected>--- Selecione um curso ---</option>
<optgroup label="Cursos de TI">
<option value="ADS">Análise de Sistemas</option>
<option value="JD">Jogos Digitais</option>
<option value="SI">Sistemas para Internet</option>
<optgroup label="Outros cursos">
<option value="LG">Logística</option>
<option value="SC">Secretariado</option>
</select><br>
<label for="pontos">Dê uma pontuação ao curso:</label>
<input type="range" id="pontos" min="1" max="10" step="1"><br>
<label for="mensagem">Mensagem:</label>
<textarea cols="45" rows="10" id="mensgem">Seu feedback é importante para nós!</textarea><br>
<input type="submit" value="Enviar">
<input type="reset" value="Redefinir">
</fieldset>
</fieldset>
</body>
</html>
Exemplo da formulário no navegador:
