Saltar al contenido principal

Creación de formularios HTML

Los formularios son una parte esencial de cualquier sitio web interactivo. Permiten a los usuarios enviar datos, ya sea para registrarse, iniciar sesión, realizar búsquedas, enviar comentarios y mucho más. En este artículo, aprenderemos cómo crear formularios en HTML de manera didáctica y con ejemplos prácticos.

Estructura Básica de un Formulario​

Un formulario en HTML se define usando la etiqueta <form>. Dentro de esta etiqueta, se incluyen diversos elementos de formulario como campos de texto, botones, cajas de verificación y más.

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Formulario Básico</title>
  </head>
  <body>
    <h1>Formulario de Registro</h1>
    <form action="procesar_registro.php" method="post">
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre" required />
      <br />
      <label for="email">Correo Electrónico:</label>
      <input type="email" id="email" name="email" required />
      <br />
      <label for="password">Contraseña:</label>
      <input type="password" id="password" name="password" required />
      <br />
      <button type="submit">Registrarse</button>
    </form>
  </body>
</html>

Explicación del Código​

Etiqueta <form>​

action : Define la URL a la que se enviarán los datos del formulario. method : Especifica el método HTTP para enviar los datos (GET o POST).

Etiqueta <label>​

Se utiliza para describir el propósito de un campo de formulario. El atributo for debe coincidir con el id del elemento del formulario asociado.

Campos de Entrada <input>​

type="text" : Campo de texto para la entrada de texto simple.

type="email" : Campo para la entrada de correo electrónico, que valida automáticamente el formato.

type="password" : Campo para la entrada de contraseñas, que oculta el texto introducido.

name : El nombre del campo que se envía al servidor.

required : Atributo que hace que el campo sea obligatorio.

Botón de Envío <button>​

type="submit" : Botón para enviar el formulario.

Elementos Comunes en Formularios​

Campos de Texto​

Campos para que los usuarios introduzcan texto.

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

Campos de Contraseña​

Campos para que los usuarios introduzcan contraseñas. El texto introducido se oculta.

HTML
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" />

Campos de Correo Electrónico​

Campos específicamente para direcciones de correo electrónico, con validación automática.

HTML
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" />

Campos de Número​

Campos que aceptan solo números.

HTML
<label for="edad">Edad:</label> <input type="number" id="edad" name="edad" />

Campos de Fecha​

Campos para seleccionar fechas.

HTML
<label for="fecha-nacimiento">Fecha de Nacimiento:</label>
<input type="date" id="fecha-nacimiento" name="fecha-nacimiento" />

Botones de Radio​

Permiten a los usuarios seleccionar una opción entre varias.


HTML
<label>Género:</label>
<input type="radio" id="masculino" name="genero" value="masculino" />
<label for="masculino">Masculino</label>
<input type="radio" id="femenino" name="genero" value="femenino" />
<label for="femenino">Femenino</label>

Casillas de Verificación​

Permiten a los usuarios seleccionar múltiples opciones.


HTML
<label>Intereses:</label>
<input type="checkbox" id="musica" name="intereses" value="musica" />
<label for="musica">Música</label>
<input type="checkbox" id="deportes" name="intereses" value="deportes" />
<label for="deportes">Deportes</label>
<input type="checkbox" id="lectura" name="intereses" value="lectura" />
<label for="lectura">Lectura</label>

Menús Desplegables​

Permiten a los usuarios seleccionar una opción de una lista desplegable.


HTML
<label for="pais">País:</label>
<select id="pais" name="pais">
  <option value="argentina">Argentina</option>
  <option value="brasil">Brasil</option>
  <option value="chile">Chile</option>
  <option value="mexico">México</option>
</select>

Conclusión​

Crear formularios con HTML es una habilidad fundamental para cualquier desarrollador web. Entender cómo utilizar las diversas etiquetas de formulario y cómo aplicar estilos con CSS puede ayudarte a crear interfaces de usuario efectivas y atractivas. Este artículo te proporciona una base sólida para comenzar a trabajar con formularios en tus proyectos web. ¡Sigue practicando y experimentando con diferentes elementos y estilos para dominar esta área crucial del desarrollo web!