Los formularios son el soporte en el que se integran los botones y las áreas de texto que se utilizan para que los usuarios introduzcan sus datos o que puedan elegir entre varias opciones. En este apartado veremos las etiquetas que se utilizan para la creación de formularios en HTML5.
Etiquetas para la creación de formularios
El principio y final de un formulario se define con las etiquetas <form> y </form>. La etiqueta <form> puede incluir diferentes campos que son enviados para ser procesados por el servidor web. HTML5 dispone de un gran número de campos como puedes ver en la siguiente tabla.
| Elemento | Descripción |
|---|---|
<form> | Define un formulario. |
<fieldset> | Permite organizar en grupos los campos de un formulario. |
<legend> | Representa el título de un <fieldset>. |
<label> | Representa el título de un elemento de control de un formulario. |
<input> | Se usa para crear controles interactivos que reciben datos del usuario. Ver atributos |
<button> | Representa un botón. |
<option> | Representa una opción en un elemento <select> o <datalist>. |
<select> | Representa un elemento de control que permite la selección entre un conjunto de opciones <option>. |
<optgroup> | Representa un conjunto de opciones, agrupadas lógicamente. |
<datalist> | Representa un elemento de control que permite la selección entre un conjunto de opciones <option>. |
<textarea> | Representa un elemento de control de edición de texto multilínea. |
<output> | Representa el resultado de un cálculo. |
Tipos de inputs
Algunos de los inputs más utilizados son los siguientes:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="email"><input type="file"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Atributos para la validación de campos en los formularios
La validación de los datos introducidos por los usuarios en los campos de los formularios es esencial para ofrecer al usuario información sobre los datos que se están solicitando. Gracias a los nuevos atributos que se introdujeron en HTML5 no es necesario utilizar Javascript ya que se validan de forma automática al pulsar en el botón de tipo submit. En la siguiente tabla se destacan los atributos más utilizados en los campos de los formularios.
| Atributo | Ejemplo |
|---|---|
| placeholder | placeholder=”Indica tu nombre” |
| required | required=”true” |
| pattern | pattern=”[a-z]{1,5}” |
| min | min=”1″ |
| max | max=”100″ |
| step | step=”2″ (saltos en un rango de números: 0, 2, 4…) |
| disabled | disabled=”true” |
| autofocus | autofocus=”true” |
| autocomplete | autocomplete=”true” |
