Logotipo de Orbis Sapientia Elearning Services

Servicios de formación. Especialistas en E-learning.

HTML 5 REQUIRED SELECT

HTML 5 required select: un atributo reinventado

HTML5 Logotipo. HTML 5 required selectEsta versión de HTML 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 adecuada o no, interactuando con el visitante de acuerdo a la implementación que de HTML 5 tenga el navegador que se 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í: http://www.wufoo.com.mx/html5/

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.

MÁS SOBRE ARIA-REQUIRED

EDITADO 16/12/2016
Actualmente los atributos aria no se consideran necesarios ya que la práctica totalidad de navegadores son compatibles con la mayoría de características de HTML 5 y realmente no aportan nada. En el siguiente hiperenlace se trata este punto de forma exhaustiva:
http://html5doctor.com/on-html-belts-and-aria-braces/

Un usuario anónimo me comentó que la misión de aria-required no es la compatibilidad si no para indicar que un campo es requerido desde un lector de pantalla. Sin entrar en debates baldíos de lo que realmente hace aria-required, es verdad que quizás su uso en este artículo, debería haber sido más detallado para evitar confusiones. Gracias quien seas. La idea de incluirlo aquí, era que, en las fechas en que se publicó el artículo, habían clientes web que no reconocían correctamente el atributo required y aria-required podía ser usado como factor de ampliación de compatibilidad, independientemente de lo que pueda ser su uso real. De todas formas: https://www.w3.org/TR/html-aria/

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:

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

Hasta otra

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

Lo dejamos aquí de momento, ya que este artículo tenía como misión mostrar el uso correcto de required con select. La creación de formularios HTML 5 podéis estudiarla con todo detalle, bien en la abundante documentación existente en la web, bien, realizando algún curso como los que podemos ofrecerte. Si quieres más información, puedes hacerlo a josema@obelearningservices.com o más cómodamente desde el formulario de contacto.

Un cordial saludo y mis mejores deseos para todos para este nuevo año.

Deja un comentario

Contáctanos

Logotipo Orbis Sapientia E-Learning Services© 2017. Orbis Sapientia E-Learning Services - José Manuel Domínguez Romero. Todos los derechos reservados.

Últimas noticias y eventos

Archivos

Sobre nosotros

Avenida Castilla la Mancha, 31, Bajo 1
28702 San Sebastián de los Reyes
Madrid
X