Tipos de INPUT en HTML

HTML

El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario.Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que dependen del dispositivo y el agente de usuario (user agent).El elemento <input> es uno de los más potentes y complejos en todo HTML debido a la gran cantidad de combinaciones de tipos y atributos de entrada.

Listado de tipos de input

A continuación está la lista de todos los tipos de input en HTML.

Input type text

Probablemente este sea el campo más utilizado en los formularios HTML que realizamos habitualmente.

Es un input para insertar una línea de texto. Los saltos de línea son eliminados automáticamente del valor introducido.

<input type="text">

Input type number

Destinado a insertar valores valores numéricos.

<input type="number">

Input type password

Es un campo para insertar una contraseña. Al insertar un valor, este es ocultado automáticamente.

<input type="password">

Input type submit

Es un input que envía el formulario. Por defecto, se representa como un botón.

<input type="submit">

Input type reset

Campo que restaura el valor de los campos del formulario. Por defecto, se representa como un botón.

<input type="reset">

Input type radio

Botón radio. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Se usa el atributo checked para indicar si el elemento está seleccionado de forma predeterminada. Los botones radio que tengan el mismo valor para su atributo name están dentro del mismo «grupo de botones radio». Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.

<input type="radio">

Input type checkbox

Casilla de selección. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Se usa el atributo checked para indicar si el elemento está seleccionado. También se puede usar el atributo indeterminate (el cual solo se puede establecer programaticamente) para indicar que la casilla está en un estado indeterminado (en la mayoría de las plataformas, se dibuja una línea horizontal a través de la casilla).

<input type="checkbox">

Input type button

Botón sin un comportamiento específico.

<input type="button" value="Ejecutar">

Input type color

Control para espicificar un color. Una interfaz de selección de color no requiere más funcionalidad que la de aceptar colores simples como texto.

<input type="color">

Input type date

Input para introducir una fecha (año, mes y día, sin tiempo).

<input type="date">

Input type datetime-local

Campo para introducir fecha y hora, sin zona horaria específica.

<input type="datetime-local">

Input type email

Control para introducir una dirección de correo electrónico. El valor introducido se valida para que contenga una cadena vacía o una dirección de correo válida antes de enviarse.

<input type="email">

Input type file

Campo que permite al usuario seleccionar un archivo. Se puede usar el atributo accept para definir los tipos de archivo que el control podrá seleccionar.

<input type="file">

Input type hidden

Input que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.

<input type="hidden">

Input type month

Control para introducir un mes y año, sin zona horaria específica.

<input type="month">

Input type range

Input para inserter un valor que se elige en un elemento deslizante.

<input type="range" min="0" max="10">

Input type search

Cuadro de texto de línea simple para introducir textos de búsqueda. Los saltos de línea son eliminados automáticamente del valor introducido.

<input type="search">

Input type tel

Control para introducir un número telefónico. Los saltos de línea son eliminados automáticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar atributos como pattern y maxlength para restringir los valores introducidos en este control.

<input type="tel">

Input type time

Input para introducir un valor de tiempo sin zona horaria específica.

<input type="time">

Input type url

Campo para editar una URL. El valor introducido se valida para que contenga una cadena vacía o una ruta URL absoluta antes de enviarse. Los saltos de línea y espacios en blanco al principio o al final del valor son eliminados automáticamente.

<input type="url">

Input type week

Control para introducir una fecha que consiste en número de semana del año y número de semana sin zona horaria específica.

<input type="week">

Escribe una respuesta