Los formularios son elementos muy importantes en HTML, te permiten recoger datos del usuario muy rápida y eficazmente.
Los formularios están compuestos por etiquetas, campos de todo tipo, entre los que se puede destacar; de texto, fecha, contraseña, botones, etc.
Tabla de contenidos
La etiqueta principal <form>
La etiqueta principal para implementar un formulario es <form> ... </form>
, la cual sirve para indicar al sistema que queremos empaquetar ese formulario para enviar.
Antes de ver la mayoría de los campos que se pueden insertar, vamos a ver una serie de atributos que se aplican a la etiqueta <form>
:
Atributo name
: Indica el nombre que queremos dar al formulario, con este atributo podemos hacer referencia al formulario para trabajar con él.
<form name='registro'>
...
</form>
action
: En este atributo se pone la URL del archivo que va a recibir el formulario y lo va a procesar.
<form action='registro.php' name='registro'>
...
<form>
method
: Nos habla del método en el que se enviará la información del formulario. Hay dos opciones; GET
y POST
.
GET
: Este método envía los datos a través de la URL. No es nada segura, ya que se pueden leer a simple vista. Los datos se verían así en la URL
/registro.php?nombre=Raül&apellido=Bocache
POST
: Este método es el que usarás siempre, ya que los datos no se ven. Además, no tiene limitaciones de tamaño como pasa conGET
.
<form action='registro.php' name='registro' method='POST'>
...
<form>
Atributo formencoded
: Normalmente no tiene que preocuparte por este atributo, ya que por defecto viene la opción correcto. Con este atributo indicamos el tipo de codificación de los datos a la hora de enviarlos.
application/x-www-form-urlencoded
: Está es la que viene por defecto y los caracteres se codifican antes de enviarse.multipart/form-data
: Los datos no se codifican, ya que se utiliza para enviar archivos.text/plain
: No se codifican los datos (los espacios se convierten en ‘+
‘
Como en cada momento viene por defecto el más adecuado no hace falta que te preocupes por esto, pero te los muestro para que lo conozcas.
Tipos de elementos de un formulario
Un formulario puede tener diferentes herramientas para permitir al usuario seleccionar o introducir información. HTML5 incluye múltiples elementos para ofrecer estas herramientas. Éstos son los más utilizados:
<input>
– Para crear campos de entrada, los cuales dependen del atributo type.<textarea>
– Campo de entrada para insertar múltiples líneas de texto. El tamaño del área se puede especificar con los atributosrows
ycols
.<select>
– Crea una lista de opciones para que el usuario pueda elegir una de ellas. En su interior tiene elementos<option>
, el cual son cada una de las opciones a escoger.<button>
– Este elemento crea un botón. En su atributotype
se especifica para que destinamos en botón;submit
, para enviar el formulario (por defecto),reset
, para reiniciar el formulario (borra los datos introducidos), ybutton
, para realizar tareas personalizadas.<output>
– Se utiliza para representar un resultado producido por el formulario, que se implementará a través de JavaScript para mostrar el resultado de una operación.<meter>
– Representara una medida o el valor actual de un rango.<progress>
– Representa el progreso de una operación.<datalist>
– Crea un listado de valores disponibles para otros controles. También trabaja con el elemento<option>
para definir cada uno de los valores.<label>
– Se utiliza para crear las etiquetas que identifican un elemento en el formulario. A través de del atributofor
se vincula con elid
del elemento al que pertenece dicha etiqueta.<fieldset>
– Agrupa otros elementos en el formulario. Se utiliza para agrupar secciones en formularios complejos. Con la etiqueta<legend>
se puede definir el título de la agrupación.
Elemento <input>
Este elemento es el más utilizado de todos, dependiendo del atributo type
que contenga, puede recibir uno u otro tipo de datos:
Atributo | Tipos de datos que recoge |
---|---|
text | Texto genérico. |
email | Acepta formato cuentas de correo. |
search | Para insertar términos de búsqueda. |
url | Acepta formato para insertar URL. |
tel | Formato de números de teléfono. |
number | Sólo acepta números. |
range | Sólo acepta un rango determinado de números. |
date | Formato de entrada tipo fecha. |
datetime-local | Campo de entrada para insertar fecha y hora. |
week | Acepta número de semana del año. |
month | Acepta número del mes. |
time | Campo para insertar una hora (horas y minutos). |
hidden | Oculta el campo de entrada (información complementaria). |
password | Para insertar una clave (oculta la información). |
color | Genera un campo para insertar un color. |
checkbox | Casilla de control (activar o desactivar opciones). |
radio | Seleccionar opción de varias posibles. |
file | Para seleccionar un archivo del ordenador. |
button | Genera un botón (La acción se genera por JavaScript). |
submit | Botón de enviar formulario. |
reset | Botón de reiniciar formulario. |
image | Carga una imagen. Un atributo src debe contener la dirección. |
<input>
¿Cómo inserto un formulario?
Para insertar un formulario en tu documento, primero tienes que declararlo con el elemento <form> ... </form>
.
Como atributos del formulario usarás el name
, method
y action
para indicar el nombre de tu formulario, el método que vas a utilizar de envío y la página que recibirá y procesará los datos (pero esto es harina de otro costal).
<form name='primerForm' method='POST' action='procesar.php'>
...
</form>
Ahora imagina que quieres hacer un formulario que incluya; nombre, primer apellido, teléfono y correo electrónico.
<form name='registro' method='POST' action='procesar.php'> <label for='nombre'>Nombre: </label> <p><input type='text' name='nombre' id='nombre' value=''></p> <label for='apellido'>Apellido: </label> <p><input type='text' name='apellido' id='apellido' value='' ></p> <lable for='telefono'>Teléfono: </label> <p><input type='tel' name='telefono' id='telefono' value='' ></p> <label for='correo'>Correo electrónico: </label> <p><input type='email' name='correo' id='correo' value='' ></p> <input type="submit" id="enviar" value="Enviar"> </form>
Al colocar los elementos <input>
dentro de los elementos <p> ... </p>
, hace que los campos estén uno encima de otro. Hay diferentes formas de implementar los campos en un formulario, pero ésta es la más apropiada para los lectores de pantalla, porque reconocen qué campo contiene qué.

El atributo id
en los formularios es muy importante. Además de identificar cada uno de los campos inequívocamente, se utiliza, como verás, para hacer dinámicos los campos a través de JavaScript.
El atributo value
de los <input>
, se utiliza para dar un valor por defecto a los campos. En este caso, es un valor vacío que el script de procesamiento cambiará por el valor que se introduzca.
Hay que destacar que los elementos <input>
son etiquetas de autocierre, es decir, la etiqueta de cierre </input>
no existe.
En próximas entradas profundizaré en todos los tipos de datos que se pueden procesar en un formulario.
Deja una respuesta