HTML5 ofrece una nueva manera para trabajar con formularios, centrándose principalmente en hacernos la vida más fácil a los desarrolladores, ahora es posible tener formularios con reglas de validación sin utilizar código cliente.

Anteriormente vimos cuales son los nuevos tipos de input de los que disponemos (ver post), y estos son parte clave en el desarrollo, pero aun tenemos más, y vamos a revisarlas:

1. Nuevos atributos:

HTML5 define nuevos atributos para trabajar con formularios, y su principal objetivo es reducir el código JavaScript que debemos escribir prácticamente a 0.

Los atributos son:

· placeholder: con este atributo podemos especificar un texto que trabaje como marca de agua para una caja de texto, el texto solo será mostrado si dicho campo esta vacía, un ejemplo:

1: <inputid=”txtNombretype=”textplaceholder=”Ingresatunombre/>
· required: con este atributo definimos si un campo es requerido o no, un ejemplo sería:
1: <inputid=”txtNombretype=”textrequired/>
· autofocus: establece el foco en un determinado control cuando se carga la página, solo se debe asignar este atributo a un elemento del DOM por página, un ejemplo sería:
1: <inputid=”txtNombretype=”textautofocus/>
· autocomplete: permite definir si un campo de texto debe recordar los valores ingresados anteriormente, puede tomar dos valores, true o false; un ejemplo sería:
1: <inputid=”txtNombretype=”textautocomplete=”false/>

2. Lista de opciones:

Otra de las características que tenemos disponibles ahora en HTML5 para trabajar con formularios es la posibilidad de crear listas de opciones para nuestras cajas de texto, para realizar esto disponemos del elemento datalist en el cual definimos las opciones y del atributo list el cual tendrá como valor el id del datalist creado, un ejemplo sería:

1: <b>Ciudades:b> 2: <inputtype="text"id="txtCiudad"list="listCiudad"placeholder="Ingresa tu ciudad"/> 3: <datalistid="listCiudad"> 4: <optionvalue="Bogota"label="Bogota"> 5: <optionvalue="Cali"label="Cali"> 6: <optionvalue="Medellin"label="Medellin"> 7: <optionvalue="Pereira"label="Pereira"> 8: datalist>

3. Validar formulario al enviarlo:

Por defecto, los botones de tipo submit realizan la validación de todos los campos con el atributo required en un formulario, sin embargo es posible tener botones que no realicen dichas validaciones, y como? muy fácil solo debemos incluir el atributo formnovalidate, un ejemplo sería:

1: <inputid="btnLimpiar"formnovalidatetype="submit"value="Limpiar"/>

Ahora como ejemplo real vamos a crear un formulario de registro de usuario, y vamos a ver que realmente no nos es necesario escribir código cliente para realizar la validación de estos campos, en resumen nuestro HTML sería:

1: <h1>Validando un formularioh1><hr> 2: <formid="form1"name="form1"> 3: <table> 4: <tr> 5: <td>Nombre:td> 6: <td><inputtype="text"requiredplaceholder="Ingrese su nombre">td> 7: tr> 8: <tr> 9: <td>Apellido:td> 10: <td><inputtype="text"requiredplaceholder="Ingrese su apellido">td> 11: tr> 12: <tr> 13: <td>Email:td> 14: <td><inputtype="email"requiredplaceholder="Ingrese su email">td> 15: tr> 16: <tr> 17: <td>Sitio Web:td> 18: <td><inputtype="url"placeholder="Ingrese el sitio Web">td> 19: tr> 20: <tr> 21: <td><inputtype="submit"value="Enviar datos">td> 22: <td><inputtype="submit"value="Limpiar datos"formnovalidate>td> 23: tr> 24: table> 25: <form>

Nos vemos en el siguiente post!

Descarga el ejemplo!