HTML: Formularios en HTML5 2/2

En la entrada anterior hemos visto las ventajas de HTML5 a la hora de desarrollar formularios, y una lista de los valores nuevos del atributo type. Ahora veremos una lista corta de nuevos atributos combinables.

Nuevos atributos para la etiqueta <input/>

En HTML5 también se han diseñado un conjunto de atributos nuevos que combinándolos correctamente con los ya aprendidos podremos construir formularios muy avanzados.

autocomplete="on/off"

La función de este atributo es controlar la opción de autocompletado en un campo de texto. Si seleccionamos el valor on, el cuadro de texto abrirá una pestaña con los textos escritos anteriormente, y si seleccionamos la opción off nos aseguramos de que la opción de autocompletado esté desactivada en caso de que el navegador la tenga activa de manera predeterminada.

Este atributo es compatible con los siguientes tipos de input:

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

autofocus

Este atributo es booleano y no necesita valor. Además solo debe haber un elemento con el atributo autofocus en toda una página.

Su función es colocar el foco automáticamente en el controlador con tan solo cargar la página web. Un ejemplo sería la página principal de Google, donde con solo cargarla ya aparece el cursor parpadeando en la barra de búsqueda.

Este atributo no debe emplearse a la ligera, pues podría causar problemas de usabilidad y accesibilidad, y solo debemos usarlo en caso de estar seguros que los usuarios necesitarán pasar por el cuadro de texto después de cargar la página.

min="número" y max="número"

Estos dos atributos nos ayudan a escoger un valor mínimo y un valor máximo para diferentes tipos de controladores. En caso de definir un mínimo y/o máximo, el usuario le será imposible insertar un valor fuera de estas restricciones.

Estos atributos son compatibles con los siguientes tipos de input:

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

step="número"

La utilidad de este atributo es definir el intervalo numérico válido para un elemento "input".

Un ejemplo sería definir con value="0" el número 0 como predeterminado, y con step="2" para que así solo sea posible escribir números pares. O bien podríamos empezar con value="1" para empezar con el número 1 como predeterminado y step="2" par que así solo sea posible escribir números impares.

Este atributo es compatible con los siguientes tipos de input:

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

pattern="expresión"

Este atributo permite validar un elemento "input" en base a una expresión regular. Si quisiéramos crear un código PIN deberíamos añadirlo de la siguiente manera: pattern="[0-9]{4}" definiendo que deben ser números del 0 al 9 y exactamente 4 dígitos.

Este atributo es compatible con los siguientes tipos de input:

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

placeholder="ejemplo"

Nos permite añadir un texto en el campo que sea explicativo o una pista para que el usuario comprenda qué tipo de valores debe escribir en el cuadro de texto.

Un ejemplo para asegurarse que el usuario escriba una URL es el siguiente:

<input type="url" placeholder="http://www.ejemplo.com/">

Y el resultado sería:

URL:

required

Otro atributo booleano que especifíca que el elemento que lo contiene obliga al usuario a rellenarlo antes de enviar el formulario. Es el típico cuadro de texto señalizado con un asterisco.

Este atributo es compatible con los siguientes tipos de input:

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

Y por último...

Ahora nos toca probar cada uno de los atributos con un par de combinaciones. Asegúrate de dominar estos atributos y de saber combinarlos adecuadamente. Luego pruébalos con diferentes navegadores y observa las diferencias.