Elemento form en HTML

Elemento form en HTML

El elemento <form> en HTML sirve para crear formularios interactivos en una página web. Los formularios permiten a los usuarios enviar datos a un servidor, como información de contacto, comentarios o cualquier otro tipo de datos que se desee recopilar.

<form action="#https://caeher.com/login" method="POST">
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="Enviar">
</form>

Atributos importantes del elemento form

• action: aquí se define la ruta donde se enviarán los datos del formulario, puede ser una url absoluta o relativa.
• method: se especifica el metodo HTTP para enviar los datos, actualmente solo pueden ser (GET, que es el por defecto y sus datos se muestran en la URL) y (POST, los datos son ocultos).
• enctype: define en como se van a codificar los datos,
  1. application/x-www-form-urlencoded (predeterminado)
  2. multipart/form-data (para subir archivos)

Elementos comunes dentro del formulario

• <input>: Utilizado para crear campos de entrada de texto, números, fechas, etc. en un formulario. Puede tener diferentes tipos como text, email, password, number, date, etc.
• <textarea>: Utilizado para crear un área de texto grande para que los usuarios puedan escribir comentarios, descripciones, etc.
• <button>: Utilizado para crear un botón que puede ser utilizado para enviar el formulario o realizar otras acciones.
• <select>: Utilizado para crear un menú desplegable que permite a los usuarios seleccionar una opción de una lista.
• <option>: Utilizado dentro de <select> para definir cada opción disponible.
• <optgroup>: Utilizado dentro de <select> para agrupar opciones relacionadas.
• <fieldset>: Utilizado para agrupar elementos relacionados dentro de un formulario, como campos de entrada y etiquetas.
• <label>: Utilizado para asociar un texto con un elemento de formulario, como un campo de entrada o un botón de radio.
• <output>: Utilizado para mostrar el resultado de un cálculo o una acción, como el total de una compra.

Ejemplo de registro de usuarios

<form action="/registro" method="POST" enctype="multipart/form-data">
  <h2>Regístrate</h2>
  
  <label for="nombre">Nombre completo:</label>
  <input type="text" id="nombre" name="nombre" required>
  
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="clave">Contraseña (mínimo 8 caracteres):</label>
  <input type="password" id="clave" name="clave" minlength="8" required>
  
  <label for="foto">Foto de perfil:</label>
  <input type="file" id="foto" name="foto" accept="image/*">
  
  <label>
    <input type="checkbox" name="terminos" required>
    Acepto los términos y condiciones
  </label>
  
  <button type="submit">Registrarse</button>
</form>

Ejemplo de inicio de sesión

<form action="/login" method="POST">
  <h2>Iniciar sesión</h2>
  
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="clave">Contraseña:</label>
  <input type="password" id="clave" name="clave" required>
  
  <button type="submit">Iniciar sesión</button>
</form>