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: <input id=”txtNombre” type=”text” placeholder=”Ingresa tu nombre” />
· required: con este atributo definimos si un campo es requerido o no, un ejemplo sería:
1: <input id=”txtNombre” type=”text” required />
· 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: <input id=”txtNombre” type=”text” autofocus />
· 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: <input id=”txtNombre” type=”text” autocomplete=”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: <input type="text" id="txtCiudad" list="listCiudad" placeholder="Ingresa tu ciudad"/>
3: <datalist id="listCiudad">
4: <option value="Bogota" label="Bogota">
5: <option value="Cali" label="Cali">
6: <option value="Medellin" label="Medellin">
7: <option value="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: <input id="btnLimpiar" formnovalidate type="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 formulario</h1><hr>
2: <form id="form1" name="form1">
3: <table>
4: <tr>
5: <td>Nombre:</td>
6: <td><input type="text" required placeholder="Ingrese su nombre"></td>
7: </tr>
8: <tr>
9: <td>Apellido:</td>
10: <td><input type="text" required placeholder="Ingrese su apellido"></td>
11: </tr>
12: <tr>
13: <td>Email:</td>
14: <td><input type="email" required placeholder="Ingrese su email"></td>
15: </tr>
16: <tr>
17: <td>Sitio Web:</td>
18: <td><input type="url" placeholder="Ingrese el sitio Web"></td>
19: </tr>
20: <tr>
21: <td><input type="submit" value="Enviar datos"></td>
22: <td><input type="submit" value="Limpiar datos" formnovalidate></td>
23: </tr>
24: </table>
25: <form>
Nos vemos en el siguiente post!
Descarga el ejemplo!
