Elemento input en HTML

por
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 <input>, 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 <form> con un campo de texto text y un botón de enviar submit:

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

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

Etiqueta html input

Clasificaciones de contenidoUn elemento organizativo, un elemento regular y un elemento relacionado con la forma.
Contenido permitidoNo hay, es un elemento vacío.
AcrónimoLa etiqueta inicial debe estar presente y la etiqueta final debe omitirse.
Elementos del padreCualquier elemento que acepte contenido normal.
Interfaz DOMOHTMLInputElement

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado

Tipos de artículos html input

La forma en que funciona un elemento <input> varía mucho según el valor de la propiedad type. Tenga en cuenta que los tipos de elementos <input> 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 </ label > 
< 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 </ label > 
< 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" >

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

Esta sección contiene una lista de las propiedades disponibles para todos los tipos <input> de campo. Las propiedades no globales y las propiedades globales de un elemento <input> 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 <input>, 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  <form> elemento padre de ese elemento o el elemento <form> 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 </ label > 
< 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 <fieldset>, 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 <input> y el valor de esta propiedad debe ser un identificador de id elemento  <form> en el propio documento.

Esta propiedad le permite vincular elementos  <input> a elementos  <form> en cualquier parte del documento, pero un elemento <input> dentro de un  <form> elemento no se puede vincular  a <form> 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" > 
</ form > 
< 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" > 
</ form >

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

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 > 
</ form >

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 <input> 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 <input> con la función configurada type en tel si es posible.
  • email: Introduzca direcciones de correo electrónico, intente utilizar el elemento <input>con la propiedad establecida type en email si es posible.
  • url: Introduzca las URL, intente utilizar el elemento <input> 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 <datalist> 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" > </ label > 
< datalist  id = "browsers" > 
  < option  value = "Chrome" > 
  < option  value = "Firefox" > 
  < option  value = "Internet Explorer" > 
  <option  value = "Opera" > 
  <option  value = "Safari" > 
  < option  value = "Microsoft Edge" > 
</ datalist >

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 <label>, su propósito es diferente. El elemento <label> 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 = "user@bigcode.es" >

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 <map> 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 <input> 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 <input> 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.