49-formularios en HTML

---

Elementos Semánticos en HTML

• Que es un formulario?
• Elemento de la forma
• Elemento de Input
• Campos de texto
• El elemento de la etiqueta
• Botones de radio
• Cajas de control
• El botón enviar
• El Atributo Nombre para el Input

---

¿Qué es un Formulario?

Un formulario es una sección de un documento web que permite a los usuarios enviar datos a un servidor. Se utilizan comúnmente para recopilar información de usuarios, como nombre, correo electrónico, contraseñas, entre otros. Los formularios son fundamentales en aplicaciones web interactivas y se utilizan en situaciones como registros de usuario, búsquedas, encuestas, y transacciones en línea.

Los formularios están compuestos por diferentes elementos, como campos de texto, botones de radio, casillas de verificación y botones de envío. Estos elementos permiten a los usuarios ingresar y seleccionar información de manera estructurada. Al enviar un formulario, los datos ingresados son procesados por el servidor, donde pueden ser almacenados o utilizados para realizar acciones específicas.

Ejemplo de Formulario

Nombre:

Correo Electrónico:

Mensaje:

  <form action="#" method="post">
    <div class="mb-3">
      <label for="nombre" class="form-label">Nombre:</label>
      <input type="text" class="form-control" id="nombre" name="nombre" required>
    </div>
    <div class="mb-3">
      <label for="email" class="form-label">Correo Electrónico:</label>
      <input type="email" class="form-control" id="email" name="email" required>
    </div>
    <div class="mb-3">
      <label for="mensaje" class="form-label">Mensaje:</label>
      <textarea class="form-control" id="mensaje" name="mensaje" rows="4" required></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </form>
            

---

...

Elemento de la Forma

El elemento <form> en HTML es un contenedor que agrupa elementos de formulario, como campos de texto, botones y casillas de verificación, permitiendo a los usuarios enviar información al servidor. Este elemento es fundamental para interactuar con aplicaciones web, ya que captura y envía datos ingresados por los usuarios.

El atributo action del elemento <form> especifica la URL a la que se enviarán los datos cuando se envíe el formulario. El atributo method define cómo se enviarán los datos: usando el método GET (para solicitudes que no modifican datos) o POST (para enviar datos sensibles o que cambian el estado en el servidor).

Este elemento se utiliza en diversas aplicaciones web, incluyendo registros de usuario, encuestas, pedidos en línea y más. Sin el elemento <form>, no sería posible recopilar y enviar información de manera efectiva.

Ejemplo de Elemento Form

Nombre:

Correo Electrónico:

---

  <form action="https://example.com/submit" method="post">
    <div class="mb-3">
      <label for="nombre" class="form-label">Nombre:</label>
      <input type="text" class="form-control" id="nombre" name="nombre" required>
    </div>
    <div class="mb-3">
      <label for="email" class="form-label">Correo Electrónico:</label>
      <input type="email" class="form-control" id="email" name="email" required>
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </form>
          

---

Elemento de Input

El elemento <input> es uno de los componentes más utilizados dentro de un formulario HTML. Este elemento permite a los usuarios ingresar datos en una variedad de formatos, como texto, números, correos electrónicos, contraseñas, fechas, entre otros. La flexibilidad del elemento <input> se debe a su atributo type, que especifica el tipo de dato que se espera recibir.

Algunos de los tipos más comunes son:

• type="text": Campo de texto de una sola línea.
• type="email": Campo para ingresar direcciones de correo electrónico.
• type="password": Campo para contraseñas que oculta la entrada.
• type="checkbox": Casilla de verificación para opciones múltiples.
• type="radio": Botones de opción que permiten seleccionar solo una opción de un grupo.
• type="submit": Botón para enviar el formulario.

El elemento <input> se utiliza en diversas aplicaciones web para capturar información del usuario, desde registros y encuestas hasta compras en línea. Es fundamental para la interactividad y funcionalidad de los formularios.

Ejemplo de Elemento Input

Usuario:

Correo Electrónico:

Contraseña:

Acepto los términos y condiciones

---

  <form action="https://example.com/submit" method="post">
    <div class="mb-3">
      <label for="usuario" class="form-label">Usuario:</label>
      <input type="text" class="form-control" id="usuario" name="usuario" required>
    </div>
    <div class="mb-3">
      <label for="correo" class="form-label">Correo Electrónico:</label>
      <input type="email" class="form-control" id="correo" name="correo" required>
    </div>
    <div class="mb-3">
      <label for="contrasena" class="form-label">Contraseña:</label>
      <input type="password" class="form-control" id="contrasena" name="contrasena" required>
    </div>
    <div class="mb-3">
      <label for="checkbox" class="form-check-label">
        <input type="checkbox" class="form-check-input" id="checkbox" name="checkbox"> Acepto los términos y condiciones
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </form>
          

---

Campos de Texto

Los campos de texto son un tipo de elemento de formulario HTML que permite a los usuarios ingresar datos en una línea. Se implementan utilizando el elemento <input> con el atributo type="text". Estos campos son fundamentales para la recolección de información, como nombres, direcciones o cualquier otro dato textual.

Un campo de texto se puede personalizar con varios atributos, tales como:

• placeholder: Muestra un texto de ejemplo dentro del campo que desaparece al escribir.
• maxlength: Define el número máximo de caracteres que se pueden ingresar.
• required: Hace que el campo sea obligatorio antes de enviar el formulario.
• value: Establece un valor predeterminado que aparece en el campo.

Estos campos son ampliamente utilizados en formularios de registro, encuestas, y en cualquier lugar donde se necesite obtener información textual del usuario.

Ejemplo de Campos de Texto

Nombre:

Apellido:

---

  <form action="https://example.com/submit" method="post">
    <div class="mb-3">
      <label for="nombre" class="form-label">Nombre:</label>
      <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ingresa tu nombre" required>
    </div>
    <div class="mb-3">
      <label for="apellido" class="form-label">Apellido:</label>
      <input type="text" class="form-control" id="apellido" name="apellido" placeholder="Ingresa tu apellido" maxlength="50">
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </form>
          

---

El Elemento de la Etiqueta

El elemento de etiqueta en HTML, representado por la etiqueta <label>, es fundamental para asociar una descripción con un campo de entrada en un formulario. Su propósito principal es mejorar la accesibilidad y la usabilidad al permitir que los usuarios comprendan mejor qué información se espera que ingresen.

Al hacer clic en la etiqueta asociada, el campo de entrada correspondiente se activa automáticamente. Esto es especialmente útil en formularios con múltiples campos, ya que mejora la experiencia del usuario. Para asociar una etiqueta con un campo de entrada, se utiliza el atributo for, que debe coincidir con el id del campo de entrada.

Un uso adecuado del elemento <label> no solo facilita la navegación para los usuarios de mouse, sino que también ayuda a quienes utilizan tecnologías de asistencia, como lectores de pantalla.

Ejemplo del Elemento de Etiqueta

Nombre:

Correo Electrónico:

---

  <form action="https://example.com/submit" method="post">
    <div class="mb-3">
      <label for="nombre" class="form-label">Nombre:</label>
      <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ingresa tu nombre" required>
    </div>
    <div class="mb-3">
      <label for="correo" class="form-label">Correo Electrónico:</label>
      <input type="email" class="form-control" id="correo" name="correo" placeholder="Ingresa tu correo" required>
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </form>
          

---

Botones de Radio

Los botones de radio en HTML son un tipo de entrada que permite a los usuarios seleccionar una sola opción de un conjunto de opciones predefinidas. Se implementan utilizando el elemento <input type="radio">. Una característica importante de los botones de radio es que están agrupados por su atributo name. Todos los botones de radio que comparten el mismo valor en el atributo name pertenecen al mismo grupo, y el usuario solo podrá seleccionar una opción dentro de ese grupo.

Los botones de radio se utilizan comúnmente en formularios cuando es necesario que el usuario elija una opción entre varias, como seleccionar un método de pago, un género o una categoría.

Atributos clave de los botones de radio:

• name: Agrupa los botones de radio para que solo uno pueda seleccionarse a la vez dentro de ese grupo.
• value: Define el valor que se enviará cuando se seleccione ese botón de radio.
• checked: Establece qué botón de radio está seleccionado por defecto.

Ejemplo de Botones de Radio

Selecciona tu género:

Masculino

Femenino

Otro

  <form action="https://example.com/submit" method="post">
    <div class="mb-3">
      <label for="genero" class="form-label">Selecciona tu género:</label>
      <div>
        <input type="radio" id="masculino" name="genero" value="masculino" checked>
        <label for="masculino">Masculino</label>
      </div>
      <div>
        <input type="radio" id="femenino" name="genero" value="femenino">
        <label for="femenino">Femenino</label>
      </div>
      <div>
        <input type="radio" id="otro" name="genero" value="otro">
        <label for="otro">Otro</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </form>
          

---

Cajas de Control (Checkboxes)

Las cajas de control o "checkboxes" en HTML son elementos de entrada que permiten al usuario seleccionar múltiples opciones de una lista. Se crean utilizando el elemento <input type="checkbox">. A diferencia de los botones de radio, donde solo se puede seleccionar una opción de un grupo, las cajas de control permiten seleccionar varias opciones simultáneamente.

Cada checkbox funciona de manera independiente y puede tener su propio valor asignado a través del atributo value. Si se selecciona una caja de control, su valor se envía al servidor cuando se envía el formulario.

Los atributos clave que se usan con las cajas de control incluyen:

• name: El nombre del grupo de opciones, utilizado para identificar el conjunto de valores seleccionados en el servidor.
• value: El valor que se enviará si la caja de control está seleccionada.
• checked: Atributo que indica si la caja de control debe estar seleccionada de forma predeterminada.

Ejemplo de Cajas de Control

Selecciona tus intereses:

Música

Deportes

Lectura

Viajes

---

  <form action="https://example.com/submit" method="post">
    <div class="mb-3">
      <label for="intereses" class="form-label">Selecciona tus intereses:</label>
      <div>
        <input type="checkbox" id="musica" name="intereses" value="musica">
        <label for="musica">Música</label>
      </div>
      <div>
        <input type="checkbox" id="deportes" name="intereses" value="deportes">
        <label for="deportes">Deportes</label>
      </div>
      <div>
        <input type="checkbox" id="lectura" name="intereses" value="lectura">
        <label for="lectura">Lectura</label>
      </div>
      <div>
        <input type="checkbox" id="viajes" name="intereses" value="viajes" checked>
        <label for="viajes">Viajes</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </form>
          

---

El Botón Enviar

El botón "Enviar" en HTML es el mecanismo que permite enviar los datos de un formulario al servidor para su procesamiento. Se implementa utilizando el elemento <input type="submit"> o el elemento <button type="submit">. Cuando el usuario hace clic en el botón, se activan las acciones especificadas en los atributos action y method del formulario.

El botón de envío es esencial en cualquier formulario, ya que sin él, los datos ingresados por el usuario no pueden ser enviados al servidor. El botón puede personalizarse con texto, íconos o estilos de acuerdo con los requisitos de diseño.

Atributos clave del botón enviar:

• type="submit": Indica que el botón se utilizará para enviar los datos del formulario.
• value: Define el texto que aparecerá en el botón cuando se utiliza el elemento <input>.
• formaction: Permite sobrescribir el atributo action del formulario, enviando los datos a una URL diferente.

Ejemplo de Botón Enviar

Nombre:

---

  <form action="https://example.com/submit" method="post">
    <div class="mb-3">
      <label for="nombre" class="form-label">Nombre:</label>
      <input type="text" id="nombre" name="nombre" class="form-control">
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </form>
          

---

El Atributo Nombre para el Input

El atributo name en los elementos <input> es uno de los más importantes cuando se trabaja con formularios HTML. Este atributo define el nombre de la clave que se enviará junto con el valor del campo cuando el formulario sea enviado. Sin el atributo name, los datos de ese campo no se incluirán en el envío del formulario.

El atributo name es crucial para que el servidor pueda procesar correctamente los datos ingresados por el usuario. Cada campo de un formulario debe tener un atributo name único o, en algunos casos como con los botones de radio, el mismo nombre para agrupar las opciones.

Ejemplo de uso:

• <input type="text" name="usuario">: El valor ingresado en este campo será enviado al servidor con la clave usuario.
• <input type="checkbox" name="intereses[]">: En este caso, el atributo name con corchetes ([]) permite enviar múltiples valores para la misma clave, útil cuando se seleccionan varias opciones.

Ejemplo del Atributo Nombre

Nombre de usuario:

Correo electrónico:

Género: Masculino Femenino Otro

---

  <form action="https://example.com/submit" method="post">
    <div class="mb-3">
      <label for="usuario" class="form-label">Nombre de usuario:</label>
      <input type="text" id="usuario" name="usuario" class="form-control">
    </div>
    <div class="mb-3">
      <label for="email" class="form-label">Correo electrónico:</label>
      <input type="email" id="email" name="email" class="form-control">
    </div>
    <div class="mb-3">
      <label for="genero" class="form-label">Género:</label>
      <select id="genero" name="genero" class="form-select">
        <option value="masculino">Masculino</option>
        <option value="femenino">Femenino</option>
        <option value="otro">Otro</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
  </form>
          

---

Ir al índice

---

---