Elemento input en HTML

El elemento html input se utiliza para crear elementos interactivos para formularios en páginas web que aceptan datos del usuario y luego los envían al servidor. Para tener una idea de cómo funcionan (y se ven) los diferentes tipos de elementos , intente modificar el valor de la propiedad type en el siguiente ejemplo en vivo, y verá la actualización de salida a medida que escribe.

Representará el valor primario (texto) campo de entrada de texto sin formato, pero se puede otros valores tales como la experiencia , number, color, checkbox, radio, date, file, month, password, range y time. Ejemplo de un campo de texto text simple típico:

< input  type = "text"  name = "name" >

Ejemplo de un formulario

con un campo de texto text y un botón de enviar submit:

< form  action = ""  method = "get" > 
  < label  for = "name" > name:  
  < input  id = "name"  type = "text"  name = "name" > 
  < input  type = "submit "  value = " enviar " >

Encontrarás varios ejemplos del uso del elemento en las páginas que explican cada uno de sus tipos.

Etiqueta html input

Clasificaciones de contenido	Un elemento organizativo, un elemento regular y un elemento relacionado con la forma.
Contenido permitido	No hay, es un elemento vacío.
Acrónimo	La etiqueta inicial debe estar presente y la etiqueta final debe omitirse.
Elementos del padre	Cualquier elemento que acepte contenido normal.
Interfaz DOMO	`HTMLInputElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Tipos de artículos html input

La forma en que funciona un elemento varía mucho según el valor de la propiedad type. Tenga en cuenta que los tipos de elementos se explicarán en sus propias páginas separadas y los enumeraremos aquí brevemente.

`button`

El botón que se puede presionar no tiene un comportamiento predeterminado.

< input  type = "button"  value = "haga clic aquí" >

`checkbox`

Una casilla de verificación que permite seleccionar o deseleccionar su valor.

< label for="checkbox"> casilla checkbox  
< input type="checkbox" name="checkbox" id="checkbox" >

`color`

Campo para elegir un color, este campo se agregó en HTML5.

< input  type = "color"  name = "color" >

`date`

Campo para seleccionar la fecha (año, mes, día, pero no la hora), este campo fue agregado en HTML5.

< input  type = "date"  name = "date" >

`datetime-local`

Un campo para seleccionar la fecha y la hora, pero no la zona horaria. Este campo se agregó en HTML5.

< input  type = "datetime-local"  name = "datetime" >

`email`

Un campo para ingresar una dirección de correo electrónico, y este campo se agregó en HTML5.

< input  type = "email"  name = "email" >

`file`

Un campo que permite al usuario elegir un archivo para cargar. Utilice la función accept para especificar los tipos de archivo que se pueden seleccionar.

< input  type = "file"  id = "file" >

`hidden`

Un campo oculto pero su valor se enviará al servidor.

< input  type = "hidden"  id = "hidden_prop"  name = "hidden_prop"  value = "a value" >

`image`

Botón presionable con una imagen. Debe usar la propiedad src para especificar la fuente de la imagen y la propiedad alt para especificar el texto alternativo, también puede usar las propiedades height y width para especificar las dimensiones de la imagen en píxeles.

< input  type = "image"  name = "image"  width = "30"  height = "30"  alt = "send"  src = "send.svg" >

`month`

Campo para ingresar mes y año, este campo fue agregado en HTML5.

< input  type = "month"  name = "month" >

`number`

Campo para ingresar un número, este campo se agregó en HTML5.

< input type = "number" name = "number" >

`password`

Un campo de texto de una sola línea cuyo valor de texto no se muestra al usuario. Utilice la propiedad maxlength para especificar la longitud máxima del valor que puede ingresar el usuario.

< input  type = "password"  nombre = "password" >

`radio`

Un botón de selección, que permite elegir un valor de un conjunto de opciones.

< label  for = "radio" > botón de radio  
< input  type = "radio"  name = "radio"  id = "radio" >

`range`

Un campo para especificar un valor entero dentro de un campo dado, este campo se agregó en HTML5.

< input  type = "range"  name = "range" >

`reset`

Un botón que restablece los campos de formulario a sus valores iniciales.

< input  type = "reset"  name = "reset" >

`search`

Un campo de texto de una línea para ingresar términos de búsqueda, las líneas nuevas se eliminarán automáticamente. Este campo se agregó en HTML5.

< input  type = "search"  name = "search" >

`submit`

Botón que envía el formulario.

< input  type = "submit"  value = "enviar" >

`tel`

Un campo para ingresar un número de teléfono, las nuevas líneas se eliminarán automáticamente de la entrada, pero no hay un formato establecido para los números de teléfono. Las propiedades como patterny se pueden usar maxlength para imponer restricciones a los valores ingresados en este campo. Este campo se agregó en HTML5.

< input  type = "tel"  name = "tel" >

`text`

Un campo de texto de una sola línea y las nuevas líneas se eliminarán automáticamente.

`time`

Campo para ingresar un valor para el tiempo sin zona horaria, este elemento fue agregado en HTML5.

< input  type = "time"  name = "time" >

`url`

Un campo para ingresar una URL. El valor de este campo debe ser una URL válida. Las propiedades como pattern y se pueden usar maxlength para establecer restricciones en los valores ingresados en este campo. Este campo se agregó en HTML5.

< input  type = "url"  name = "url" >

`week`

Un campo para ingresar una fecha que contiene el año y el número de semana.

< input  type = "week"  name = "week" >

`datetime`

Un campo para ingresar una fecha y hora (en horas, minutos, segundos y milisegundos) según la zona horaria UTC. Este tipo de campo se ha omitido de la especificación WHATWG.

Características y Propiedades generales del elemento

Esta sección contiene una lista de las propiedades disponibles para todos los tipos de campo. Las propiedades no globales y las propiedades globales de un elemento cuyo comportamiento varía según el tipo de campo se enumeran en la página de ese tipo. Tenga en cuenta que se pueden utilizar las propiedades globales disponibles para todos los elementos de este elemento.

`type`

Tipo de artículo , consulte la sección anterior de esta página para obtener más información sobre los valores disponibles y los enlaces a sus páginas.

`accept`

Si el valor de la propiedad type es file, esta propiedad indicará los tipos de archivo aceptados por el servidor y el navegador ignorará el resto. El valor de esta propiedad debe ser una lista separada por comas de especificadores de tipo de archivo. Consulte la página de campo file para obtener más detalles.

< input  type = "file"  name = "profile_pic"  accept = ".jpg, .jpeg, .png" >

`autocomplete`

Esta propiedad indica si el valor de un campo se puede completar automáticamente a través del navegador. Los posibles valores de esta propiedad son:

off: El usuario debe ingresar manualmente valores en cada campo a la vez, o la página proporciona un método para autocompletar entradas de forma aislada del navegador, es decir, el navegador no interfiere con el problema de autocompletar.
on: El navegador puede completar automáticamente los valores ingresados por el usuario en función de los valores ingresados por el usuario en tiempos anteriores.
email.
username.
new-password: una nueva contraseña (ejemplo: al crear una nueva cuenta o cambiar la contraseña).
current-password.
language: Idioma preferido, consulte la lista BCP 47 .
tel: El número de teléfono completo, incluido el código de marcación internacional.
- Otros sub valores : tel-country-code, tel-national, tel-area-code, tel-local, tel-local-prefix, tel-local-suffix y tel-extension.
url: La página de inicio u otra página web que enlaza con la empresa, persona, dirección u otra información de contacto que se encuentra en otros campos asociados con este campo.
photo: Una imagen o icono asociado con la empresa, persona, dirección u otra información de contacto que se encuentra en otros campos asociados con este campo.

Consulte el estándar WHATWG para obtener una lista completa de los valores permitidos y más información.

Si no se establece ningún valor de propiedad autocomplete en el elemento, el navegador usará la propiedad del autocomplete formulario al que pertenece ese elemento, que es el elemento padre de ese elemento o el elemento cuyo valor de propiedad hijo usamos id en una propiedad form de ese elemento.

En la mayoría de los navegadores modernos (incluidos Firefox 38+, Chrome 34+ e IE 11+), la configuración de la propiedad no autocomplete evitará que el administrador de contraseñas del navegador pregunta al usuario si desea almacenar información de inicio de sesión (nombre de usuario y contraseña).

Si el usuario lo permite la información de inicio de sesión se completará automáticamente la próxima vez que el usuario visite la página. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

`autofocus`

Esta propiedad booleana nos permite especificar que queremos que el foco se mueva a este elemento al cargar la página a menos que el usuario lo cambie (por ejemplo, escribiendo un elemento de entrada diferente).

Esta propiedad solo se puede usar en un elemento relacionado con el formulario en el documento. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< input  type = "text"  autofocus >

`capture`

Cuando el valor de la propiedad es type igual file, la presencia de esta propiedad booleana significa que es preferible capturar medios directamente a través del dispositivo del usuario utilizando el mecanismo de captura de medios.

`checked`

Cuando el valor de la propiedad type es igual radio o checkbox la presencia de esta propiedad booleana indica que el campo está seleccionado por defecto, de lo contrario esta propiedad quedará obsoleta.

< label  for = "checkbox" > casilla checkbox  
< input type= "checkbox"  name = "checkbox"  id = "checkbox"  checked >

`disabled`

Esta propiedad booleana indica que el usuario no puede interactuar con este elemento, y si no se especifica ningún valor para esta propiedad, heredará su valor del elemento que lo contiene como el elemento

, y si no hay ningún elemento que contenga este elemento que tenga la propiedad disabled, este elemento se activará.

< input  type = "texto"  inhabilitado >

`form`

Esta propiedad determina a qué forma pertenece el elemento y el valor de esta propiedad debe ser un identificador de id elemento en el propio documento.

Esta propiedad le permite vincular elementos a elementos en cualquier parte del documento, pero un elemento dentro de un elemento no se puede vincular a otro elemento .

Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< form  action = "action_page.php"  id = "form1" > 
  name: < input  type = "text"  name = "username" > 
 
< input  type = "submit"  form = "form1" >

`formaction`

El URI del programa que procesa la información enviada a través de este botón. Si se especifica un valor para esta propiedad, anulará el valor de la propiedad action del formulario al que pertenece este botón. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< form  action = "action_page.php" > 
  name: < input  type = "text"  name = "username" > 
  < input  type = "submit"  formaction = "action_page2.php" >

`formenctype`

Si este elemento es un botón de envío, esta propiedad especificará qué tipo de contenido se utilizará para enviar los datos del formulario al servidor. Los posibles valores son:

application/x-www-form-urlencoded: El valor predeterminado si no se especifica ningún valor para esta propiedad.
multipart/form-data: Use este valor si está usando el elemento en el formulario y establece la propiedad type en file.
text/plain.

Si se especifica un valor para esta propiedad, anulará el valor de la propiedad enctype del formulario al que pertenece este botón. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

`formmethod`

Si este elemento es un botón de envío, esta propiedad especificará qué método de envío HTTP debe usar el navegador para enviar el formulario. Los posibles valores son:

post: Envía datos de formulario dentro del cuerpo de una solicitud HTTP.
get: Asigne los datos del formulario al URI de destino, use el código? Para separar el nombre de la página de los datos y luego envíe el URI resultante al servidor. Utilice este método si su plantilla no tiene efectos secundarios y solo contiene caracteres ASCII.

Si se especifica esta propiedad, anulará el valor de la propiedad del method modelo al que pertenece este campo. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< form  action = "action_page.php"  method = "post" > 
  name: < input  type = "text"  name = "username" > 
  < input  type = "submit"  formmethod = "get" >

`formnovalidate`

Si este elemento es un botón de envío, esta propiedad booleana indica que el navegador no debe verificar los campos del formulario al enviar.

Si se especifica esta propiedad, anulará el valor de la propiedad del novalidate modelo al que pertenece este campo. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< form  action = "action_page.php" > 
  nombre: < input  type = "text"  name = "username" > 
  < input  type = "submit"  formnovalidate >

`formtarget`

Si este elemento es el botón de envío, esta propiedad indica la ubicación predeterminada para mostrar la salida cuando hace que los enlaces o elementos de formulario vayan a otra página.

Las siguientes palabras reservadas tienen significados especiales:

‎_self: Muestra el resultado de la ubicación de la página actual. Este es el valor predeterminado si no se especifica ningún otro valor.
_blank: Vea la página en una nueva ventana.
_parent: Page mostrará el lugar de la página padre a la que pertenece el iframe, y si no hubiera una página padre Vstzlk este valor es el comportamiento del valor de la _self misma.
‎_top: el ancho de la página es un lugar en la parte superior de una página en la jerarquía (es decir, la página que es la página principal directa o indirecta de la página actual y no tiene una página principal). Si no hubiera una página padre Vstzlk este valor es el comportamiento del valor de la _self misma.

Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

`height`

Si el valor de la propiedad type es image, esta propiedad establece la altura de la imagen que se muestra en el botón. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< input  type = "image"  name = "image"  width = "30"  height = "30"  alt = "send"  src = "send.svg" >

`inputmode`

Un consejo le dice al navegador qué tipo de teclado a la pantalla, esta propiedad se puede utilizar si el valor de la propiedad type es text, password, email o url. Los posibles valores son:

verbatim: Contenido textual no expresivo, como nombre de usuario y contraseña.
latin: Un teclado normal, que tiene funciones de escritura auxiliares, como la predicción de texto, y se utiliza para la comunicación humana con una computadora, como los campos de búsqueda.
latin-name: como valor latin, pero para los nombres de las personas.
latin-prose: como valor latin, pero con otras funciones de ayuda a la escritura, utilizado para la comunicación humana con humanos, como la mensajería instantánea o el correo electrónico.
numeric: Entrada numérica, que incluye los números desde 0 hasta 9, el punto decimal y el símbolo de signo negativo. El propósito de este tipo es ingresar códigos numéricos (como números de tarjetas de crédito) y, para números normales, usar el elemento con la propiedad establecida type en number.
tel: Ingrese los números de teléfono, incluidos el asterisco y el botón cuadrado, intente utilizar el elemento con la función configurada type en tel si es posible.
email: Introduzca direcciones de correo electrónico, intente utilizar el elemento con la propiedad establecida type en email si es posible.
url: Introduzca las URL, intente utilizar el elemento con la propiedad establecida type en url si es posible.

Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

`list`

Defina una lista predefinida de opciones para sugerir sus elementos al usuario, el valor de esta propiedad debe ser igual al valor de un identificador id para un elemento en el propio documento.

El navegador no mostrará solo buenas opciones para el tipo de entrada del usuario, ignorará esta propiedad si el valor de la propiedad es type igual a hidden, checkbox, radio, file o button.

Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< label > Elija su navegador de la lista:
 < input  type = "text"  list = "browsers"  name = "myBrowser" >  
< datalist  id = "browsers" > 
  < option  value = "Chrome" > 
  < option  value = "Firefox" > 
  < option  value = "Internet Explorer" >

`max`

Especifica el valor máximo (números o fecha y hora) para este elemento, que no puede ser menor que el valor mínimo (propiedad min). Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< input  type = "number"  max = "100" >

`maxlength`

Si el valor de la propiedad type en este elemento es igual a text, email, search, password, tel, url a continuación, esta propiedad establece el número máximo de caracteres que se pueden introducir por el usuario. Se tendrá en cuenta si se ha ajustado a otros tipos de campos. El valor de esta propiedad puede exceder el valor de la propiedad size.

Si no se especifica ningún valor para esta propiedad, el usuario puede ingresar un número infinito de caracteres, y especificar un número negativo activará el comportamiento predeterminado. Es decir, el usuario puede ingresar tantos caracteres como desee.

< input  type = "search"  maxlength = "8" >

`min`

Especifica el valor mínimo (números o fecha y hora) para este elemento, que no puede ser mayor que el valor máximo (propiedad max). Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< input  type = "number"  min = "0" >

`minlength`

Si el valor de una propiedad type en este elemento es igual a text, email, search, password, tel, url a continuación, esta propiedad especifica el número mínimo de caracteres que el usuario debe introducir, y se tendrá en cuenta si se ha ajustado a otros tipos de campos. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< input  type = "search"  minlength = "4" >

`multiple`

Este valor booleano indica si el usuario puede ingresar más de un valor, y esta propiedad entrará en vigencia si la propiedad se establece type en email o file, de lo contrario, se ignorará. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< input  type = "email"  multiple >

`name`

El nombre del campo, que se enviará junto con los datos del formulario al servidor.

`pattern`

Expresión regular, el valor del campo ingresado por el usuario debe cumplirse y el patrón debe coincidir con el valor completo, no con parte de él.

Utilice la propiedad title para explicar qué le hace el patrón al usuario. Esta propiedad tiene un efecto si el valor de la propiedad es type igual a text, search, tel, url, email o password de lo contrario, se ignorará.

La sintaxis para escribir expresiones regulares es el algoritmo RegExp usado en JavaScript, con la capacidad de usar un parámetro 'u'que tratará el patrón como una cadena de código Unicode. El patrón no está rodeado de barras /. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< input  type = "email"  pattern = ". + @ bigcode.es" >

`placeholder`

Hint ayuda al usuario a saber qué entrada escribir en el campo y el valor de esta propiedad no debe contener nuevas líneas.

Nota: No use la propiedad en placeholder lugar del elemento , su propósito es diferente. El elemento explica cuál es la función del campo (es decir, indica qué tipo de información se espera ingresar) mientras que la propiedad placeholder es una pista sobre el formato del contenido que se debe ingresar en el campo.

Tenga en cuenta que hay casos en los que la propiedad no se muestra placeholder al usuario, por lo que el formulario debe ser comprensible sin ella. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< input  type = "email"  pattern = ". + @bigcode.es"  placeholder = "[email protected]" >

`readonly`

Esta propiedad indica que el usuario no puede modificar el valor del campo y el valor de esta propiedad no tendrá importancia. Es decir, si desea leer y escribir en el campo, no agregue la propiedad readonly en absoluto.

Esta propiedad se ignorará si el valor de la propiedad es type igual al hidden, range, color, checkbox, radio, file, button, submit o reset. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< input  type = "text"  name = "username"  value = "test"  readonly >

`required`

Esta propiedad hace referencia a la necesidad de que el usuario complete este campo antes de enviar el formulario, y no puede usar esta propiedad si el valor de la propiedad es type igual a hidden, image, button, submit o reset. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

`size`

El tamaño inicial del campo, este valor en píxeles a menos que el valor de la propiedad type sea text o password luego este valor será el número de caracteres.

En HTML5 ahora es posible aplicar esta propiedad si el valor de la propiedad type es text, search, tel, url, email o password de lo contrario, se ignorará.

El valor de esta propiedad debe ser mayor que cero y, si no se especifica ningún valor para esta propiedad, el valor predeterminado es 20. La especificación HTML5 dice que «el navegador debe asegurarse de mostrar caracteres que no sean menores que el valor de esta propiedad».

Sin embargo, algunos caracteres tienen un ancho diferente en algunas fuentes y algunos navegadores no podrán hacer x que aparezca un carácter. en el campo incluso si el valor de esta propiedad está establecido en x.

< input  type = "email"  size = "30" >

`spellcheck`

Establecer este valor en true indica que el navegador debe comprobar si hay errores ortográficos y gramaticales. El valor default indica que el elemento heredará el valor spellcheck de propiedad del elemento padre o lo tomará del navegador.

El valor false significa que no debe verificar errores ortográficos y gramaticales en este elemento. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

`src`

Si el valor de la propiedad es type igual image, esta propiedad especifica un URI que apunta a la imagen que se mostrará en el botón; de lo contrario, se ignorará.

< input  type = "image"  name = "image"  width = "30"  height = "30"  alt = "send"  src = "send.svg" >

`step`

Esta propiedad se utiliza con las propiedades min y max para especificar el incremento de valores numéricos (o valores de fecha y hora). Esta propiedad puede tomar la cadena de texto anyo cualquier número decimal positivo.

Si esta propiedad no se establece en any, el campo aceptará cualquier valor que sea múltiplo del paso (el valor de esta propiedad) y mayor que el valor mínimo.

< input  type = "number"  placeholder = "múltiplos de 10"  paso = "10" >

`usemap`

El nombre de un elemento que se utilizará como mapa, pero esta propiedad se ha omitido en HTML5 y no se recomienda su uso.

`value`

El valor inicial del campo, esta propiedad es opcional a menos que el valor de la propiedad typesea igual a radio o checkbox.

< input  type = "checkbox"  name = "subscribe"  value = "newsletter" >

`width`

Si el valor de la propiedad type es image, esta propiedad especifica el ancho de la imagen que se muestra en el botón. Cabe señalar que esta función se agregó a HTML5 y no estaba presente antes.

< input  type = "image"  name = "image"  width = "30"  height = "30"  alt = "send"  src = "send.svg" >

Notas

Carga de archivos

Si se llama a la función click()‎en un elemento que input tiene el valor de una file propiedad, type se abrirá el selector de archivos, lo que permitirá al usuario elegir un archivo.

No puede establecer el valor de propiedad para el value selector de archivos, el siguiente código no tiene ningún efecto:

var  e  =  getElementById ( "FileInputElement" ); 
e . valor  =  "foo" ;

Cuando se selecciona un archivo en el campo de archivo , la ruta real del archivo no se guardará en la propiedad del value elemento por razones de seguridad, sino que el nombre del archivo se mostrará con la C:\fakepath\barra antes. Hay razones históricas detrás de esto, pero todos los navegadores modernos lo hacen y está en la especificación.

Localization

La localización permite que algunos tipos de elementos se basen en la configuración regional, en algunas configuraciones regionales el número 1,000.00 es entero, en otras se escribe como 1,000.00.

El navegador intentará inferir los siguientes métodos para determinar la localidad y asegurarse de que la entrada del usuario sea correcta:

Experimente el idioma especificado a través de la propiedad lang/xml:lang en el elemento o en uno de sus padres.
Pruebe el idioma especificado a través del encabezado HTTP denominado Content-Language.
De lo contrario, utilizará la configuración regional del navegador.