En HTML, un formulario es una sección del documento destinada a que el usuario introduzca datos que van a ser enviados a algún lado. En HTML un formulario puede contener cosas muy variadas: texto normal, elementos especiales llamados controles (checkboxs, radiobuttons, comboboxs, etc.), y otros elementos especiales denominados etiquetas (labels). Explicaremos el significado de estos elementos especiales y cómo generar formularios en HTML5.
Los usuarios normalmente «completan» un formulario modificando sus controles, ya sea introduciendo texto, seleccionando una opción entre varias, etc., antes de enviar el formulario y que éste sea procesado. Escribe el siguiente código en un editor y guárdalo como ejemplo.html para que puedas visualizarlo en tu navegador. No te preocupes ahora si no entiendes algunos de los elementos que aparecen, porque los iremos explicando poco a poco.
Las novedades de HTML5 en los formularios están en las etiquetas input las cuales incluyen nuevos atributos, así como nuevos valores para el atributo type.
Estos elementos no están disponibles todavía en todos los navegadores actuales. Esperemos que más pronto que tarde los vayan incorporando para poder utilizar HTML5 como lenguaje estándar de la web.
Dentro las nuevas etiquetas que nos podemos encontrar en los Formularios HTML5 podemos destacar la etiqueta datalist:
Esta nueva etiqueta está asociada a los input de tipo texto, email, tel y url, con ella podemos crear una lista, la cual veremos al poner el foco en el elemento input, para después poder elegir una opción. Su funcionamiento es parecido al de la etiqueta select.
Receta de cocción:
Ingredientes:
Sublime Text 3.
Nivel de dificultad:
-Bajo/Medio.
Tiempo de cocción.
-30 minutos
Comenzamos:
1ºPaso: en primer lugar abrimos sublime text 3, ponemos la etiqueta input en la cual introduciremos la lista. Esta etiqueta lleva un nuevo atributo: list=»nombre_lista»
|
1 2 |
list="nombre_lista" <input type="tel" name="telefono" list="mistelefonos"/> |
2.ºPaso: a continuación ponemos la etiqueta datalist la cual lleva el atributo id=»nombre_lista con el mismo valor dado en list. Dentro de esta etiqueta escribimos las etiquetas option, igual que haríamos en una lista select. El código completo es el siguiente:
|
1 2 3 4 5 6 |
<p><input type="tel" name="telefono" list="mistelefonos"/></p> <datalist id="mistelefonos"> <option value="648210025" label="Miguel Carbonell"> <option value="639400125" label="Juan Echeandia"> <option value="671200458" label="Pilar Martinez"> </datalist> |
En cada una de las opciones option incluimos el atributo value con el texto que se introducirá en el input. La etiqueta label indica un texto que veremos al desplegarse la lista, pero que no se introducirá al ser seleccionado el elemento.
Veamos ahora los nuevos atributos para input.
Placeholder
El atributo placeholder muestra un texto que aparece por defecto en las etiquetas input. La diferencia con el atributo value es que el texto desaparece cuando se selecciona el elemento, y además aparece en un color gris atenuado.
Nombre:
|
1 |
<input type="text" placeholder="Escribe tu nombre"> |
Autofocus
En las etiquetas input pone el cursor o foco en el elemento que lleva este atributo. Sólo puede haber uno por página, ya que si ponemos más de uno el foco se pondrá en el primero de ellos, ignorando el resto.
Al igual que el anterior funciona ya en todos los navegadores en sus últimas versiones.
Usuario:
|
1 |
<input type="text" autofocus /> |
Required
La presencia de este atributo indica que el campo en el que aparece es obligatorio. Si no está relleno nos indica un mensaje de que debemos rellenarlo para poder mandar el formulario.
Este atributo no requiere ningún valor. por ejemplo:
Si el campo no se ha rellenado al pulsar en enviar (botón «submit»), el formulario no se envía y nos recuerda con un mensaje que debemos rellenarlo.
Form
Con este atributo podemos poner un elemento del formulario fuera de su etiqueta.
Para ello la etiqueta <form> debe llevar el atributo id . El valor del atributo form será el mismo que el del id del formulario.
|
1 2 3 |
<form action="#" method="post" id="miform"> </form> <input type="text" form="miform" /> |
Aunque el input final está fuera del formulario, éste forma parte del mismo al llevar el atributo form.
Otros atributos
- Autocomplete : para completar un campo una vez escrita una parte del mismo.
- max y min : Marcan un máximo y un mínimo en los campos que indican un número, tal como veremos en los nuevos tipos de input.
Nuevos valores para el atributo type de la etiqueta input.
Los valores del atributo type del elemento input se amplían. Algunos de ellos, como los referentes a direcciones Web o emails, ya están disponibles en algunos navegadores; otros, como los referentes al tratamiento de fechas están teniendo una incorporación más tardía.
En los navegadores que no están disponibles estos campos, se muestran simplemente como un input type=»text». A continuación damos ejemplos de los nuevos tipos de input.
Al final de esta lista damos una tabla donde se indica en qué navegadores están disponibles los tipos de «input» que iremos viendo.
type = «email»
Para seleccionar un email:
Email:
|
1 |
<input type="email" /> |
type = «url»
Para seleccionar una dirección Web:
Web:
|
1 |
<input type="url" /> |
type = «tel»
Para seleccionar un número de teléfono:
Web:
|
1 |
<input type="tel" /> |
type = «search»
Para cajas de búsqueda:
Buscar:
|
1 |
<input type="search" /> |
type = «number»
Para elegir un número entre un máximo y un mínimo:
Dime un número del 1 al 10:
|
1 |
<input type="number" min="1" max="10" /> |
Los atributos min y max marcan el mínimo y el máximo del número que queremos que el usuario introduzca.
type = «range»
Elige también un número entre un máximo y un mínimo, pero mediante una barra de desplazamiento:
Velocidad: (de 1 a 50):
|
1 |
<input type="range" min="1" max="50" /> |
Los atributos min y max marcan el mínimo y el máximo del número que utilizamos para medir lo que controlamos mediante este elemento.
type = «color»
Para seleccionar un color:
Color:
|
1 |
<input type="color" /> |
type = «date»
Para seleccionar un día en el calendario:
Día:
|
1 |
<input type="date" /> |
type = «month»
Para seleccionar un mes en el calendario:
Mes:
|
1 |
<input type="month" /> |
type = «week»
Para seleccionar una semana:
Semana:
|
1 |
<input type="week" /> |
type = «time»
Para seleccionar una hora:
Hora:
|
1 |
<input type="time" /> |
type = «datetime»
Para seleccionar una fecha en hora internacional, con hora y minuto:
Fecha internacional:
|
1 |
<input type="datetime" /> |
type = «datetime-local»
Para seleccionar una fecha en hora local, con hora y minuto:
Fecha local:
|
1 |
<input type="datetime-local" /> |
La siguiente tabla muestra los navegadores en los que están disponibles los tipos anteriores:
| Tipos | Firefox | Chrome | I.E. 10 | Safari | Opera |
| si | si | si | no | si | |
| tel | no | no | no | no | no |
| url | si | si | si | no | si |
| search | no | no | no | no | no |
| number | si | si | si | no | si |
| range | si | si | si | si | si |
| color | si | si | no | no | si |
| date | no | si | no | si | si |
| month | no | si | no | si | si |
| week | no | si | no | si | si |
| time | no | si | no | si | si |
| datatime | no | no | no | si | no |
| datatime-local | no | si | no | si | si |
Enlaces de preferencia.
Tutorial HTML5: Formularios en HTML5
