Seguimos avanzando en la creación de formularios con HTML5, en el curso de HTML5 desde 0. En esta clase vamos a crear campos para números, fecha, hora y áreas de texto. Para continuar con un buen desarrollo de las clases, te invito a que le des un repaso a la clase Creando campos para email, url, teléfono y búsquedas si no lo has hecho todavía. Pero pongámonos manos a la obra, no tenemos tiempo que perder si queremos crear un sitio web profesional.
Campos para números con "number"
Crea un tipo especial de campo de entrada para la introducción de un número. En la mayoría de los navegadores que lo soportan, aparece como un campo de entrada de texto con un control de número, que le permite aumentar o disminuir su valor. Además cuenta con 3 atributos que detallamos a continuación:
min="1": Donde vamos a indicar el valor mínimo que se puede colocar dentro del campo.max="10": Donde vamos a indicar el valor máximo que se puede colocar dentro del campo.step="1": Es muy util para tiendas online. Por ejemplo si pones el valor 12 (step="12") se contabilizaría de 12 productos en 12 productos.
<p> <label for="cantidad-pro">Cantidad de productos</label> <input type="number" name="cantidad-por" id="cantidad-por" min="1" max="10" step="1"> </p>
Vista a tiempo real en Google Chrome puedes interactuar con el elemento
Campo de tipo rango con "range"
Crear un control deslizante que permitiera al usuario elegir entre un rango de valores solía ser una propuesta complicada, semánticamente dudosa, pero con el HTML5 se ha convertido en algo fácil de implementar. Sólo tenemos que utilizar el tipo de campo de entrada
range.<p> <label for="experi-info">Experiencia en informatica</label> <input type="range" name="experi-info" id="experi-info" min="0" max="50"> </p>
Vista a tiempo real en Google Chrome puedes interactuar con el elemento
Debemos tener en cuenta que, por defecto, este campo de entrada no suele mostrar el valor seleccionado en el momento actual, o incluso el rango de valores que abarca. Los desarrolladores debemos proporcionarlos mediante otros medios; por ejemplo, para mostrar el valor actual, podríamos utilizar un elemento <output> junto con algo de JavaScript para actualizar la representación del control cuando el usuario ha interactuado con el formulario. Pero no vamos a estudiar la implementación con Javascript, al menos por el momento, pero siempre es bueno conocer todas las opciones que tenemos a nuestra disposición.
Campo de fecha con "date" y "time"
Por lo que llevo estudiado, leído e investigado en el mundo del desarrollo web, para implementar esto en el pasado había que utilizar . trucos no semánticos. En la actualidad, HTML5 a puesto a nuestra disposición un número de campos de entrada diferentes para crear selectores complejos de fecha/hora; por ejemplo, el tipo de selector de fecha que aparece en prácticamente todo sitio de reserva de vuelo/tren existente.
<p> <label for="fecha-naci">Fecha de nacimiénto</label> <input type="date" name="fecha-naci" id="fecha-naci"> </p> <p> <label for="hora-entrega">Hora preferible de entrega</label> <input type="time" name="hora-entrega" id="hora-entrega" value="12:00"> </p>
Vista a tiempo real en Google Chrome puedes interactuar con el elemento
Estos crean, respectivamente, un selector de fecha totalmente funcional y un campo de entrada de texto que contiene un separador para horas, minutos y segundos (dependiendo del atributo
step especificado) que sólo le permite introducir un valor de tiempo.Aunque en principio solo tenia pensado estudiar estos dos campos de entrada en cuestión de fecha/hora, creo que es conveniente al menos comentar otros tres campos de entrada.
datetime: Combina la funcionalidad de los dos que hemos analizado anteriormente, permitiéndole elegir una fecha y una hora.month: Nos permite elegir un mes, almacenado internamente como un número entre 1-12; aunque los diferentes navegadores pueden proporcionarle mecanismos de selección más elaborados, como una lista desplegable con los nombres de los meses.week: Nos permite elegir una semana, almacenada internamente en el formato 2010-W37 (semana 37 del año 2019) y elegida mediante un selector de fecha similar a los que ya hemos visto.
Campo tipo color con "color"
Este campo de entrada nos muestra un selector de color. La implementación del navegador por defecto le permite al usuario elegir entre una selección de colores, introducir valores hexadecimales directamente en un campo de texto o invocar el selector de colores nativo del Sistema Operativo.
<p> <label for="micolor">Elija su color favorito</label> <input type="color" name="micolor" id="micolor"> </p>
Vista a tiempo real en Google Chrome puedes interactuar con el elemento
Campos para áreas de texto con <textarea>
La etiqueta <textarea> acepta dos atributos aparte de
name e id y son los siguientes:cols="": Aquí definimos la cantidad de caracteres visibles de forma horizontal.rows="": Aquí definimos la cantidad de caracteres visibles de forma vertical. El tamaño de la caja de texto se hará posteriormente con CSS en ambos casos.
<p> <label for="bio">Haga su consulta</label> <textarea name="bio" id="bio" cols="20" rows="5"></textarea> </p>
Vista a tiempo real en Google Chrome puedes interactuar con el elemento
La etiqueta <textarea>, tambien acepta un atributo que ya hemos estudiado en anteriores clases. Estoy hablando del atributo "required", el cual hace que el campo de entrada de texto sea obligatorio.
Creando una caja de selección con <select> y <option>
Estas cajas o campos los vamos a crear gracias a las etiquetas <select> y <option>, os recuerdo que ambas etiquetas o elementos llevan etiqueta de cierre. Dentro de <select> colocaremos las diferentes opciones con la etiqueta <option>.
<p> <label for="estado">Seleccione su estado</label> <select name="estado" id="estado"> <option value="viudo">Viudo</option> <option value="casado">Casado</option> <option value="divorciado">Divorciado</option> </select> </p>
Vista a tiempo real en Google Chrome puedes interactuar con el elemento
Ya veis que fácil resulta trabajar con estos elementos, pero vamos ha conocer sus atributos que es algo importante y acepta bastantes.
autofocus: Este atributo permite especificar un formulario de control que debería tener enfoque de entrada cuando se carga la página, a no ser que el usuario lo sobrescriba, por ejemplo, escribiendo un control diferente. Solo un elemento formulario puede tener el elemento de enfoque de entrada por documento, por lo cual es un atributo booleano.disabled: El atributo booleano especifica que el usuario no puede interactuar con el control. Si este atributo no está especificado, el control hereda los ajustes del campo que lo contiene. Si no hay elemento contenido con el atributo disabled, entonces el control se considera enable (activado).multiple: Este elemento booleano indica que se pueden seleccionar múltiples opciones de la lsita. Si no está especificado, solo se podrá seleccionar una opción cada vez.name: El nombre del elemento de control.required: Es un elemento boooleano que indica si la opción puede quedar sin seleccionar o si es requerida como ya he explicado anteriormente.size: Si el control se presenta como una lista con scroll en caja, este atributo representa el numero de filas que la lista tendrá visible la primera vez. Los navegadores no están requeridos a presentar un elemento <select> como una lista con scroll en caja. El valor por defecto es cero.
Se me olvidaba comentar que para colocar sub-opciones, lo haremos colocando la etiqueta <optgroup> para agrupar opciones y dentro se colocaran las opciones con la etiqueta <option>. Esta opcion puede estar preseleccionada por el usuario.
Conclusiones
Las conclusiones más inmediatas que podemos sacar de esta clase, es que ha sido bastante extensa. De hecho, mientras escribía estaba pensando en dividir la clase en dos. Pero bueno, asi avanzamos de manera más rápida en este curso.
Pero ahora en serio, hemos aprendido 6 campos nuevos para nuestros formularios de contacto en HTML5. Campos que nos van a ser muy necesarios en el desarrollo web actual, ya que se hacen imprescindibles en el comercio online. Solo quiero añadir que esta ha sido una clase muy completa y que aparte de compartir mis apuntes en ella, también me ha servido para investigar y aprender más sobre los formularios de contacto.
Habréis notado que los ejemplos con códigos ya no van con colores. Bueno, esto es porque hacerlo de esa manera queda muy bien, pero da muchísimo trabajo de etiquetado. Así que a partir de ahora van así que aunque menos bonito sigue siendo igual de practico. A cambio ahora en vez de imágenes de las vistas en el navegador de los elementos de los que hablo, he decidido poner los elementos directamente en el post para que podáis interactuar con ellos.
Os emplazo para la siguiente clase, que ya que esta ha sido doble, vamos a pasar a la primera clase del modulo 4. En el modulo 5 nos adentraremos en las etiquetas estructurales para ir avanzando cada vez más en este curso. Cuando miro atras me parece mentira que empezara con esto el con un primer post llamado Aprender HTML5 Y CSS3 de manera autodidacta. El cual tendré que echarle un rato para actualizarlo que seguro que lo miro y me da vergüenza.
Me gustaría pedirte que compartas esta clase con tus amigos/as, ya que de esa manera otras personas se beneficiaran de estos conocimientos al igual que lo has hecho tu. Si te apetece regalanos un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.
0 Comentarios