Nuevos elementos input HTML5

A continuación se mostrarán los nuevos elementos inputs HTML5, en este apartardo se harán comprobaciones de compatibilidad con modernizr y podrás ver una etiqueta de error si el nuevo elemento no es compatible con tu navegador ...

ATRIBUTOS GLOBALES PARA INPUT:
accept | alt | auto-complete | autofocus | cheked | disabled |
form | formaction | formenctype | formmethod | formnovalidate |
formtarget | height | list | max | maxlength | min | multiple |
name | pattern1 placeholder | readonly | required | size | src |
step | type | value | width

search es un nuevo campo de texto diseñado para campos de búsqueda, la característica es que cuando escribes te aparece una X en el lateral derecho, que si haces click borra el contenido escrito.

<input type="search">

number es otro nuevo input en este caso permite crear rangos entre los atributos min y max, y aplicarle un valor inicial con el atributo value, sus características es que tiene dos flechas, una para avanzar y otra para retroceder.

<input type="number" min="0" max="100" value="50">

range es un slider con un eje central que al igual que el input number, permite crear rangos entre un valor mínimo y máximo.

<input type="range" min="0" max="1000" value="500">

color es un botón que al hacer click te muestra una paleta de colores.

<input type="color">

tel es un campos de texto para números telefónicos, puede comprobar el valor del campo a través de expresiones regulares que son introducidas en el atributo pattern.

<input type='tel' pattern='\d{3}\d{3}\d{3}' title='Teléfono (Formato: 900506070)'>

url es otro campo para validar los datos introducidos, en este caso la validación de la url se realiza introduciendo el atributo required.

<input type="url" required title="URL incorrecta">

Email al igual que url es un campo que puede ser validado antes de ser enviado a través del atributo required.

<input type="submit" value="Validar Email">

date permite añadir un calendario para seleccinar días, meses y años.

<input type="date">

time permite agregar un campo para seleccionar una hora determinada.

<input type="time" value="14:00:00">

Para que el ejemplo funcione pega estas etiquetas en el head ... 

 <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> 
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

 Códigos del ejemplo ...

 Javascript ...
HTML ...