Con la finalidad de identificar semánticamente los
campos para el ingreso de datos, manejaremos formularios con algunas
especificaciones de HTML5, con base en las recomendaciones oficiales de este
lenguaje. Por identificar semánticamente de
forma incorrecta algunos campos, ellos pierden los efectos personalizados de
algunos navegadores web o
dispositivos móviles. Debido a ello, identificaremos el uso de algunas
etiquetas de la quinta versión de HTML.
El lenguaje de HTML ha sido
desarrollado durante varios años y, aunque antes de la quinta versión
estandarizaron las etiquetas de formulario, en ésta decidieron ser más
detallistas y agregaron especificaciones adicionales, con la finalidad de
apoyar a los navegadores de dispositivos móviles, debido al uso con mayor
frecuencia por los usuarios.
Dentro de las etiquetas nuevas de
HTML5, en su mayoría soportadas por los diferentes navegadores web, tenemos date, month, time, datetime y week. Sin embargo, cuando el
navegador se encuentra sin la capacidad de entender algunos de los nuevos
atributos de formularios, los interpreta por defecto como type text.
061-01_1009_ilu01. Etiqueta por defecto
Algunos tipos de atributos con su función,
para agregarlos en formularios son los siguientes:
- URL para ingresar en el campo una dirección de página web.
- Tel: para ingresar en el campo un número de teléfono.
- Email: para ingresar en el campo un correo.
- Search: para ingresar en el campo un dato a buscar.
Estos tipos de atributos sin
cambios visibles en algunos navegadores web,
son útiles describirlos cuando cumplirán la función especificada anteriormente,
porque en equipos móviles varía el teclado según el campo. Por ejemplo, si es
un correo muestra la arroba o si es una búsqueda, muestra en botón de search. Por la relación hecha, en la
siguiente imagen, es posible visualizar en el campo correo la sugerencia de uno
ingresado anteriormente.
061-01_1009_ilu02. Tipos de type en HTML5
En internet existen páginas para
vender productos, las cuales tienen formularios donde el usuario realiza la
compra de los mismos, por lo tanto, el atributo de type con valor color y datalist resultan beneficiosos, debido a
la selección de color o sugerencias.
061-01_1009_ilu03. Creación de type color y datalist
En el código anterior es posible
observar cómo se crea el campo de tipo color y, en la parte de abajo, cómo el
navegador muestra al usuario una gama de colores para seleccionar uno. La
etiqueta datalist permite mostrar una
lista de sugerencias, a fin de proporcionar al usuario la opción de seleccionar
una de ellas.
Keynotes
- El lenguaje de HTML ha sido desarrollado
durante varios años y, aunque antes de la quinta versión estandarizaron las
etiquetas de formulario, en ésta decidieron ser más detallistas y agregaron
especificaciones adicionales, con la finalidad de apoyar a los navegadores web de dispositivos móviles.
- Dentro de las etiquetas nuevas de HTML5, en
su mayoría soportadas por los diferentes navegadores web, tenemos date, month,
time, datetime y week. Sin embargo, cuando el navegador se escuentra sin la
capacidad de entender algunos de los nuevos atributos de formularios, los
interpreta por defecto como type text.
- En internet existen páginas para vender
productos, las cuales tienen formularios donde el usuario realiza la compra de
los mismos, por lo tanto, el atributo de type
con valor color y datalist resultan beneficiosos, debido a
la selección de color o sugerencias.
RetoCrea un formulario con los campos aprendidos y
sigue las recomendaciones oficiales del lenguaje. Agrega un comentario para especificar
claramente la identificación semánticamente de los campos.
¡Comparte el resultado final del reto en tu vPages, solicita a tres compañeros comentar
su punto de vista!
Tiempo disponible: entre 15 y 30 minutos.
Cierre
Mediante el manejo de formularios con las
especificaciones de HTML5 y siguiendo las recomendaciones oficiales de este
lenguaje, identificamos semánticamente campos de forma correcta. Por este
motivo, los campos tendrán los efectos personalizados de algunos navegadores web y dispositivos móviles, para una
guía de cómo deben ser llenados. Con disciplina y organización crearemos
formularios profesionales.
