Tipos de input HTML: Seu site com formulários inteligentes

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

A linguagem HTML é usada para definir os elementos de uma página web, e entre esses elementos temos os que fazem parte da criação de formulários, usados para receber entrada de dados do usuário.

Um formulário é definido com a tag HTML form, e dentro dela é possível colocar vários elementos input, que possibilitam que o usuário entre com alguma informação. Importante lembrar que temos outros elementos HTML para entrada de dados que não são definidos com input, no caso select e textarea.

▶ Se preferir, acesse "Tipos de input HTML: Seu site com formulários inteligentes" no YouTube.

Confira um exemplo de formulário HTML com vários elementos input e sem formatação visual:

A renderização padrão dos elementos pode variar de acordo com o navegador e dispositivo utilizado.

Confira o código HTML utilizado para definir o exemplo de formulário HTML anterior:

<form method='POST' action='recebe-dados.php'>
	<label for="nome">Nome</label>
	<input type='text' id='nome' name='nome' required>
	<label for="email">Email</label>
	<input type='email' id='email' name='email' required>
	<br>
	<label for="fone">Celular com DDD</label>
	<input type="tel" id="fone" name="fone" required pattern="[0-9]{2} [0-9]{5}-[0-9]{4}" placeholder="11 99999-9999">
	<label for="hora-desejada">Hora desejada</label>
	<input type="time" id="hora-desejada" name="hora-desejada" required>
	<br>
	<label for="site">Seu site</label>
	<input type="url" id="site" name="site" required>
	<label for="senha">Senha</label>
	<input type='password' id='senha' name='senha' required>
	<br>
	<label for="dtnasc">Data Nasc</label>
	<input type='date' id='dtnasc' name='dtnasc'>
	<label for="cor">Cor favorita</label>
	<input type='color' id='cor' name='cor'>
	<br>
	<label for="filhos">Qtde Filhos</label>
	<input type='number' id='filhos' name='filhos'>
	<label for="peso">Peso</label>
	0<input type="range" id="peso" name="peso" min="0" max="200">200
	<br>
	<p>Sexo:</p>
	<input type="radio" id="sexo-m" name="sexo" value="Masculino">
	<label for="sexo-m">Masculino</label><br>
	<input type="radio" id="sexo-f" name="sexo" value="Feminino">
	<label for="sexo-f">Feminio</label>
	<br>
	<label for="estado">Estado</label>
	<select id="estado" name="estado">
		<option value="SP">SP</option>
		<option value="RJ">RJ</option>
		<option value="PB">PB</option>
	</select>
	<br>
	<label for="msg">Mensagem</label><br>
	<textarea id="msg" name="msg" rows="4" cols="50"></textarea>
	<br>
	<input type="reset" value="Reset">
	<input type="submit" value="Enviar">
</form>

Confira todos os elementos input do HTML:

Tipo	Função
button	Define um botão clicável (usado principalmente com um JavaScript para ativar um script)
checkbox	Define uma caixa de seleção para seleção de várias opções
color	Define um seletor de cores em hexadecimal
date	Define um controle para selecionar data (ano, mês, dia (sem hora))
datetime-local	Define um controle para selecionar data e hora (ano, mês, dia, hora (sem fuso horário)
email	Define um campo para entrar com endereço de e-mail
file	Define um campo para selecionar um arquivo e um botão "Procurar" (para uploads de arquivo)
hidden	Define um campo oculto
image	Define uma imagem como o botão de envio
month	Define um controle para selecionar mês e ano (sem fuso horário)
number	Define um campo para selecionar um número inteiro
password	Define um campo para senha
radio	Define um botão de opção para seleção única
range	Define um controle de intervalo (como um controle deslizante)
reset	Define um botão para reinicar o preenchimento do formulário
search	Define um campo de texto para inserir uma string de pesquisa
submit	Define um botão para enviar os dados do formulário
tel	Define um campo para inserir um número de telefone
text	Input padrão. Define um campo de texto de linha única
time	Define um controle para inserir um horário (sem fuso horário)
url	Define um campo para inserir uma URL
week	Define um controle para selecionar semana e ano (sem fuso horário)

A definição correta do elemento input garante um filtro na entrada de dados, pois o navegador saberá qual tipo de dado esperar em cada campo, e isso ajuda na validação do formulário antes do envio final. Utilize o atributo required em cada input obrigatório.