Etiqueta <input> de HTML

Definición y uso

<input> La etiqueta define un campo de entrada donde el usuario puede ingresar datos.

<input> El elemento es el elemento más importante del formulario.

<input> El elemento se puede mostrar de varias maneras, dependiendo de Atributo type.

Aquí hay diferentes tipos de entrada:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(valor predeterminado)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Ver Atributo type¡Para ver un ejemplo de cada tipo de entrada!

Example

An HTML form containing three input fields; two text fields and a submit button:

<form action="/action_page.php">
  <label for="fname">Name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Surname:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

Try it yourself

Tips and comments

Tip:Always use the <label> tag to define labels for the following elements:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Attribute

Attribute Value Description
accept
  • File extension
  • audio/*
  • video/*
  • image/*
  • Media type

Define the type of file to be submitted through file upload.

Define the file type filter that the user can select from the file input dialog (only applicable to type="file").
alt Texto Define the alternative text for the image (only applicable to type="image").
autocomplete
  • on
  • off
 Define whether the <input> element should enable auto-complete.
autofocus autofocus Define that the <input> element should automatically focus when the page is loaded.
checked checked Define that the <input> element should be pre-selected when the page is loaded (applicable to type="checkbox" or type="radio").
dirname inputname.dir Define the text direction that will be submitted.
disabled disabled Define that the <input> element should be disabled.
form Form id Define the form to which the <input> element belongs.
formaction URL Define the URL that will process the file input control when the form is submitted (applicable to type="submit" and type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Define cómo se debe codificar los datos del formulario al enviarlos al servidor (para type="submit" y type="image").
formmethod
  • get
  • post
 Define el método HTTP utilizado para enviar los datos al URL de acción (para type="submit" y type="image").
formnovalidate formnovalidate Define que no se debe validar el elemento de formulario al enviar el formulario.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Nombre del cuadro de marco 		Define dónde se mostrará la respuesta recibida después de enviar el formulario (para type="submit" y type="image").
height Píxeles Define la altura del elemento <input> (solo para type="image").
list datalist_id Referencia al elemento <datalist> que contiene opciones predefinidas para el <input>.
max
  • número
  • Fecha
 Define el valor máximo del elemento <input>.
maxlength número Define el número máximo de caracteres permitidos en el elemento <input>.
min
  • número
  • Fecha
 Define el valor mínimo del elemento <input>.
minlength número Define el número mínimo de caracteres necesarios en el elemento <input>.
multiple multiple Define que el usuario puede ingresar múltiples valores en el elemento <input>.
name Texto Define el nombre del elemento <input>.
pattern Expresión regular Define la expresión regular para verificar el valor del elemento <input>.
placeholder Texto Define un breve recordatorio de la valor esperado del elemento <input>.
popovertarget ID del elemento Define el elemento de cuadro emergente que se debe llamar (solo para type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Define qué sucede cuando se hace clic en el botón (solo para type="button").
readonly readonly Define que el campo de entrada es de solo lectura.
required required Define que los campos de entrada deben estar llenados antes de enviar el formulario.
size número Define el ancho del elemento <input> (en número de caracteres).
src URL URL del archivo de imagen utilizado como botón de envío (solo para type="image").
step
  • número
  • cualquiera
 Especifica el intervalo entre números legales en el campo de entrada.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Especifica el tipo de elemento <input> que se debe mostrar.
value Texto Especifica el valor del elemento <input>.
width Píxeles Especifica el ancho del elemento <input> (solo se aplica a type="image").

Atributos globales

<input> Las etiquetas también admiten Atributos globales en HTML.

Atributos de eventos

<input> Las etiquetas también admiten Atributos de eventos en HTML.

Configuración CSS predeterminada

Ninguno.

Compatibilidad con navegadores

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte

Páginas relacionadas

Tutoriales de HTML:

Manual de referencia de HTML DOM: