Páginas

TIPOS DE INPUTS

ETIQUETAS PARA TIPOS DE INPUT EN HTML

Usando el atributo type en la etiqueta <input> para especificar el tipo de entrada.

Formato del código:

  <input type="tipo_de_entrada" id="id_del_input" name="nombre_del_input" placeholder="texto_de_ayuda" />

Comencemos con ejemplos:

1. Campo de Texto (Text)

Permite al usuario ingresar texto de una sola línea.

  <input type="text" id="username" name="username" placeholder="Ingrese su nombre de usuario" />

EJEMPLO:

2. Campo de Contraseña (Password)

Permite al usuario ingresar una contraseña, ocultando los caracteres ingresados.

  <input type="password" id="password" name="password" placeholder="Ingrese su contraseña" />

EJEMPLO:

3. Campo de Correo Electrónico (Email)

Permite al usuario ingresar una dirección de correo electrónico con validación básica del formato.

  <input type="email" id="email" name="email" placeholder="Ingrese su correo electrónico" />

EJEMPLO:

4. Campo de Número (Number)

Permite al usuario ingresar un número. Puedes establecer valores mínimo y máximo.

  <input type="number" id="age" name="age" min="1" max="120" placeholder="Ingrese su edad" />

EJEMPLO:

5. Campo de Teléfono (Tel)

Permite al usuario ingresar un número de teléfono. La validación del formato depende del navegador.

  <input type="tel" id="phone" name="phone" placeholder="Ingrese su número de teléfono" />

EJEMPLO:

6. Campo de Fecha (Date)

Permite al usuario seleccionar una fecha desde un calendario emergente.

  <input type="date" id="birthdate" name="birthdate" />

EJEMPLO:

7. Campo de Hora (Time)

Permite al usuario seleccionar una hora.

  <input type="time" id="appointment" name="appointment" />

EJEMPLO:

8. Campo de Selección (Checkbox)

Permite al usuario seleccionar una o más opciones.

  <input type="checkbox" id="subscribe" name="subscribe" value="newsletter" />
  <label for="subscribe">Suscribirse al boletín</label>

EJEMPLO:

9. Campo de Radio

Permite al usuario seleccionar solo una opción de un grupo de opciones.

  <input type="radio" id="male" name="gender" value="male" />
  <label for="male">Masculino</label>
  <br>
  <input type="radio" id="female" name="gender" value="female" />
  <label for="female">Femenino</label>

EJEMPLO:


10. Campo de Archivo (File)

Permite al usuario seleccionar un archivo para cargar.

  <input type="file" id="profile-pic" name="profile-pic" />

EJEMPLO:

11. Campo de Color (Color)

Permite al usuario seleccionar un color usando un selector de color.

  <input type="color" id="favcolor" name="favcolor" value="#ff0000" />

EJEMPLO:

12. Campo de URL (URL)

Permite al usuario ingresar una URL con validación básica del formato.

  <input type="url" id="website" name="website" placeholder="Ingrese su sitio web" />

EJEMPLO:

13. Campo de Texto Multilínea (Textarea)

Permite al usuario ingresar texto en varias líneas. No es un <input>, pero se usa de manera similar en formularios.

  <textarea id="message" name="message" rows="4" cols="50" placeholder="Ingrese su mensaje"></textarea>

EJEMPLO:

Para una vista más completa y ejemplos adicionales, puedes visitar la documentación en línea sobre los tipos de <input> en HTML.

Labels: ,