Elementos de formulario de diferentes tipos

7.1 Campo de texto

HTML ofrece muchos tipos de entrada de datos para los elementos del formulario, que permiten a los usuarios ingresar datos en diferentes formatos como texto, correo electrónico, fechas y mucho más. Vamos a ver en detalle los diferentes tipos de entrada de datos y su uso.

El elemento <input type="text"> se utiliza para ingresar texto de una sola línea. Este es el tipo más básico y comúnmente utilizado.

Ejemplo de uso:

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

Atributos

• maxlength: limita el número máximo de caracteres
• placeholder: texto de marcador de posición que se muestra dentro del campo de entrada hasta que el usuario comience a escribir
• required: indica que el campo es obligatorio

Ejemplo con atributos:

    
      <label for="username">Nombre de usuario:</label>
      <input type="text" id="username" name="username" maxlength="20" placeholder="Introduce el nombre de usuario" required>
    
  

7.2 Campos para números

El elemento <input type="number"> se utiliza para ingresar valores numéricos. Permite limitar el ingreso solo a números y puede incluir flechas para aumentar o disminuir el valor.

Ejemplo de uso:

    
      <label for="quantity">Cantidad:</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
    
  

Atributos

• min: establece el valor mínimo permitido
• max: establece el valor máximo permitido
• step: define el paso de cambio de valor
• value: establece el valor inicial

7.3 Campos para correos electrónicos

El elemento <input type="email"> está diseñado para ingresar direcciones de correo electrónico. Verifica si el texto ingresado cumple con el formato de una dirección de correo electrónico.

Ejemplo de uso:

    
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="example@example.com">
    
  

Atributos

• multiple: permite ingresar múltiples direcciones de correo electrónico separadas por comas
• pattern: establece una expresión regular para una verificación adicional de los datos ingresados

Ejemplo con atributos:

    
      <label for="emails">Direcciones de Email (separadas por comas):</label>
      <input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
    
  

7.4 Campos para número de teléfono

El elemento <input type="tel"> se utiliza para ingresar números de teléfono. No verifica el formato del número, pero permite configurar una máscara de entrada a través del atributo pattern.

Ejemplo de uso:

    
      <label for="phone">Teléfono:</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
    
  

Atributos

pattern: establece una expresión regular para verificar el formato del número ingresado.

Ejemplo con atributos:

    
      <label for="phone">Teléfono:</label>
      <input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
    
  

7.5 Campos para fechas

El elemento <input type="date"> se utiliza para ingresar fechas. En navegadores compatibles aparece un widget de calendario para una selección fácil.

Ejemplo de uso:

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

Atributos

• min: establece la fecha mínima permitida
• max: establece la fecha máxima permitida

Ejemplo con atributos:

    
      <label for="appointment">Fecha de la cita:</label>
      <input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
    
  

7.6 Campos para ingresar tiempo

El elemento <input type="time"> se utiliza para ingresar la hora. En navegadores compatibles aparece un widget de selección de tiempo.

Ejemplo de uso:

    
      <label for="meeting_time">Hora de la reunión:</label>
      <input type="time" id="meeting_time" name="meeting_time">
    
  

Atributos

• min: establece la hora mínima permitida
• max: establece la hora máxima permitida
• step: define el paso de cambio de hora

Ejemplo con atributos:

    
      <label for="alarm">Alarma:</label>
      <input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
    
  

7.7 Campos para ingresar URL

El elemento <input type="url"> se utiliza para ingresar direcciones web (URL). Verifica si el texto ingresado cumple con el formato de una URL.

Ejemplo de uso:

    
      <label for="website">Sitio web:</label>
      <input type="url" id="website" name="website" placeholder="https://example.com">
    
  

Atributos

pattern: establece una expresión regular para una verificación adicional de los datos ingresados.

Ejemplo con atributos:

    
      <label for="personal_website">Sitio web personal:</label>
      <input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
    
  

7.8 Campos para ingresar contraseñas

El elemento <input type="password"> se utiliza para ingresar contraseñas. Los datos ingresados se ocultan, reemplazados por caracteres (por ejemplo, asteriscos o puntos).

Ejemplo de uso:

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

Atributos

• maxlength: limita el número máximo de caracteres
• placeholder: texto de marcador de posición
• required: indica que el campo es obligatorio

Ejemplo con atributos:

    
      <label for="new-password">Nueva contraseña:</label>
      <input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Introduce la contraseña" required>
    
  

7.9 Campos para rango de valores

El elemento <input type="range"> se utiliza para ingresar valores en un rango específico. Se muestra como un control deslizante.

Ejemplo de uso:

    
      <label for="volume">Volumen:</label>
      <input type="range" id="volume" name="volume">
    
  

Atributos

• min: establece el valor mínimo permitido
• max: establece el valor máximo permitido
• step: define el paso de cambio de valor
• value: establece el valor inicial

Ejemplo con atributos:

    
      <label for="brightness">Brillo:</label>
      <input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
    
  

7.10 Campos para elegir color

El elemento <input type="color"> se utiliza para elegir un color. En navegadores compatibles aparece un widget de selección de color.

Ejemplo de uso:

    
      <label for="favcolor">Elige tu color favorito:</label>
      <input type="color" id="favcolor" name="favcolor" value="#ff0000">
    
  

Atributos

• value: establece el color inicial.

7.11 Campos para búsqueda

El elemento <input type="search"> se utiliza para ingresar consultas de búsqueda. En la mayoría de los navegadores tiene estilos integrados y funcionalidad para borrar el texto ingresado.

Ejemplo de uso:

    
      <label for="search">Buscar:</label>
      <input type="search" id="search" name="search" placeholder="Introduce la consulta de búsqueda">