close

Introducción a Form HTML: estructura, tipos de entrada y ejemplos

HTML form es una parte crucial del desarrollo web que permite a los usuarios interactuar con un sitio web y enviar datos a un servidor. Form se utilizan para una amplia gama de propósitos, como recopilar la form información del usuario, procesar la entrada del usuario y habilitar las acciones del usuario en un sitio web. En este artículo, exploraremos los atributos y los diferentes tipos de campos de entrada, elementos seleccionados, áreas de texto y botones que se usan comúnmente en HTML form.

Campos de entrada

  • <input type="text">: crea un campo de entrada de texto donde los usuarios pueden ingresar caracteres alfanuméricos.
  • <input type="password">: muestra un campo de entrada de contraseña que oculta los caracteres introducidos.
  • <input type="email">: Proporciona validación de correo electrónico para campos de entrada que requieren una dirección de correo electrónico válida.
  • <input type="number">: restringe la entrada solo a valores numéricos.
  • <input type="checkbox">: representa una casilla de verificación que los usuarios pueden seleccionar o deseleccionar.
  • <input type="radio">: representa un botón de radio que permite a los usuarios seleccionar una opción de un grupo de opciones.
  • <input type="file">: permite a los usuarios seleccionar y cargar archivos.
  • <input type="submit">: Muestra un botón que envía el form cuando se hace clic.
  • <input type="reset">: muestra un botón que restablece el form estado inicial.
  • <input type="date">: Proporciona un selector de fechas para seleccionar fechas.
  • <input type="time">: permite a los usuarios ingresar valores de tiempo.

Seleccionar elementos

  • <select>: crea un menú desplegable con opciones seleccionables.
  • <option>: Define una opción dentro del menú desplegable, colocada dentro de la <select> etiqueta.
  • <optgroup>: Agrupa las opciones relacionadas dentro del menú desplegable.
  • <select multiple>: permite a los usuarios seleccionar múltiples opciones simultáneamente manteniendo presionada la tecla Ctrl(o la tecla Comando en Mac) mientras hace clic.

áreas de texto

<textarea>: crea un campo de entrada de texto de varias líneas donde los usuarios pueden ingresar y editar bloques de texto más largos. Se puede cambiar de tamaño y configurar con atributos como rows y cols para definir sus dimensiones.

Botones

<button>: representa un botón que puede desencadenar varias acciones dentro de un archivo form. Se puede usar para enviar un correo electrónico form, por form una función de JavaScript, o navegar a una página diferente.

Ejemplo de uso:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Este ejemplo muestra el uso de varios form elementos, incluidos input campos, textarea, y un botón. Siéntase libre de personalizar los elementos y atributos según sus requisitos específicos. checkbox select dropdown submit form