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
1 2 |
<label for="nombre">Nombre</label> <input type="text" id="nombre" name="nombre" /> |
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
12<input type="checkbox" name="transporte" value="Bici" /> Tengo bici<br /><input type="checkbox" name="transporte" value="Carro" />Tengo carro - radio
- Permite al usuario seleccionar una opción
12<input type="radio" name="transporte" value="Bici" /> Tengo bici<br /><input type="radio" name="transporte" value="Carro" />Tengo carro - 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.
12<label for="bday">Cumpleaños</label><input type="date" id="bday" name="bday" /> - 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
12<label for="mesanio">Ingresa el mes y año de tu cumpleaños</label><input type="month" id="mesanio" name="mesanio" /> - time
- Cuadro de texto para ingresar una hora. No es aceptado en todos los navegadores
12<label for="hr">Ingresa la hora</label><input type="time" id="hr" name="hr" /> - week
- Cuadro de texto para ingresar un número de semana y el año. No es aceptado en todos los navegadores
12<label for="wk">Ingresa la semana y el año</label><input type="week" id="wk" name="wk" /> - Permite escribir direcciones de correo, las cuales serán validadas al enviar el formulario.
12<label for="mail">Correo</label><input type="email" id="mail" name="mail" /> - file
- Permite al usuario elegir archivos de su sistema, como el tipico boton examinar.
123<input id="imagen" type="file" accept="image/gif" /><input accept="audio/*|video/*|image/*|<a href="http://www.iana.org/assignments/media-types/index.html">MIME_type</a>" /> - 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.
1<input type="hidden" name="country" value="Norway" /> - image
- Define una imagen con la función de un botón submit
1<input type="image" src="boton.jpg" alt="Enviar" /> - 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
12<label for="num">Ingresa un número entre 1 y 5</label><input type="number" id="num" name="num" min="1" max="5" /> - 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
12<label for="pto">Elija el puntaje</label><input type="range" name="pto" id="pto" min="1" max="15" /> - password
- Cuadro de texto para ingresar contraseñas, de modo que los carácteres se mostrarán enmascarados.
12<label for="pass">Ingresa tu contraseña</label><input type="password" id="pass" name="pass" /> - search
- Cuadro de texto para realizar búsquedas. Solo funciona en Chrome y Safari
12<label for="busq">Búsqueda en google</label><input type="search" id="busq" name="busq" /> - url
- Cuadro de texto para ingresar direcciones web. Aceptado unicamente en Firefox y Chrome
12<label for="web">Ingrese su página</label><input type="url" id="web" name="web" /> - tel
- Cuadro de texto para ingresar teléfonos. Ningún navegador lo reconoce, pero le servirá para hacer validaciones y formatos en el css
12<label for="phone">Ingrese tu teléfono</label><input type="tel" id="phone" name="phone" /> - text
- Cuadro de texto por default donde se puede ingresar cualquier valor
12<label for="nombre">Ingrese su nombre</label><input type="text" id="nombre" name="nombre" />
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.