Elementos input dentro de un formulario HTML

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

1 2	<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

1 2	<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.

1 2	<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

1 2	<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

1 2	<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

1 2	<label for="wk">Ingresa la semana y el año</label> <input type="week" id="wk" name="wk" />

email

Permite escribir direcciones de correo, las cuales serán validadas al enviar el formulario.

1 2	<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.

1 2 3

<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

1 2	<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

1 2	<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.

1 2	<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

1 2	<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

1 2	<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

1 2	<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

1 2	<label for="nombre">Ingrese su nombre</label> <input type="text" id="nombre" name="nombre" />