Artigos HTML e CSS HTML5 Input Types - Dica

Olá pessoal, na dica de hoje iremos falar sobre mais uma novidade do HTML5, são as novas opções de Input Types, ou seja, agora caso o desenvolvedor queira proporcionar ao seu usuário uma experiência mais agradável ao preencher formulários, etc, ele pode incluir diversos novos inputs, são eles:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Abaixo podemos ver alguns exemplos de como usá-los:


<!DOCTYPE html>
<html>
<head>
	<title>Novos Inputs HTML5</title>
	<meta charset="UTF-8">
</head>
<body>

	<form>
		<p><label for="escolha_cor"> Cor : </label>
		<input type="color" id="escolha_cor" name="escolha_cor" /></p>
		<p><label for="inicio"> Data : </label>
		<input type="date"  id ="data" name="data" min="2011-01-01"/></p>
		<p><label for="palestra"> Dia de aniversário(dia e hora) : </label>
		<input type="datetime" id="bdaytime" name="bdaytime"/></p>
		<p><label for="concerto"> Insira seu dia de aniversário e hora : </label>
		<input type="datetime-local" id="bday" name="bday"/></p>
		<p><label for="seuemail"> Email : </label>
		<input type="email" id="seuemail" name="seuemail" required/></p>
		<p><label for="ferias"> Mês de Férias: </label>
		<input type="month" id="ferias" name="ferias"/></p>
		<p><label for="musicas"> Número de Músicas : 
		</label><input type="number" id="musicas" name="musicas" min="2" max="8"/>
		</p>
		<p><label for="altitude"> Altitude : </label>
		<input type="range" id="altitude" name="altitude" min="100" 
		max="1000" step="100"/></p>
		<p><label for="busca"> Busca : </label>
		<input type="search" id="busca" name="busca" 
		placeholder="pesquisar..."/></p>
		<p><label for="telefone"> Telefone: 
		</label><input type="tel" id="telefone" 
		name="telefone"/></p>
		<p><label for="horario"> Horário : 
		</label><input type="time" id="horario" 
		name="horario"/></p>
		<p><label for="site"> Site : 
		</label><input type="url" id="site" 
		name="site"/></p>
		<p><label for="semana"> Semana : 
		</label><input type="week" id="semana" 
		name="semana"/><p>
	</form>
</body>
</html>
Listagem 1. Exemplo de como usar os novos inputs