Formularios en HTML: Guía Completa para Principiantes y Expertos

Los formularios en HTML son fundamentales para recopilar información de los usuarios. Usan la etiqueta <form> para definir su estructura básica.

Estructura básica de un formulario

html 
<form>
<!-- Elementos de entrada aquí -->
</form>

Los formularios pueden incluir campos de texto, casillas de verificación, listas desplegables, botones de envío, entre otros.

Tipos comunes de campos de entrada

Campo de texto

Los campos de texto permiten al usuario escribir información simple.

html 
<form>
<input type="text" placeholder="Escribe aquí">
</form>

Campo de contraseña

Los campos de contraseña ocultan el texto que el usuario escribe, mostrándolo como asteriscos o puntos.

html 
<form>
<input type="password" placeholder="Contraseña">
</form>

Casilla de verificación (Checkbox)

Permite seleccionar una o varias opciones.

html 
<form>
<label>
  <input type="checkbox" name="suscripcion">
  Acepto recibir notificaciones
</label>
</form>

Botón de envío

Un botón de envío envía los datos del formulario al servidor.

html 
<form action="http://mi-servidor.com" method="POST">
<input type="text" name="nombre" placeholder="Tu nombre">
<input type="submit" value="Enviar">
</form>

Notas:

  1. El atributo action define la URL del servidor.
  2. Cada campo debe tener un atributo name para identificarlo en el servidor.

Etiqueta <label>

Relaciona el texto descriptivo con el campo de entrada, mejorando la accesibilidad.

html 
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
</form>

Botones de radio

Se utilizan para permitir al usuario seleccionar solo una opción de un grupo.

html 
<form>
<label>
  <input type="radio" name="genero" value="masculino">
  Masculino
</label>
<label>
  <input type="radio" name="genero" value="femenino">
  Femenino
</label>
<label>
  <input type="radio" name="genero" value="otro">
  Otro
</label>
<input type="submit" value="Enviar">
</form>
  Buenas prácticas

Detalles importantes:

  • Todos los botones de radio deben compartir el mismo atributo name.
  • Cada botón debe tener un atributo value único.

Área de texto

Se usa para entradas más largas, como comentarios o descripciones.

html 
<form>
<textarea name="comentario" rows="5" placeholder="Escribe aquí"></textarea>
</form>

Lista de selección (Dropdown)

Permite elegir una opción de una lista desplegable.

html 
<form>
<select name="pais">
  <option value="colombia">Colombia</option>
  <option value="mexico">México</option>
  <option value="argentina">Argentina</option>
</select>
</form>

Ejemplo completo

Un formulario con diferentes tipos de entradas:

html 
<form action="http://mi-servidor.com" method="POST">
<div>
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
</div>
<div>
  <label for="email">Correo:</label>
  <input type="email" id="email" name="correo" placeholder="Tu correo">
</div>
<div>
  <label>
    <input type="checkbox" name="suscripcion">
    Acepto recibir notificaciones
  </label>
</div>
<div>
  <label>Género:</label>
  <label><input type="radio" name="genero" value="masculino"> Masculino</label>
  <label><input type="radio" name="genero" value="femenino"> Femenino</label>
  <label><input type="radio" name="genero" value="otro"> Otro</label>
</div>
<div>
  <label for="comentarios">Comentarios:</label>
  <textarea id="comentarios" name="comentarios" rows="4"></textarea>
</div>
<div>
  <label for="pais">País:</label>
  <select id="pais" name="pais">
    <option value="colombia">Colombia</option>
    <option value="mexico">México</option>
    <option value="argentina">Argentina</option>
  </select>
</div>
<div>
  <input type="submit" value="Enviar">
</div>
</form>
  Buenas prácticas

  1. Accesibilidad: Usa etiquetas <label> siempre que sea posible.
  2. Validaciones: Agrega validaciones tanto del lado del cliente como del servidor.
  3. Seguridad: Asegúrate de usar métodos como POST para enviar datos sensibles.