En HTML podemos insertar formularios para recopilar información de los usuarios. Los formularios se insertan con la etiqueta form, y esta etiqueta puede tener atributos como action y method.
Un formulario nos permite crear cajitas de texto, botones, campos de correo, opciones de género, casillas de selección, listas desplegables, áreas de texto y botones para enviar la información.
Crear un formulario en HTML
La etiqueta principal para crear formularios es form.
Tiene dos atributos importantes:
actionmethod
En el atributo action tiene que ir a dónde va nuestro formulario, es decir, a dónde se va a guardar la información.
El método puede ser post o puede ser get, que son los básicos.
Un ejemplo sería:
<form action="guardar.html" method="post">
</form>
Este formulario todavía no tiene funcionalidad real. Solo va a servir para ver cómo se estructura un formulario en HTML.
Crear un archivo guardar.html
Para el ejemplo, podemos crear un nuevo archivo HTML que se llame:
guardar.html
Le generamos de igual manera el HTML básico y nada más va a tener el texto Gracias dentro de una etiqueta h2.
Por ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guardar</title>
</head>
<body>
<h2>Gracias</h2>
</body>
</html>
Este archivo va a funcionar como si se enviara el formulario, pero realmente no se va a guardar ningún dato todavía.
Usar la etiqueta label
Comenzamos con la etiqueta label.
Esta etiqueta nos va a servir para indicar de qué se trata la cajita de texto.
La etiqueta label tiene el atributo for.
Por ejemplo:
<label for="nombre">Nombre completo</label>
Aquí estamos indicando que este campo va a ser para el nombre completo.
Crear una cajita de texto con input
Ahora, en una etiqueta input, colocamos la cajita de texto donde va a ir el nombre.
El tipo se queda como text, y en name le ponemos nombre. El id también va a ser nombre.
<label for="nombre">Nombre completo</label>
<input type="text" name="nombre" id="nombre">
El atributo for del label se conecta con el id del input.
Esto sirve para que, cuando demos clic en la etiqueta label, el foco del formulario se active y aparezca el cursor parpadeando dentro de la cajita.
Para qué sirve el atributo name
Si no tuviera el atributo name, para el efecto de dar clic en el label y que se ponga el cursor parpadeando en la cajita no pasa nada.
Pero el atributo name sí tiene otro impacto importante.
El atributo name sirve para que el valor de ese campo pueda enviarse con el formulario.
Más adelante veremos esto mejor cuando usemos el método get.
Crear un botón para enviar
Vamos a crear un botón con el texto Enviar.
<button>Enviar</button>
Si damos clic en el botón, el formulario redirige hacia el otro HTML, que en este caso es guardar.html.
El formulario completo quedaría así:
<form action="guardar.html" method="post">
<label for="nombre">Nombre completo</label>
<input type="text" name="nombre" id="nombre">
<button>Enviar</button>
</form>
Hacer que un campo sea requerido
Ahora vamos a hacer que no se envíe el formulario hasta que escribamos algo en esa cajita de texto.
Para eso usamos el atributo required.
<label for="nombre">Nombre completo</label>
<input type="text" name="nombre" id="nombre" required>
Ahora, si damos clic en el botón sin escribir nada, el navegador nos dice que rellenemos ese campo.
El formulario no se va a mandar hasta que tenga algo escrito.
Crear un campo de correo electrónico
Vamos a colocar otra etiqueta label para un campo de correo.
Luego ponemos un input, pero ahora en lugar de tipo text, usamos tipo email.
<label for="correo">Correo</label>
<input type="email" name="correo" id="correo" required>
También le colocamos el atributo required.
Si ponemos letras al azar en el campo de correo, el navegador nos dice que debemos colocar un correo válido.
Ese correo válido debe llevar una arroba.
Si colocamos un correo válido, damos enviar y ahora sí nos redirige hacia el otro HTML.
Diferencia entre method post y get
Si cambiamos el método de post a get, vamos a observar un cambio importante.
<form action="guardar.html" method="get">
Cuando llenamos el formulario y le damos clic en enviar, observamos la URL.
El archivo guardar.html aparece con los datos enviados en la dirección.
Por ejemplo:
guardar.html?nombre=Daniel&correo=correo@ejemplo.com
Si el campo del nombre no tuviera el atributo name, ese valor no aparecería en la URL.
Esto se debe a que el atributo name es el que permite que el dato del input se envíe con el formulario.
Por eso, si se lo colocamos nuevamente y llenamos el formulario, el nombre se va a mostrar en la URL.
Volver a usar method post
Para un envío de formulario normalmente se usa post.
<form action="guardar.html" method="post">
Este tema es un poco más avanzado, pero por ahora podemos entender que get muestra los datos en la URL y post los envía de otra forma, sin mostrarlos directamente en la dirección.
Crear opciones de género con radio
Ahora vamos a colocar otra etiqueta label para el género.
Después vamos a colocar un label para el género masculino con su respectivo input.
El input va a ser de tipo radio.
<label>Género</label>
<label for="masculino">Masculino</label>
<input type="radio" name="genero" id="masculino" value="masculino">
Aquí usamos:
type="radio"name="genero"id="masculino"value="masculino"
El atributo value representa el valor que se va a enviar si esa opción está seleccionada.
En el navegador se visualiza como un circulito.
Agregar más opciones radio
Vamos a copiar y pegar el label y el input.
Ahora cambiamos masculino por femenino.
<label for="femenino">Femenino</label>
<input type="radio" name="genero" id="femenino" value="femenino">
Luego podemos añadir otro radio más, al cual le vamos a poner otros.
<label for="otros">Otros</label>
<input type="radio" name="genero" id="otros" value="otros">
Ya tenemos tres opciones:
Masculino.
Femenino.
Otros.
Podemos elegir una solamente.
Esto se debe a que el name es el mismo en los tres inputs de tipo radio.
Por qué los radio deben tener el mismo name
Si colocamos un name diferente a cada input de tipo radio, vamos a poder seleccionar los tres.
Pero esa no es la finalidad del input de tipo radio.
La finalidad del radio es poder elegir una sola opción dentro de un grupo.
Por eso los tres deben tener el mismo name.
<input type="radio" name="genero" id="masculino" value="masculino">
<input type="radio" name="genero" id="femenino" value="femenino">
<input type="radio" name="genero" id="otros" value="otros">
Crear checkboxes para aficiones
Ahora vamos a añadir otro salto de línea y otra etiqueta.
Vamos a crear un label para poder seleccionar los hobbies o las aficiones.
Luego ponemos una etiqueta label para la primera opción, que va a ser deportes.
<label>Aficiones</label>
<label for="deportes">Deportes</label>
<input type="checkbox" name="aficiones" id="deportes" value="deportes">
Ahora el input va a ser de tipo checkbox.
Tiene:
name="aficiones"id="deportes"value="deportes"
Agregar más checkboxes
Vamos a copiar y pegar el label y el input de tipo checkbox.
Ahora cambiamos el texto a música.
<label for="musica">Música</label>
<input type="checkbox" name="aficiones" id="musica" value="musica">
En el navegador ya no se ven como circulitos. Ahora se ven como cuadrados.
Y a pesar de que ambos tienen el mismo name, se pueden elegir los dos.
¿Por qué? Porque esa es la finalidad del input checkbox: poder elegir varias opciones de un listado.
Crear una lista desplegable con select
Vamos a ver una etiqueta más.
Ponemos un label para país y luego usamos la etiqueta select.
<label for="pais">País</label>
<select name="pais" id="pais">
</select>
Este select va a tener varias opciones que van dentro de la etiqueta option.
<option value="mexico">México</option>
<option value="colombia">Colombia</option>
<option value="argentina">Argentina</option>
El código completo sería:
<label for="pais">País</label>
<select name="pais" id="pais">
<option value="mexico">México</option>
<option value="colombia">Colombia</option>
<option value="argentina">Argentina</option>
</select>
Ya tenemos tres países y aparece una lista desplegable.
Este es el select: una lista desplegable.
Usar multiple en select
Al select le podemos colocar el atributo multiple.
<select name="pais" id="pais" multiple>
Con esto vamos a poder seleccionar varias opciones presionando la tecla Control.
Pero esta no es la finalidad principal del select, aunque se puede hacer.
Si quieres una lista desplegable normal, simplemente no uses el atributo multiple.
Crear un área de texto con textarea
Ahora vamos con una última etiqueta.
Voy a poner el label para comentarios.
Esta etiqueta es textarea, y sirve para crear un área de texto más grande.
<label for="comentarios">Comentarios</label>
<textarea name="comentarios" id="comentarios"></textarea>
Este es el área de texto.
Atributos cols y rows en textarea
A textarea le podemos colocar los atributos cols y rows.
cols sirve para indicar el ancho aproximado.rows sirve para indicar las filas.
Por ejemplo:
<textarea name="comentarios" id="comentarios" cols="30" rows="5"></textarea>
Si colocamos cols="10", se va reduciendo.
Si colocamos cols="50", se va haciendo más grande.
También podemos cambiar las filas con rows.
Por ejemplo, con rows="5" se ve de una manera más amplia.
Botón de tipo submit
Por último vamos con el botón.
Si le colocamos el tipo button, no va a enviar el formulario.
<button type="button">Enviar</button>
Para que envíe el formulario, el valor debe ser submit.
<button type="submit">Enviar</button>
Y claro, si no le ponemos ningún tipo al botón dentro de un formulario, por defecto va a ser de tipo submit, que es para envío de formularios.
Código completo del formulario
El formulario completo puede quedar así:
<form action="guardar.html" method="post">
<label for="nombre">Nombre completo</label>
<input type="text" name="nombre" id="nombre" required>
<br><br>
<label for="correo">Correo</label>
<input type="email" name="correo" id="correo" required>
<br><br>
<label>Género</label>
<br>
<label for="masculino">Masculino</label>
<input type="radio" name="genero" id="masculino" value="masculino">
<label for="femenino">Femenino</label>
<input type="radio" name="genero" id="femenino" value="femenino">
<label for="otros">Otros</label>
<input type="radio" name="genero" id="otros" value="otros">
<br><br>
<label>Aficiones</label>
<br>
<label for="deportes">Deportes</label>
<input type="checkbox" name="aficiones" id="deportes" value="deportes">
<label for="musica">Música</label>
<input type="checkbox" name="aficiones" id="musica" value="musica">
<br><br>
<label for="pais">País</label>
<select name="pais" id="pais">
<option value="mexico">México</option>
<option value="colombia">Colombia</option>
<option value="argentina">Argentina</option>
</select>
<br><br>
<label for="comentarios">Comentarios</label>
<textarea name="comentarios" id="comentarios" cols="30" rows="5"></textarea>
<br><br>
<button type="submit">Enviar</button>
</form>
Conclusión
Los formularios en HTML se crean con la etiqueta form.
Dentro del formulario podemos usar label para indicar de qué se trata cada campo, input para crear cajitas de texto, correo, radio o checkbox, select para listas desplegables, option para opciones dentro del select, textarea para áreas de texto grandes y button para enviar el formulario.
El atributo action indica a dónde se va a enviar el formulario.
El atributo method puede ser post o get.
El atributo required sirve para que un campo sea obligatorio.
El atributo name es importante porque permite enviar el valor del campo.
El atributo id permite conectar el input con su label usando for.
Con esto ya puedes crear un formulario básico en HTML y entender para qué sirve cada una de sus etiquetas principales.
