input

Resumen

Edit section

El elemento input (<input>) es usado para crear controles interactivos para formularios basados en la web.

Uso

Edit section

Categorías de Contenidos Flow contentphrasing content; contenido interactivo (sino esta oculto); listedlabelablesubmittable,resettableform-associated element.
Contenido Permitido Niguno, este es un elemento vacío.
Etiqueta de Omisión Debe tener una etiqueta de inicio y no una etiqueta de fin.
Normativa de Documentos HTML 5, section 4.10.7HTML 4.01, section 17.4

Attributes

Edit section

Al igual que todos los demás elementos HTML, este elemento es compatible con los  atributos globales.

type

     El "type" de control a mostrar.  Si este atributo no es especificado tomará el valor de "text" por defecto. Los posible valores son:

  • butt          on: Botón sin un comportamiento especificado.
  • checkbox: Caja a seleccionar. Debes de usar el atributo "value" para especificar el valor que va a enviar este elemento una vez sea validado. Usa el atributo "checked" para indicar si el elemento ha sido seleccionado. También puedes hacer uso del atributo "indeterminate" para indicar que el elemento está en un estado indeterminado (en la mayoría de plataformas, se dibujará una línea horizontal en el elemento).
  • color:  HTML5 Un control para poder sellecionar un color.
  • date:  HTML5 Un control para añadir una fecha (año, mes y día, sin horas).
  • datetime:  HTML5 Control para poder rellenar el campo con una fecha y hora (hora, minuto, segundos y fracciones de segundo) basada en la zona horaria UTC.
  • datetime-local: HTML5  Control para poder rellenar el campo con una fecha y hora sin zona horaria.
  • email: HTML5 Control para poder rellenar el campo con una dirección de correo electrónico. Las pseudo-classes CSS :valid y :invalid son aplicables cuando sea apropiado.
  • file: Control que te permite poder seleccionar un archivo. Usa el atributo accept para definir que tipo de archivos puede selecionar este control.
  • hidden: Control que no se va a mostrar pero su valor va a ser enviado al servidor.
  • image: Representación gráfica para el botón que valida el formulario. Debes de usar el atributo src para definir la ruta de la imágen y el atributo alt para definir un texto alternativo por si la imágen no se muestra. Puedes usar los atributos widthheight para definir el tamaño de la imágen en píxeles.
  • monthHTML5 Control para poder rellenar el campo con un mes y año, sin zona horaria
  • numberHTML5 Control para poder rellenar el campo con un número.
  • password: Control para poder rellenar el campo con texto para crear una contraseña, solo será visible el actual caracter que el usuario escriba. Se puede hacer uso del atributo maxlength para especificar la máxima longitud del valor a usar.
  • radio: Botón radio. Debes de usar el attributo value para defenir el valor que se va a ser enviado por este elemento. Usa el atributo checked para determinar si un elemento debe de ser selecionado por defecto. Botones radio que tengan el mismo valor en el atributo name se considera que estan en el mismo "grupo de botones radio", por lo que solo una opción puede ser seleccionada a la vez.
  • rangeHTML5 Control para poder rellenar el campo con número (rango) cuyo exacto valor no es importante. Este control usa los valores por defecto siguientes si estos no son especificados
    • min: 0
    • max: 100
    • valuemin + (max-min)/2, or min if max is less than min
    • step: 1
  • reset:  Botón que resetea el contenido del formulario a sus valores iniciales por defecto.
  • searchHTML5 Control para poder rellenar el campo con un texto a buscar; saltos de línea son quitados en el valor introducido.
  • submit: Botón que valida el formulario
  • telHTML5 Control para poder rellenar el campo con un número de teléfono; saltos de línea son quitados automáticamente en el valor introducido, ninguna otra sintaxis es obligatoria. Se pueden usar atributos como pattern y maxlength para restringir los valores a introducir en este control. Las pseudo-classes CSS :valid y :invalid  aplican cuando sea apropiado.
  • text: Simple línea de texto a introducir, saltos de línea son quitados automáticamente en el valor introducido
  • timeHTML5 Control para poder rellenar el campo con un valor en formato tiempo pero sin esecificar zona horaria.
  • urlHTML5 Control para poder rellenar el campo con una URL. El usuario puede rellenar el campo con una URL inválida o dejar el espacio en blanco. Saltos de línea son quitados automáticamente en el valor introducido. Se pueden usar atributos como pattern y maxlength para restringir los valores a introducir en este control. Las pseudo-classes CSS :valid y :invalid  aplican cuando sea apropiado.
  • weekHTML5 Control para poder rellenar el campo con una fecha que consista en el número correspondiente a semana del año sin zona horaria.
accept
If the value of the type attribute is file, this attribute indicates the types of files that the server accepts; otherwise it is ignored. The value must be a comma-separated list of unique content type specifiers:
  • A valid MIME type with no extensions
  • audio/* representing sound files HTML5
  • video/* representing video files HTML5
  • image/* representing image files HTML5
accesskey HTML 4 only, Obsolete since HTML5
A single-character that the user can press to switch input focus to the control. This attribute is global in HTML5.
mozactionhint Non-standard
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are godonenextsearch, andsend; these automatically get mapped to the appropriate string (and are case-insensitive).
autocomplete HTML5
This attribute indicates whether the value of the control can be automatically completed by the browser. This attribute is ignored if the value of the type attribute ishiddencheckboxradiofile, or a button type (buttonsubmitresetimage). Possible values are:
  • off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
  • on: The browser can automatically complete the value based on values that the user has entered during previous uses.

If the autocomplete attribute is not specified on an input element, then the browser uses the autocomplete attribute value of the <input> element's form owner. The form owner is either the form element that this <input> element is a descendant of or the form element whose id is specified by the form attribute of the input element. For more information, see the autocomplete attribute in <form> .

autofocus HTML5
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set tohidden (that is, you cannot automatically set focus to a hidden control).
checked
When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.
disabled
This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls.

This attribute is ignored if the value of the type attribute is hidden.

form HTML5
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a <form> element in the same document. If this attribute is not specified, this <input> element must be a descendant of a <form> element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements.
formaction HTML5
The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the action attribute of the element's form owner.
formenctype HTML5
If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
  • multipart/form-data: Use this value if you are using an <input> element with the type attribute set to file.
  • text/plain

If this attribute is specified, it overrides the enctype attribute of the element's form owner.

formmethod HTML5
If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
  • post: The data from the form is included in the body of the form and is sent to the server.
  • get: The data from the form are appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.

If specified, this attribute overrides the method attribute of the element's form owner.

formnovalidate HTML5
If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the element's form owner.
formtarget HTML5
If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the elements's form owner. The following keywords have special meanings:
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
  • _blank: Load the response into a new unnamed browsing context.
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
  • _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
height HTML5
 If the value of the type attribute is image, this attribute defines the height of the image displayed for the button.
list HTML5
Identifies a list of pre-defined options to suggest to the user. The value must be the id of a <datalist> element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute's value is hiddencheckboxradiofile, or a button type.
max HTML5
The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
maxlength HTML5
If the value of the type attribute is textemailsearchpasswordtel, or url,  this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.
min HTML5
The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
multiple HTML5
This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the type attribute is set to email or file; otherwise it is ignored.
name
The name of the control, which is submitted with the form data.
pattern HTML5
A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is textsearchtelurl or email; otherwise it is ignored.
placeholder HTML5
A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the type attribute is textsearchtelurl or email; otherwise it is ignored.
readonly
This Boolean attribute indicates that the user cannot modify the value of the control.

HTML5 This attribute is ignored if the value of the type attribute is hiddenrangecolorcheckboxradiofile, or a button type.

required HTML5
This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hiddenimage, or a button type (submitreset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate.
selectionDirection HTML5
The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
size
The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the type attribute is set to textsearchtelurlemail, or password; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.
src
If the value of the type attribute is image, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.
step HTML5
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
tabindex element-specific in HTML 4, global in HTML5
The position of the element in the tabbing navigation order for the current document.
usemap  HTML 4 only, Obsolete since HTML5
The name of a <map>  element to as an image map.
value
The initial value of the control. This attribute is optional except when the value of the type attribute is radio or checkbox.
Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.
width HTML5
 If the value of the type attribute is image, this attribute defines the width of the image displayed for the button.
x-moz-errormessage Non-standard
This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.

 

Etiquetas y colaboradores del documento

Contributors to this page: Johsua, byverdu, chipsweb, teoli, ovnicraft
Última actualización por: Johsua,