Formulário html
FORMULÁRIO HTML
Um site pode definir vários tipos de formulários, por
exemplo, uma pagina de contatos ou cadastro de vendas. Para criar um formulário
HTML utilizamos o atributo <form>, e dentro dele vários atributos<input>, que vai definir o tipo específico dos campos, por exemplo, um campo de
texto, senha, caixa de checkbox, etc.
Elemento form e seus atributos
O elemento <form> podemos definir esses atributos
name: especificar um nome para o
elemento;
action: define o endereço do site
onde serão salvos os dados;
method: serve para atribuir como os
dados serão enviados. Podemos atribuir dois valores: "get" e "post".
O valor "get" envia os dados do formulário através da URL do
site. Por exemplo, são as pesquisas do Google. As palavras pesquisadas são
colocadas na URL da pagina redirecionada. Exemplo, se pesquisarmos por "fatec", a mesma palavra será mostrada na URL da pagina de
pesquisa:
Elemento input e seus atributos
Para criar um campo de texto comum, é usado o atributo "text". Podemos definir também um campo do tipo senha,
usando o atributo "password", na qual os valores serão ocultados.
Exemplo
simples de formulário com login e senha:
<!DOCTYPE
html>
<html
lang="pt-br">
<head>
<title> formulário</title>
<meta
charset="utf-8">
</head>
<body>
<form
action="form.php" method="post">
Login:
<input type="text" name="login"></br>
Senha:
<input type="password" name="pass"></br>
</form>
</body>
</html>
Os formulários podem conter dois tipos de caixa alternativa: "checkbox" e o "radio". No"checkbox" é uma caixa alternativa de múltipla escolha, na
qual pode ter mais de uma opção de escolha pelo usuário. Já o "radio" apenas uma opção entre as alternativas pode ser
selecionado.
Para não ter confusão entre as caixas de escolhas, é usado o
elemento <fieldset>, que vai agrupar esses elementos de acordo com as
perguntas do formulário.
Exemplo:
<!DOCTYPE
html>
<html
lang="pt-br">
<head>
<title>Exemplo
de checkbox e radio</title>
<meta
charset="utf-8">
</head>
<body>
<form
action="form.php" method="post">
<fieldset>
Sexo:<br>
<input
type="radio" name="sex">Masculino<br>
<input type="radio"
name="sex">Feminino<br>
</fieldset>
<fieldset>
Qual
a sua cor favorita:<br>
<input
type="checkbox" name="color">Amarelo<br>
<input
type="checkbox" name="color">Branco<br>
<input
type="checkbox" name="color">Vermelho<br>
<input
type="checkbox" name="color">Preto<br>
</fieldset>
</form>
</body>
</html>
No formulário é usado o atributo "submit" para
finalizar o formulário e enviar os dados. Já o atributo"reset" vai apagar todos os dados. O atributo "button" cria um botão que vai executar uma determinada
ação específica. O atributo "value" é usado para dar um nome aos botões.
Exemplos
de botões:
<!DOCTYPE
html>
<html
lang="pt-br">
<head>
<title>Exemplo
de botões</title>
<meta
charset="utf-8">
</head>
<body>
<form
action="form.php" method="post">
<input
type="submit" value="Enviar os dados">
<input
type="reset" value="Apagar todos os dados">
<input
type="reset" value="Fechar a janela do formulario">
</form>
</body>
</html>
Alguns atributos especiais podem ser criados e sua ação depende da
versão e compatibilidade do navegador de Internet usado pelo usuário:
number: campo específico de números;
color: caixa de seleção de cores;
range: uma caixa de controle para
definir números;
image: campo para enviar uma imagem
do computador;
file: campo para enviar um arquivo
do computador.
Nota que os atributos "number" e "range" podemos definir valores de máximo ("max") e mínimo ("min").
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de campos especiais</title>
<meta charset="utf-8">
</head>
<body>
<form action="form.php"
method="post">
Selecione uma cor: <input
type="color"><br>
Escolha um número entre 1 a 10: <input
type="number" min="1" max="10"><br>
Escolha um número entre 1 a 10: <input
type="range" min="1" max="10"><br>
Selecione uma imagem: <input
type="image"><br>
Selecione um arquivo: <input
type="file"><br>
</form>
</body>
</html>
Podemos criar campos específicos para data e horário. A ação de
cada campo vai depender da versão e da compatibilidade do navegador usado:
date: seleção de data;
datetime: seleção de data e horário;
datetime-local: seleção de data, horário e
local;
time: seleção de horário;
week: seleção da semana;
month: seleção do mês.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de datas e horários</title>
<meta charset="utf-8">
</head>
<body>
<form action="form.php"
method="post">
Selecione uma data: <input
type="date"><br>
Selecione uma data e horas: <input
type="datetime"><br>
Selecione uma data, horas e local: <input
type="datetime-local"><br>
Selecione um horário: <input
type="time"><br>
Selecione uma semana: <input
type="week"><br>
Selecione um mês: <input
type="month"><br>
</form>
</body>
</html>
Outros campos especiais que foram introduzidos com o HTML5:
- email: campo específico de e-mail;
- search: campo específico de pesquisa;
- tel: campo específico de números de telefones;
- url: campo específico de URL de sites;
- hidden: criar um campo oculto para o usuário que será enviado junto com os dados.
Elementos
Outros elementos importantes que devemos destacar são:
textarea: cria uma caixa de texto,
determinando o numero de linhas ("row") e colunas ("cols");
select: cria um campo com itens
selecionáveis;
option: define os itens do
campo <select>;
optgroup: agrupa os itens do
atributo <option>.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exemplo de textarea, select, option e
optgroup</title>
<meta charset="utf-8">
</head>
<body>
<form action="form.php"
method="post">
<textarea rows="5" cols="30">
Caixa de texto com 5 linhas e 30 colunas
</textarea>
<br>
<select>
<optgroup label="Cores Primárias">
<option value="red">Vermelho</option>
<option value="green">Verde</option>
<option value="blue">Azul</option>
</optgroup>
<optgroup label="Cores Secundárias">
<option value="green">Verde</option>
<option
value="orange">Laranja</option>
<option
value="violet">Violeta</option>
</optgroup>
</select>
</form>
</body>
</html>
Como a semântica do HTML5, podemos deixar
o formulário mais organizado. Um dos atributos para especificar isso é o <label>. Com ele podemos definir um titulo e associação com os campos do
formulário. É usado o valor "id" tanto nos atributos dos campos como no <label> para ter essa ligação. Além disso, é usado o atributo <legend> para criar as legendas de checkbox, radio, etc.
Exemplo:
<!DOCTYPE
html>
<html
lang="pt-br">
<head>
<title>Exemplo
de label e legend</title>
<meta
charset="utf-8">
</head>
<body>
<form
action="form.php" method="post">
<label
for="name">Nome:</label>
<input
type="text" id="name" name="nome"><br>
<label
for="lname">Sobre nome:</label>
<input
type="text" id="lname"
name="sobrenome"><br>
<fieldset>
<legend>Sexo:</legend>
<input
type="radio" name="sex" id="m">
<label
for="m">M</label>
<input
type="radio" name="sex" id="f">
<label
for="f">F</label>
</fieldset><br>
<fieldset>
<legend>Sua
casa possui:</legend>
<input
type="checkbox" name="tv" id="casa">
<label
for="tv">Televisão</label>
<input
type="checkbox" name="rad" id="casa">
<label
for="rad">Rádio</label>
<input
type="checkbox" name="maq" id="casa">
<label
for="maq">Máquina de lavar</label>
<input
type="checkbox" name="gel" id="casa">
<label
for="gel">Geladeira</label>
</fieldset><br>
<label
for="nasc">Data de nascimento:</label>
<input
type="date" id="nasc"
name="datanasc"><br>
<label
for="obs">Observações:</label><br>
<textarea
rows="4" cols="50">
Observações
</textarea><br>
<input
type="submit" value="Enviar">
<input
type="reset" value="Apagar">
</form>
</body>
</html>
Outros atributos especiais são utilizados, porém mais específicos:
- datalist: define a lista predefinida de um campo <input>;
- keygen: especificar o nível de criptografia que os dados serão enviados para o servidor;
- output: mostra o resultado de um calculo de acordo com um script definido.
Comentários
Postar um comentário