Elemento input (type=text)

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento input, teniendo el valor "text" en su atributo type, representa a un campo de entrada de texto. El control asociado a este campo es una caja de texto que permite a los usuarios editar una sola línea de texto regular. Los controles de texto son útiles para recolectar líneas cortas de texto como títulos, nombres, apellidos, descripciones cortas, palabras clave, etiquetas, etc.

El contenido del atributo value en este elemento representa al valor incial del control. Este valor es el que será mostrado cuando el documento es cargado y cuando un botón de reinicio es presionado en el formulario.

Ejemplos

En nuestro primer ejemplo crearemos un formulario (form) con tres controles de entrada de texto. Como estamos casi seguros de que el usuario que navega esta página se llama Jhon, pondremos su nombre en el atributo value del primer control.

En el tercer control, haremos uso del atributo placeholder, el cual ha sido introducido en HTML5. Este atributo nos permite dar una pista acerca de la información que se espera sea provista en el control, como ejemplos o descripciones cortas. Esta pista será mostrada dentro del control (como si fuera el valor) sólo cuando el control no tenga un valor real. Cuando el usuario comience a tipear, el texto de placeholder será removido del control.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Nombre: <input type="text" name="nombre" value="John"></p>
  <p>Apellido: <input type="text" name="apellido"></p>
  <p>Deporte favorito: <input type="text" name="deporte" placeholder="Fútbol? Tenis? Hockey?"></p>
  <p>
    <input type="submit" value="Enviar datos">
    <input type="reset" value="Restaurar formulario">
  </p>
</form>

Nombre:

Apellido:

Deporte favorito:

En el segundo ejemplo, usaremos algunos atributos más: size para establecer el ancho del control como un número de caracteres visibles y maxlength para establecer el número máximo de caracteres que el valor puede tomar.

Los autores no deberían confiar en los atributos minlength y maxlength. Los usuarios podrían enviar la información del formulario con navegadores que (algunos intencionalmente) no soportan estas características.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Ingresa tu código: <input type="text" name="codigo" size="4" maxlength="4">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Ingresa tu código:

En nuestro tercer ejemplo, exploraremos un par de atributos que pueden ser vistos equivocadamente como si tuvieran los mismos efectos. El primer atributo es readonly que impide al usuario editar el valor del control, aunque le permite seleccionar y copiar su texto. El atributo disabled, por su parte, va más allá al no permitir al usuario seleccionar o copiar el texto del control y además, previene que el valor del elemento sea enviado cuando el formulario es despachado.

Aquí podrás ver como estos atributos afectan la interacción y, especialmente, cómo la información es enviada (o no enviada) al servidor.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Texto de sólo lectura: <input type="text" name="textodesololectura" value="Hola!" readonly></p>
  <p>Texto deshabilitado: <input type="text" name="textodeshabilitado" value="Ho!" disabled></p>
  <p><input type="submit" value="Enviar datos"></p>
</form>

Texto de sólo lectura:

Texto deshabilitado:

Ahora probemos otro atributo nuevo en HTML5: list. Este atributo enlaza al control con un elemento datalist al referenciar su atributo id. El datalist asociado provee un número de sugerencias que los usuarios pueden elegir para rellenar automáticamente el valor del control.

El soporte provisto por los navegadores para datalist es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Model: <input type="text" name="modelo" list="listademodelos">
    <input type="submit" value="Enviar datos">
  </p>
</form>
<datalist id="listademodelos">
  <option value="Camaro">
  <option value="Corvette">
  <option value="Impala">
  <option value="Colorado">
</datalist>

Model:

Nuestro ejemplo final combina dos atributos, también nuevos en HTML5, que habitualmente trabajan juntos. Estos son pattern y required. Su importancia se vuelve evidente cuando el autor necesita establecer un conjunto de reglas acerca del formato de la información que puede ser ingresada en un control.

El atributo pattern, ayuda estableciendo expresiones regulares que cualquier valor ingresado debe acatar. Cuando está presente, el atributo title toma particular relevancia, ya que es responsable de proveer una explicación acerca de las reglas que aplican en el campo. Los navegadores pueden usar esta información para componer el mensaje de error que se muestra al usuario luego de un intento fallido de envío.

Por otra parte, el atributo required impide a los usuarios dejar el campo vacío. Ambos atributos, juntos, indican que el control debe ser rellenado y especifican cómo debe ser rellenado.

La presencia de estos atributos implica que el envío del formulario será interrumpido hasta que sus requerimientos sean satisfechos. Los navegadores mostrarán mensajes de error cuando el usuario intente enviar campos que no cumplen las premisas.

Una expresión regular es una secuencia de caracteres que forman un patrón de búsqueda, principalmente para su uso en correspondencia de patrones y cadenas u operaciones estilo búsqueda y reemplazo.

El soporte provisto por los navegadores para el atributo required es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Código de seguridad: <input type="text" name="codigoseg" pattern="[A-Za-z0-9]{8,20}" title="Un código de seguridad válido consiste en una cadena con 8 a 20 caracteres, cada uno de los cuales es una letra o un dígito" required>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Código de seguridad:

Atributos

Atributos específicos

autocomplete

El atributo autocomplete provee información acerca de si y cómo los navegadores deberían sugerir opciones automáticamente para este control, como un intento de adivinar lo que el usuario está escribiendo. Existen tres valores posibles para este atributo:

  • El valor on, indicando al navegador que debería sugerir opciones automáticamente pero sin proveer ninguna otra información acerca del tipo de datos que se espera en el control.
  • El valor off, indicando al navegador que no debería sugerir opciones automáticamente, ya sea debido a que la información a ser ingresada en el control es particularmente sensible (como el usuario para acceder a un área muy segura) o debido a que su valor nunca será reutilizado (como una clave de uso único en un proceso de registración).
  • Una lista de identificadores de detalles de autocompletado, indicando al navegador que debería sugerir opciones automáticamente y especificando el tipo de valor que se espera recibir.

Una lista de identificadores de detalles de autocompletado puede estar compuesta por los siguientes identificadores en el orden especificado.

  1. Opcionalmente, un identificador que comience con la cadena "section-" (insensible a mayúsculas/minúsculas), indicando el grupo al cual el campo pertenece.
  2. Opcionalmente, uno de los dos identificadores siguientes (insensibles a mayúsculas/minúsculas):
    • shipping: el campo es parte de la dirección de envío.
    • billing: el campo es parte de la dirección de facturación.
  3. Una de las dos opciones siguientes:
    • El siguiente identificador (insensible a mayúsculas/minúsculas):
      • name: un nombre completo
      • honorific-prefix: un prefijo o título, como Sir, Sr., Dr., etc.
      • given-name: un primer nombre.
      • additional-name: nombres adicionales o secundarios.
      • family-name: un apellido o nombre de familia.
      • honorific-suffix: un sufijo, como Jr., II ó ABIST.
      • nickname: un sobrenombre o nombre corto utilizado en lugar del nombre completo.
      • organization-title: un título profesional, como Contador, Arquitecto, Ingeniero, etc.
      • username: un nombre de usuario, típicamente usado para operaciones de acceso, como "adan457" ó "materia_oscura_01".
      • new-password: una nueva contraseña, típicamente requerida al crear una cuenta o al cambiar una contraseña.
      • current-password: la actual contraseña, típicamente requerida al ingresar o al cambiar una contraseña.
      • organization: la empresa asociada con la persona o información en otros campos asociados a este campo.
      • address-line1: una componente de una dirección.
      • address-line2: una componente de una dirección.
      • address-line3: una componente de una dirección.
      • address-level4: el nivel administrativo más específico, en direcciones con cuatro niveles administrativos.
      • address-level3: el tercer nivel administrativo, en direcciones con tres o más niveles administrativos.
      • address-level2: el segundo nivel administrativo, en direcciones con dos o más niveles administrativos. En países con dos niveles administrativos, esto sería típicamente la ciudad, pueblo o aldea.
      • address-level1: el nivel administrativo más amplio. Esto podría ser la provincia o estado dentro del cual se encuentra la localidad.
      • country: un código de país representando a un país, como "US", "UK" ó "ES".
      • country-name: el nombre de un país, como Albania, Liberia ó Uruguay.
      • postal-code: un código postal, código ZIP, código CEDEX (si es CEDEX, se debe agregar "CEDEX", y el distrito, si es relevante, al campo address-level2), etc., como 02139, 1428 ó 10025.
      • cc-name: un nombre completo como figure en el instrumento de pago.
      • cc-given-name: un primer nombre como figure en el instrumento de pago.
      • cc-additional-name: nombres adicionales o secundarios como figure en el instrumento de pago.
      • cc-family-name: un apellido o nombre de familia como figure en el instrumento de pago.
      • cc-number: un código identificando al instrumento de pago, como el número de una tarjeta de crédito.
      • cc-exp: la fecha de expiración del instrumento de pago.
      • cc-month: el mes de expiración del instrumento de pago.
      • cc-year: el año de expiración del instrumento de pago.
      • cc-csc: el código de seguridad del el instrumento de pago (CSC, CVC, CVV, SPC, CCID, etc.).
      • cc-type: el tipo de intrumento de pago utilizado, como la tarjeta de crédito.
      • transaction-currency: un código de divisa representando a la divisa a ser usada en la transacción, como "USD", "ARS" ó "GBP".
      • transaction-amount: el monto de la transacción, como al ingresar un valor en una subasta.
      • language: una etiqueta de lenguaje identifiando al idioma preferido, como "en", "en-GB" ó "es-419".
      • bday: una fecha de nacimientoa.
      • bday-day: el día de una fecha de nacimiento.
      • bday-month: el mes de una fecha de nacimiento.
      • bday-year: el año de una fecha de nacimiento.
      • sex: un identificador de género, como masculino o femenino.
      • url: una página correspondiente a la empresa, persona, dirección o información de contacto en otros campos asociados a este campo, como "http://www.yo-soy-juan.com".
      • photo: una fotografía, ícono, u otra imagen a la empresa, persona, dirección o información de contacto en otros campos asociados a este campo, como "http://www.yo-soy-juan.com/imagenes/yo.jpg".
    • Lo siguiente, en el orden dado:
      1. Opcionalmente, un identificador que coincide (insensible a mayúsculas/minúsculas) con alguno de los valores siguientes:
        • home: indicando que el campo es para contactar a alguien en su residencia.
        • work: indicando que el campo es para contactar a alguien en su lugar de trabajo.
        • mobile: indicando que el campo es para contactar a alguien en su dispositivo móvil.
        • fax: indicando que el campo describe datos de contacto de una máquina de fax.
        • pager: indicando que el campo describe datos de contacto de un pager ó beeper.
      2. Un identificador que coincide (insensible a mayúsculas/minúsculas) con alguno de los siguientes identificadores de detalles de autocompletado:
        • tel: un número de teléfono completo, incluyendo el código de país, como +1 617 253 5702.
        • tel-country-code: el código de país de un número telefónico, como +1 ó +54.
        • tel-national: un número de teléfono sin el código de país, con un prefijo nacional, si corresponde, como 617 253 5702.
        • tel-area-code: el código de área de un número telefónico, como 617.
        • tel-local: un número de teléfono sin el código de país y sin el código de área nacional, como 253 5702.
        • tel-local-prefix: la primera parte de un número de teléfono sin código de país y sin código de área, cuando ese número se encuentra dividido en dos componentes.
        • tel-local-suffix: la segunda parte de un número de teléfono sin código de país y sin código de área, cuando ese número se encuentra dividido en dos componentes.
        • tel-extension: el código de extensión interno de un número telefónico.
        • email: una dirección de correo electrónico, como juanperez@desconocido.com.
        • impp: una URL representando a un punto de un protocolo de mensajería instantánea, como "aim:goim?screenname=juanperez" ó "xmpp:juanperez@desconocido.com".

Usualmente, los navegadores llevan a cabo las operaciones de autocompletado recuperando datos de una base de datos con entradas previas u otras fuentes con información del usuaio.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Código de registración: <input type="text" name="codigoreg" autocomplete="off"><br>
    Usuario: <input type="text" name="usuario" autocomplete="username"><br>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Código de registración:
Usuario:

autofocus

Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.

Ejemplo

<p>Enter you username: <input type="text" name="username" autofocus></p>

dirname

Un nombre para un nuevo campo especialmente creado con el fin de transmitir la direccionalidad del texto ingresado. Este atributo, nuevo en HTML5, permite a los autores manipular correctamente los valores enviados con cualquier direccionalidad de texto, al agregar un campo que es enviado con el formulario. El nombre de ese campo será el valor de este atributo.

Siendo relativamente nuevo, el soporte provisto por los navegadores para el atributo dirname es incompleto. Los autores deberían revisar el soporte cuando la información es recibida en el servidor.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Algo de texto: <input type="text" name="algodetexto" dirname="algodetexto-dir">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Algo de texto:

disabled

Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Algo de texto: <input type="text" name="algodetexto" disabled>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Algo de texto:

form

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

Ejemplo

<p>Algo de texto: <input type="text" name="algodetexto" form="formulario1"></p>
<form id="formulario1" action="../../form-result.php" method="post" target="_blank">
  <p><input type="submit" value="Enviar datos"></p>
</form>

Algo de texto:

inputmode

Un valor que indica qué tipo de mecanismo de entrada sería más beneficioso para los usuarios que ingresen datos en el control. Existen doce valores posibles, insensibles a mayúsculas/minúsculas:

  • verbatim: entrada de escritura latina alfanumérica de contenido no presentado en prosa, como nombres de usuario, contraseñas, códigos de procuto, etc.
  • latin: entrada de escritura latina en el lenguaje preferido del usuario, con algunos mecanismos de tipeo asistido habilitados, como predicción de texto. Pensado para entradas de usuario a computadora como en los formularios de búsqueda.
  • latin-name: entrada de escritura latina en el lenguaje preferido del usuario, con mecanismos de tipeo asistido de nombres habilitados, como predicción de texto en base a una lista de contactos y capitalizaciones automáticas.
  • latin-prose: entrada de escritura latina en el lenguaje preferido del usuario, con mecanismos de tipeo de humano a humano habilitados, como predicción de texto y capitalización automática al comienzo de cada oración.
  • full-width-latin: entrada de escritura latina en el lenguaje secundario del usuario, usando caracteres de ancho completo y mecanismos de tipeo de humano a humano habilitados, como predicción de texto y capitalización automática al comienzo de cada oración.
  • kana: entrada en kana o romaji, típicamente entrada en hiragana, usando caracteres de ancho completo, con soporte para convertir a kanji. Pensado para entradas de texto en japonés.
  • kana-name: igual que "kana", con mecanismos de tipeo pensados para el ingreso de nombres de personas habilitados, como predicción de texto en base a una lista de contactos.
  • katakana: entrada en katakana, usando caracteres de ancho completo, con soporte para convertir a kanji. Pensado para entradas de texto en japonés.
  • numeric: entrada numérica, incluyendo teclas para los dígitos del 0 al 9, el carácter separador de miles preferido del usuario, y el carácter para indicar números negativos. El control de entrada numérica es preferido.
  • tel: entrada de números telefónicos, incluyendo teclas para los dígitos del 0 al 9, el carácter "#", y el carácter "*". En algunos lugares, esto también puede incluir etiquetas de alfabeto mnemotécnico. El control de entrada de números telefónicos es preferido.
  • email: entrada de texto del lugar del usuario, con teclas para asistencia en la entrada de direcciones de correo electrónico, tales como el carácter "@" y el carácter ".". El control de entrada de e-mail es preferido.
  • url: entrada de texto del lugar del usuario, con teclas para asistencia en la entrada de direcciones web, tales como los caracteres "/" y "." y para entrada rápida de cadenas comúnmente encontradas en nombres de dominio tales como "www." o ".co.uk". El control de entrada de URLs es preferido.

Los navegadores pueden usar la información en este atributo para proveer un mecanismo que asista al usuario en el rellenado de la información. Por ejemplo, los teclados virtuales en pantalla pueden proveer teclas especiales para el modo de entrada especificado.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Ingresa tu nombre: <input type="text" name="nombrecompleto" inputmode="latin-name">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Ingresa tu nombre:

list

Un identificador que concuerda con el valor del atributo id del elemento datalist con el que este control está asociado. El datalist referenciado por este atributoproveerá un número de sugerencias que los usuarios pueden escoger para autocompletar el control.

El soporte provisto por los navegadores para datalist es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Mascota favorita: <input type="text" name="mascotafavorita" list="listamascotas">
    <input type="submit" value="Enviar datos">
  </p>
</form>
<datalist id="listamascotas">
  <option value="Perro">
  <option value="Gato">
  <option value="Conejo">
  <option value="Loro">
</datalist>

Mascota favorita:

maxlength

Un entero que indica el número máximo de caracteres que el valor de este control puede tener.

Los autores no deberían confiar en el atributo maxlength. Los usuarios podrían enviar la información del formulario con navegadores que (algunos intencionalmente) no soportan estas características.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Ingresa tu código: <input type="text" name="codigo" maxlength="2">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Ingresa tu código:

minlength

Un entero que indica el número mínimo de caracteres que el valor de este control puede tener.

Los autores no deberían confiar en el atributo minlength. Los usuarios podrían enviar la información del formulario con navegadores que (algunos intencionalmente) no soportan estas características.

El soporte provisto por los navegadores para el atributo minlength es extremadamente bajo (hasta el 18/12/2014). Los autores no deberían confiar en este atributo hasta que el soporte crezca.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Ingresa tu código: <input type="text" name="codigo" minlength="1">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Ingresa tu código:

name

Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, emparejado con el contenido del atributo value. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Ingresa tu ciudad: <input type="text" name="ciudad">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Ingresa tu ciudad:

pattern

Una expresión regular para comparar con el valor del control antes de que el formulario sea enviado. Este atributo puede ser usado para especificar un formato que los usuarios tendrán que respetar a la hora de completar el campo. Si este patrón no es respetado, un mensaje de error será mostrado durante el envío y el proceso será cancelado (a menos que el atirbuto formnovalidate esté presente en el formulario o en el botón de envío).

El atributo title toma un significado especial cuando este atributo está presente: se espera que éste provea una explicación acerca de las reglas que aplican en el campo. Los navegadores pueden usar la información de title para componer el mensaje de error que es mostrado al usuario cuando el proceso de envío es cancelado.

Una expresión regular es una secuencia de caracteres que forman un patrón de búsqueda, principalmente para su uso en correspondencia de patrones y cadenas u operaciones estilo búsqueda y reemplazo.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Ingresa tu código: <input type="text" name="codigo" pattern="[A-Z0-9]{4,10}" title="Un código válido debe tener entre 4 y 10 caracteres de longitud, donde cada carácter puede ser una letra mayúscula o un dígito">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Ingresa tu código:

placeholder

Una línea de texto que se supone provee una pista acerca de cómo debería ser rellenado el campo, como ejemplos o descripciones cortas. Los navegadores pueden mostrar los contenidos de este atributo en el control mientras este no tiene un valor. Tan pronto como el usuario comience a escribir su propio texto, el texto placeholder debería desaparecer del control.

Los autores no deberían utilizar este atributo para reemplazar a la etiqueta. Las etiquetas están pensdas para proveer un título, mientras que el texto placeholder debería dar una pequeña pista acerca de cómo rellenar el campo. Además, es de esperarse el texto placeholder desaparezca cuando el usuario comience a escribir en el control.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Estado: <input type="text" name="estado" placeholder="Kansas, Arizona, Colorado...">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Estado:

readonly

Un valor booleano que instruye al navegador a impedir que el usuario cambie el valor del control. Si este atributo tiene el valor "readonly" o la cadena vacía (""), o si simplemente está presente, el usuario no tendrá premitido hacer cambios al valor en el control.

Aunque este atributo previene que el valor del control sea editado, no toda interacción es bloqueada: los usuario aún podrán seleccionar y copiar el texto en el control.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Nombre de usuario: <input type="text" name="nombredeusuario" value="samwise4855" readonly>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Nombre de usuario:

required

Un valor booleano que indica si este control puede ser dejado en blanco o no. Si este atributo tiene el valor "required" o la cadena vacía (""), o si está siplemente presente, el usuario tendrá que rellenar el control a fin de poder enviar el formulario.

Si un control con el atributo required presente es dejado en blanco, los navegadores que soporten este mecanismo arrojarán un error previo al envío y cancelarán el proceso inmediatamente.

El soporte provisto por los navegadores para el atributo required es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Título: <input type="text" name="titulo" required>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Título:

size

Un entero para ser usado como ancho del elemento, como un número de caracteres que deberian ser visibles en el control simultáneamente.

Como los caracteres normalmente no tienen el mismo ancho, los navegadores pueden definir el ancho de carácter de acuerdo a ciertos criterios (como ancho promedio o máximo).

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Code: <input type="text" name="codigo" size="4">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Code:

type

Un valor que indica el tipo de campo que representa este elemento. Existen veintidós valores posibles (insensibles a mayúsculas/minúsculas):

  • hidden: un control oculto utilizado para enviar información al servidor, típicamente manejado por programas.
  • text: un control usado para la entrada de una sola línea de texto.
  • search: igaul a text pero con fines de búsqueda.
  • tel: un control usado para proveer un número de teléfono.
  • url: una caja de texto usada para el ingreso de un único URL absoluto.
  • email: un control diseñado para editar una o más direcciones de e-mail.
  • password: una caja de texto para la edición de contraseñas, donde los caracteres son representados por puntos.
  • date: un control para ingresar una fecha específica.
  • month: un control para ingresar un mes específico.
  • week: un control para ingresar una semana específica.
  • time: un control para ingresar una hora específica.
  • datetime-local: un control para ingresar una fecha y hora local específica.
  • number: un control para ingresar un número.
  • range: un control para ingresar uno o dos números dentro de un rango.
  • color: un control para ingresar un color.
  • checkbox: un control para ingresar un valor booleano (verdadero/falso).
  • radio: un control para elegir una única opción entre varias.
  • file: un control usado para subir archivos al servidor.
  • submit: un botón usado para enviar el formulario.
  • image: igual a submit pero con la habilidad de verse como una imagen en lugar de usar la apariencia predeterminada de los botones.
  • reset: un botón usado para reiniciar los controles del formulario a sus valores iniciales.
  • button: un botón sin una acción predeterminada asociada.

Cuando este atributo está ausente, el elemento se comporta como si tuviera el valor "text".

Ejemplo

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

value

Un valor inicial para el control, que será establecido cuando la página se cargue y cuando el botón de reinicio sea presionado.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>Título: <input type="text" name="titulo" value="Un hombre sin honor"></p>
  <p>
    <input type="submit" value="Enviar datos">
    <input type="reset" value="Restaurar formulario">
  <p>
</form>

Título:

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.