Formulario Html5

Html5 posee nuevos elementos y atributos para formularios que proporcionan una mejora semánica y nos ahorran mucho trabajo en programación y diseño, las nuevas funcionalidades ofrecen una mejor experiencia de usuario al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y darle una devolución inmediata acerca de los datos que van a ser enviados, incluso con Javascript deshabilitado.

Estas nuevas caracteristicas no son compatibles con todos los navegadores, Opera y Chrome ofrecen un mayor soporte pero algunas caracteristicas todavía no son compatibles con muchos navegadores web, por lo que debes tener cuidado con su uso.

Nuevos atributos para la etiqueta <input>

autocomplete, autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step

Nuevos atributos para la etiqueta <form>

autocomplete, novalidate

Nuevos tipos de entrada

<input type="email">
<input type="url">
<input type="date">
<input type="time">
<input type="datetime">
<input type="month">
<input type="week">
<input type="number">
<input type="range">
<input type="tel">
<input type="search">
<input type="color">

Código de ejemplo

<!-- Formulario Html5 Didesweb https://didesweb.com -->
<form action="." oninput="range_control_value.value = range_control.valueAsNumber">
	<p>
		Nombre: <input type="text" name="name_control" autofocus required>
	</p>
	<p>
		Correo Electrónico: <input type="email" name="email_control" required>
	</p>
	<p>
		URL: <input type="url" name="url_control" placeholder="Escripe la URL de tu página web personal">
	</p>
	<p>
		Fecha: <input type="date" name="date_control">
	</p>
	<p>
		Tiempo: <input type="time" name="time_control">
	</p>
	<p>
		Fecha y hora de nacimiento: <input type="datetime" name="datetime_control">
	</p>
	<p>
		Mes: <input type="month" name="month_control">
	</p>
	<p>
		Semana: <input type="week" name="week_control">
	</p>
	<p>
		Número (min -10, max 10): <input type="number" name="number_control" min="-10" max="10" value="0">
	</p>
	<p>
		Intervalo (min 0, max 10): 
		<input type="range" name="range_control" min="0" max="10" value="0">
		<output for="range_control" name="range_control_value" >0</output>
	</p>
	<p>
		Teléfono: <input type="tel" name="tel_control">
	</p>
	<p>
		Término de búsqueda: <input type="search" name="search_control">
	</p>
	<p>
		Color Favorito: <input type="color" name="color_control">
	</p>
	<p>
		<input type="submit" value="Enviar">
	</p>
</form>

Resultado