6 min de lectura

Ya vimos que existen varios tipos de etiquetas HTML. En específico, la tiqueta input dentro formularios HTML permite manejar distintos tipos de contenidos.

Atributos HTML para la etiqueta input

Antes de ver cada uno de los tipos de etiqueta input hablaremos de las propiedades que podemos setear en esta etiqueta

Atributo “id” para la etiqueta input

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

Atributo “required” para la etiqueta input

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.

Atributo “autocomplete” para la etiqueta input

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

Atributo “readonly” y “disabled” para la etiqueta input

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

Atributo “maxlenght” para la etiqueta input

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

Atributo “value” y “list” para la etiqueta input

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.

Atributo “placeholder” para la etiqueta input

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

Tipos de input para formularios HTML

Etiqueta input 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

Etiqueta input 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

Etiqueta input 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" />

Etiqueta input 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" />

Etiqueta input 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" />

Etiqueta input 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" />

Etiqueta input 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" />

Etiqueta input 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>" />

Etiqueta input 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" />

Etiqueta input image

Define una imagen con la función de un botón submit

1	<input type="image" src="boton.jpg" alt="Enviar" />

Etiqueta input 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" />

Etiqueta input 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" />

Etiqueta input 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" />

Etiqueta input 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" />

Etiqueta input 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" />

Etiqueta input 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" />

Etiqueta input 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" />

¿Te gustó este artículo?

Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.