Formularios en HTML

1. Introducción a los formularios

Los formularios en HTML son una herramienta importante para la interacción de los usuarios con las páginas web. Permiten recopilar información de los usuarios, ya sea texto, selección de listas, archivos u otros datos, que luego se pueden enviar al servidor para su procesamiento. En HTML, los formularios se crean utilizando múltiples elementos, cada uno destinado a un tipo específico de entrada de datos. El elemento principal de los formularios es <form>, que incluye otros elementos como <input>, <textarea>, <button>, <select> y más.

Elementos principales de los formularios

Los elementos de los formularios permiten crear campos de entrada, botones, menús desplegables y otros elementos de interfaz que los usuarios pueden usar para ingresar datos. Las etiquetas principales utilizadas en los formularios son:

• <form> — el contenedor principal para todos los elementos del formulario. Define a dónde y cómo se envían los datos.
• <input> — un elemento universal para crear campos de entrada de varios tipos (texto, contraseña, botones de radio, casillas de verificación, etc.).
• <label> — un elemento asociado con un campo de entrada, que describe su propósito.
• <textarea> — un campo para ingresar texto de varias líneas.
• <button> — botón para enviar el formulario o realizar otras acciones.
• <select> y <option> — lista desplegable donde el usuario puede seleccionar una o más opciones.

Ejemplo de un formulario simple

      
    <form action="/submit" method="post">
      <label for="name">Nombre:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">Correo electrónico:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">Enviar</button>
    </form>
    

          
<form action="/submit" method="post">
  <label for="name">Nombre:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Enviar</button>
</form>

• action en <form> define la URL a donde se enviarán los datos del formulario.
• method indica el método de envío de datos: post o get.

HTML <input>

La etiqueta <input> es uno de los elementos más versátiles en los formularios de HTML. Admite diferentes tipos de entrada, cada uno diseñado para un tipo específico de datos.

Sintaxis de la etiqueta <input>:

<input type="tipo" name="nombre_del_campo" id="identificador" value="valor">

<input type="tipo" name="nombre_del_campo" id="identificador" value="valor">

Atributos utilizados en <input>:

• type — tipo de entrada (por ejemplo, texto, contraseña, email, etc.).
• name — nombre del campo, mediante el cual el servidor identifica los datos.
• id — identificador único, utilizado para relacionar una etiqueta con el campo.
• value — valor predeterminado que aparece en el campo (por ejemplo, texto predeterminado en un campo de texto).

Tipos principales de <input>

• Campo de texto type="text" — para ingresar una pequeña cantidad de texto, como el nombre o el apellido.
  HTML

        
          <label for="username">Nombre de usuario:</label>
          <input type="text" id="username" name="username">
        
      

  HTML

        
          <label for="username">Nombre de usuario:</label>
          <input type="text" id="username" name="username">
        
      
• Contraseña type="password" — para ingresar una contraseña. Los caracteres ingresados se muestran como puntos o asteriscos.
  HTML

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

  HTML

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