HTML5: Nuevas funcionalidades en formularios parte 2.

En esta segunda parte vamos a ver los nuevos atributos de contenido que introduce HTML5. A parte de ver brevemento los Modernaizer y Polyfills.

• Nuevos atributos de contenido.
• autocomplete, autofocus,  min, max, step, pattern, placeholder,required
• Modernizr y Polyfills

Nuevos atributos para la etiqueta <input>

autocomplete: puede utilizarse con otras etiquetas como el elemento form. Especifica si un formulario completo o un campo de éste debe de tener la opción de autocompletado.
Ejemplo:
<form autocomplete="on">
<input type="email" name="email" autocomplete="off">

Con valor on se autocompletará el formulario con valores que el usuario haya introducido en ese campo en ocasiones anteriores. En el caso de desactivarlo con la opción off se previene que un campo se complete automáticamente, por motivos de seguridad por ejemplo.

Es posible que en un mismo formulario existan campos que se autocompleten y que no lo hagan.

Este atributo funciona con los siguiente tipos (type) de input:

• text
• search
• url
• tel
• email
• date pickers
• password
• range
• color

autofocus: no permite indicar en qué campo de entrada se coloca el foco cuando se carga la página. Es un atributo de tipo booleano, por lo que no debemos definit más de uno en cada formulario.
Ejemplo:
<input type="text" name="nombre" autofocus>

Este atributo es muy útil para los usuarios de teléfonos móviles. Es importante asegurarse que el campo seleccionado para que sea el campo que empezarán a usar la mayoría de los usuario.


min y max se utilizan para delimitar el rango de los valores numéricos. Permiten especificar un máximo y un mínimo para un campo de entrada. No permite introducir un valor por encima del máximo y por debajo del mínimo.

Ejemplo:
<input type="number" name="cantidad" min="2" max="8" />

<input type="range" name="rango" min="2" max="8" />

Este atributo funciona con los siguiente tipos (type) de input:

• number
• range
• date
• datetime
• datetime-local
• month
• time
• week

step: nos indica la pauta que nos dará los valores válidos en un formulario, en el caso anterior serían válidos los valores 2,4,6,8

Ejemplo:
<input type="range" name="rango" min="2" max="8" step="2" value="2"/>

 Este atributo funciona con los siguiente tipos (type) de input:

• number
• range
• date
• datetime
• datetime-local
• month
• time
• week

pattern: el atributo pattern permite especificar las expresiones regulares que pueden introducirse en un campo.

Ejemplo:
 Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

El atributo title nos ayuda a comprender que información espera el campo.

 Este atributo funciona con los siguiente tipos (type) de input:

• text
• search
• url
• tel
• email
• password

placeholder: este atributo nos muestra el contenido que espera el campo.

Ejemplo:
<input type="text" name="nombre" placeholder="Fernando Haro" />

Esta pista se muestra en el campo cuando está vacío y desaparece cuando el campo recibe el foco.

Este atributo funciona con los siguiente tipos (type) de input:

• text
• search
• url
• tel
• email
• password

required: es un atributo booleano que indica que el campo que debe de rellenarse antes de enviar el formulario. Es el campo obligatorio que aparece señalado con un asterisco o en rojo.

Ejemplo:
<input type="text" name="nombre" required />
 
Este atributo funciona con los siguiente tipos (type) de input:

• text
• search
• url
• tel
• email
• password 
• number
• checkbox
• radio
• file

Modernizr y Polyfills

Modernizr: es una librería de javascript que nos permite conocer la compatibilidad del navegador con las tecnologías HTML5 y CSS3. En el caso de encontrar elementos no compatibles ofrece medidas para solucionarlo.

Polyfills: librería de javascript que nos permiten cubrir los elementos no soportados por los navegadores.

Modernizr + polyfills ahorra trabajo a los desarrolladores.

Este post se ha creado a partir del video del curso idesweb.