5 min de lectura

Ya vimos que existen varios tipos de input, y antes de ver cada uno de ellos hablaremos de las propiedades que podemos setear.

Recordemos que es importante poner un label por cada input, y para esto nuestros input deberán tener un id que les identifique

Con HTML5 viene la opción de hacer las validaciones de formularios, de modo que cuando nosotros requerimos que un campo no quede vacio deberemos activar el atributo required al cual no se le asigna valor. Igualmente si queremos que alguno de los campos no sea validado, activaremos el atributo formnovalidate

Cuando llenas formularios te has dado cuenta que si el navegador lo permite tienes una lista de opciones para autocompletar, eso puede activarse o desactivarse para cada campo con la propiedad autocomplete

Los elementos pueden ser deshabilitados y también marcados como de solo lectura. Ambos evitan que el usuario pueda modificar el contenido, la diferencia reside en que los campos deshabilitados no pueden ser seleccionados, mientras que los de solo lectura si pueden ser seleccionados. Los atributos son readonly y disabled

maxlenght se utiliza para especificar la cantidad máxima de caracteres permitidos

Cuando se requiere que el campo ya tenga un valor por default se utiliza el atributo value, y HTML 5 introduce el atributo list para indicar opciones predefinidas para el input, aunque no es soportado en muchos navegadores.

Si se desea poner un valor por default, pero que este solo sea un ejemplo, de modo que se borre cuando el usuario haga focus en el campo, se utiliza el atributo placeholder

checkbox
Permite al usuario seleccionar uno o mas opciones
radio
Permite al usuario seleccionar una opción
date
Permite definir fechas, ya sea indicando la zona horaria o sin indicarla con datetime, y datetime-local. No es soportado en todos los navegadores.
month
Cuadro de texto para ingresar el mes y el año sin tomar en cuenta la zona horaria. No es aceptado en todos los navegadores
time
Cuadro de texto para ingresar una hora. No es aceptado en todos los navegadores
week
Cuadro de texto para ingresar un número de semana y el año. No es aceptado en todos los navegadores
email
Permite escribir direcciones de correo, las cuales serán validadas al enviar el formulario.
file
Permite al usuario elegir archivos de su sistema, como el tipico boton examinar.
hidden
Genera un campo no visible para el usuario. Generalmente se utiliza para guardar un valor por default o para guardar un valor generado con un script.
image
Define una imagen con la función de un botón submit
number
Cuadro de texto para ingresar números. Se pueden definir los números aceptados. Se utilizan los parámetros min, max y step. No es aceptado en todos los navegadores
range
Control para ingresar un número el cual su valor no debe ser exacto, como en una barra deslizante. Se utilizan los parámetros min, max y step. No es aceptado en todos los navegadores
password
Cuadro de texto para ingresar contraseñas, de modo que los carácteres se mostrarán enmascarados.
search
Cuadro de texto para realizar búsquedas. Solo funciona en Chrome y Safari
url
Cuadro de texto para ingresar direcciones web. Aceptado unicamente en Firefox y Chrome
tel
Cuadro de texto para ingresar teléfonos. Ningún navegador lo reconoce, pero le servirá para hacer validaciones y formatos en el css
text
Cuadro de texto por default donde se puede ingresar cualquier valor
Compartir
Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.

1 COMENTARIO

  1. ME SIRVIO DE MUCHA AYUDA TU ARTILO SOBRE ELEMENTOS DE INPUT, ME GUSTARIA PEDIRTE UNA AYUDA COMO OBTENGO EN UN INPUT LA FECHA ACTUAL DEL SISTEMA.

DEJA UNA RESPUESTA

Please enter your comment!
Please enter your name here