HTML 5 ha traído bastantes funcionalidades a los desarrolladores de aplicaciones web que antes era necesario "fabricar"; bastantes de ellas dentro de los llamados Formularios HTML 5 y en concreto aquellas que tienen que ver con validaciones de los campos de formularios, como la frecuente tarea de comprobar si se han rellenado o no, los campos que establezcamos como obligatorios.
Una tarea, simple en su cometido, pero que requería un uso intensivo de JavaScript y CSS. Con HTML 5 solamente tenemos que añadir el atributo required al campo del formulario que consideremos obligatorio completar.
A partir de ahí, será el propio navegador el encargado de controlar si ese campo requerido tiene información o no, interactuando con el visitante de acuerdo a la implementación que de HTML 5 tenga el navegador que esté usando. Es el punto donde entra en juego la compatibilidad del navegador con el estándar HTML 5. Hay un muy buen artículo sobre compatibilidades aquí:
Puesto que con las nuevas versiones de navegadores esto puede cambiar, la información del artículo al que apunta el enlace, solamente debe servir como guía. En cualquier caso, si queremos cambiar el comportamiento que ofrece el navegador para required, tendremos que utilizar nuevamente CSS y JavaScript. También podemos usar el atributo aria-required (se puede utilizar de manera conjunta a required) que hace lo mismo que éste pero es compatible con algunos navegadores que no lo son con este atributo.
El uso con cualquier elemento de tipo input, textarea o select es muy simple, ya que simplemente basta con añadirlo al elemento obligatorio. De todas formas, si hay problemas de compatibilidades con navegadores, estas son las posibilidades:
1: required
2: required="required"
3: required='required'
4: required=required
5: required=""
6: required=''
Con todo, su utilización en un elemento select, actualmente implica tener en cuenta algunos detalles más que su mera inclusión. Estos factores son:
- Debe tener uno o más opciones (elementos option).
- La primera opción o elemento option debe tener su atributo value vacío o simplemente no tener contenido de texto.
Ejemplos:
1: Ejemplo 1:
2: <form action="#" method="post">
3: <br />
4: <div>
5: <label for="provincias">Provincias</label> // Incluyo aria-required para mayor compatibilidad
6: <select aria-required="true" id="provincias" name="provincias" required>
7: <option value="">Seleccione una provincia, por favor</option>
8: <option value="bar">Barcelona</option>
9: <option value="mad">Madrid</option>
10: <option value="sev">Sevilla</option>
11: ...
12: ...
13: </select>
14: </div>
15: </form>
16:
17:
18: Ejemplo 2:
19: <form action="#" method="post">
20: <br />
21: <div>
22: <label for="provincias">Provincias</label> // Incluyo aria-required para mayor compatibilidad
23: <select aria-required="true" id="provincias" name="provincias" required>
24: <option></option>
25: <option value="bar">Barcelona</option>
26: <option value="mad">Madrid</option>
27: <option value="sev">Sevilla</option>
28: ...
29: ...
30: </select>
31: </div>
32: </form>
33:
34:
35: Ejemplo 3: // NO VÁLIDO
36: <form action="#" method="post">
37: <br />
38: <div>
39: <label for="provincias">Provincias</label>
40: <select aria-required="true" id="provincias" name="provincias" required>
41: <option>Seleccione una provincia, por favor</option>
42: <option value="bar">Barcelona</option>
43: <option value="mad">Madrid</option>
44: <option value="sev">Sevilla</option>
45: ...
46: ...
47: </select>
48: </div>
49: </form>
A la hora de crear las vistas para nuestras aplicaciones o nuestras herramientas como Liferay, Joomla, Prestashop, etc., no cabe duda de que es un arma excelente que nos ahorrará mucho trabajo, eso, sin tener en cuenta que estaremos ahorrando código CSS y JavaScript, lo que hará que aumente el rendimiento de la aplicación.
Un cordial saludo y mis mejores deseos para todos para este nuevo año.
Etiquetas: html5, joomla, php, required, select, software libre
