HTML: Formularios

Los formularios (o forms) en HTML son una parte fundamental para recolectar datos de los usuarios. Son utilizados en una variedad de aplicaciones web, desde simples formularios de contacto hasta complejas aplicaciones de comercio electrónico.

Estructura Básica de un formulario

Un formulario HTML se define utilizando la etiqueta <form>, y puede incluir varios tipos de elementos de entrada, como campos de texto, botones de radio, casillas de verificación, y botones de envío.

Esta compuesta por: action: Especifica la URL a la que se enviarán los datos del formulario cuando se envíen. method: Determina el método HTTP a utilizar al enviar los datos del formulario. Los valores comunes son GET y POST.

GET se utiliza para solicitudes idempotentes (que no cambian el estado del servidor), y los datos del formulario se envían en la URL.
POST se utiliza para solicitudes que pueden cambiar el estado del servidor, y los datos del formulario se envían en el cuerpo de la solicitud.

<form action="/submit-form" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <input type="submit" value="Enviar">
</form>

Tipos de entradas

Hay muchos tipos de entradas disponibles en HTML que permiten recolectar diferentes tipos de datos. Algunos de los más comunes son:

<input type="text">: Para entradas de texto de una sola línea.
<input type="password">: Para entradas de texto que deben ocultarse (como contraseñas).
<input type="email">: Para correos electrónicos, que también realiza una validación básica del formato del correo.
<input type="number">: Para números, con la opción de establecer valores mínimo y máximo.
<input type="date">: Para seleccionar fechas.
<input type="radio">: Para opciones de selección única dentro de un grupo.
<input type="checkbox">: Para opciones de selección múltiple.
<textarea>: Para entradas de texto de múltiples líneas.
<button>: Para botones que no necesariamente envían el formulario, dependiendo de su tipo (submit, reset, button).
<select>: Para listas desplegables.

Ejemplo mas completo

<form action="/submit-form" method="post">
  <label for="username">Nombre de usuario:</label>
  <input type="text" id="username" name="username" required><br><br>

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

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

  <label for="birthdate">Fecha de nacimiento:</label>
  <input type="date" id="birthdate" name="birthdate"><br><br>

  <label for="gender">Género:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Hombre</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Mujer</label><br><br>

  <label for="interests">Intereses:</label>
  <input type="checkbox" id="coding" name="interests" value="coding">
  <label for="coding">Programación</label>
  <input type="checkbox" id="music" name="interests" value="music">
  <label for="music">Música</label><br><br>

  <label for="country">País:</label>
  <select id="country" name="country">
    <option value="ar">Argentina</option>
    <option value="br">Brasil</option>
    <option value="cl">Chile</option>
    <option value="uy">Uruguay</option>
  </select><br><br>

  <label for="comments">Comentarios:</label><br>
  <textarea id="comments" name="comments"></textarea><br><br>

  <input type="submit" value="Enviar">
</form>