Una de las características más importantes que nos trae el nuevo estándar HTML5 son los nuevos elementos disponibles para el manejo de formularios, ya que nos permite gestionarlos de manera nativa, y por tanto se puede prescindir de JavaScript para realizar algunas validaciones de formulario del lado del cliente.
Nuevos valores para el atributo type en <input>
- "url": se usa en aquellos campos que deban contener una dirección web. El valor del campo "url" es automáticamente validado cuando el formulario es enviado.
- "tel": se usa para definir campos en los que se deba introducir un número de teléfono. Para validarlo como un formato numérico en particular se debe complementar con el atributo pattern.
- "email": se usa para definir campos en los que se deba introducir una dirección de correo electrónico válida.
- "number": se usa para definir campos en los que se deba introducir un valor numérico. Puede contener atributos que permitan realizar restricciones sobre el número, como por ejemplo, definiendo un valor mínimo o máximo mediante los atributos min y max, o asignándole un valor específico por defecto, mediante el atributo value.
- "color": se usa para definir campos en los que el usuario puede seleccionar un color desde una paleta de colores. Si no se define un valor, por defecto adquiere el color negro.
- "search": se usa para definir campos de búsqueda en formato de texto, adquiriendo un aspecto gráfico más adecuado a su función. Al introducir texto en este campo, el navegador muestra una cruz a la derecha que permite al usuario borrar todo lo escrito hasta el momento.
- "range": se usa para definir campos que deban contener un valor numérico que esté dentro de un rango específico que se define con los atributos min y max. También podemos usar otros atributos como por ejemplo value para darle un valor por defecto, o el atributo step, que sirve para definir los intervalos en los que puede variar el valor.
- "datetime": permite al usuario seleccionar la hora completa más el día, mes, año y zona horaria.
- "datetime-local": permite al usuario seleccionar la hora completa más el día, mes y año, pero no se incluye la zona horaria.
- "date": permite al usuario seleccionar una fecha completa formada por día, mes y año.
- "month": permite al usuario seleccionar un mes y un año específicos.
- "week": permite al usuario seleccionar una semana y un año específicos.
- "time": permite al usuario seleccionar la hora, en formato de horas y minutos.
Además, permite que el formulario no sea enviado si no es válido, e informa al usuario de que alguno de los valores introducidos no cumple los requisitos definidos.
Los dispositivos móviles están incorporando mejoras muy interesantes de usabilidad para el usuario, adaptándose en la medida de lo posible a sus necesidades, ahorrándoles así trabajo y tiempo.
Nuevos atributos para <input>
- autocomplete: permite especificar si un formulario completo o un campo de este debe tener la opción de autocompletado activada o no. Cuando esté activado, el navegador completará automáticamente el campo con valores que el usuario haya introducido en ese campo en ocasiones anteriores. Funciona con <form> y con los siguientes tipos de <input>: text, search, url, tel, email, datepickers, password, range, color.
- autofocus: permite especificar en qué campo de entrada queremos que se coloque automáticamente el foco cuando se carga la página (permite al usuario comenzar a escribir de inmediato sin tener que hacer click en el campo).
- min y max: sirven para delimitar un rango de valores numéricos, permitiendo especificar el valor máximo y mínimo para un campo de entrada. Funcionan con los tipos de <input>: range, number, date, datetime, datetime-local, month, time, week.
- pattern: permite validar un elemento <input> en base a una expresión regular (modelos o patrones que describen las combinaciones de caracteres que se pueden introducir en el campo de texto). Funciona con los tipos de <input>: text, search, url, tel, email, password.
- placeholder: permite que se muestre una pista o ejemplo de lo que el usuario debe introducir en el campo de entrada. Funciona con los tipos de <input>: text, search, url, tel, email, password.
- required: especifica que el input que lo contiene debe ser rellenado obligatoriamente por el usuario antes de enviar el formulario. Funciona con los tipos de <input>: text, search, url, tel, email, datepickers, password, number, checkbox, radio, file.
