Atributos de HTML Input

Atributo value

value El atributo especifica el valor inicial del campo de entrada:

Ejemplo

<form action="">
 Nombre:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Apellido:<br>
<input type="text" name="lastname">
</form>

Pruebe usted mismo

Atributo readonly

readonly El atributo especifica que el campo de entrada es de solo lectura (no se puede modificar):

Ejemplo

<form action="">
 Nombre:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Apellido:<br>
<input type="text" name="lastname">
</form>

Pruebe usted mismo

El atributo readonly no requiere valor. Es equivalente a readonly="readonly".

Atributo disabled

disabled El atributo especifica que el campo de entrada está deshabilitado.

Los elementos deshabilitados no están disponibles y no son clicables.

Los elementos deshabilitados no se enviarán.

Ejemplo

<form action="">
 Nombre:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Apellido:<br>
<input type="text" name="lastname">
</form>

Pruebe usted mismo

El atributo disabled no requiere valor. Es equivalente a disabled="disabled".

Atributo size

size El atributo especifica el tamaño del campo de entrada (en caracteres):

Ejemplo

<form action="">
 Nombre:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Apellido:<br>
<input type="text" name="lastname">
</form>

Pruebe usted mismo

Atributo maxlength

maxlength El atributo especifica la longitud máxima permitida para el campo de entrada:

Ejemplo

<form action="">
 Nombre:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Apellido:<br>
<input type="text" name="lastname">
</form>

Pruebe usted mismo

Si se establece la propiedad maxlength, el control de entrada no aceptará más caracteres de los permitidos.

Esta propiedad no proporcionará ningún feedback. Si se necesita alertar al usuario, debe escribirse código JavaScript.

Nota:Las limitaciones de entrada no son infalibles. JavaScript ofrece muchos métodos para aumentar las entradas ilegales. Para limitar de manera segura la entrada, el receptor (servidor) debe verificar la limitación simultáneamente.

Propiedades HTML5

HTML5 agrega las siguientes propiedades a <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height y width
  • list
  • min y max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Y agrega propiedades necesarias para <form>:

  • autocomplete
  • novalidate

Propiedad autocomplete

La propiedad autocomplete especifica si el formulario o el campo de entrada debe completarse automáticamente.

Cuando el autocompletado está activado, el navegador llenará automáticamente los valores basándose en las entradas anteriores del usuario.

Consejo:Puedes establecer la propiedad autocomplete del formulario en on, al mismo tiempo que estableces un campo de entrada específico en off, y viceversa.

La propiedad autocomplete se aplica a <form> y a los siguientes tipos de <input>: text, search, url, tel, email, password, datepickers, range y color.

Ejemplo

Formulario HTML con autocompletado activado (algunos campos de entrada son off):

<form action="action_page.php" autocomplete="on">
   Nombre:<input type="text" name="fname"><br>
   Apellido: <input type="text" name="lname"><br>
   Correo electrónico: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Pruebe usted mismo

Consejo:En algunos navegadores, es posible que necesite activar manualmente la función de finalización automática.

La propiedad novalidate

La propiedad novalidate pertenece a las propiedades del elemento <form>.

Si se configura, la propiedad novalidate especifica que no se debe realizar una validación de los datos del formulario al enviarlo.

Ejemplo

Indica que el formulario no debe realizarse una validación cuando se envía:

<form action="action_page.php" novalidate>
   Correo electrónico: <input type="email" name="user_email">
   <input type="submit">
</form>

Pruebe usted mismo

La propiedad autofocus

La propiedad autofocus es un atributo booleano.

Si se configura, especifica que el elemento <input> debe obtener automáticamente el foco al cargar la página.

Ejemplo

Hacer que el campo de entrada "Nombre" obtenga automáticamente el foco al cargar la página:

Nombre: <input type="text" name="fname" autofocus>

Pruebe usted mismo

La propiedad form

La propiedad form especifica uno o más formularios a los que pertenece el elemento <input>.

Consejo:Para referirse a más de un formulario, utilice una lista de ids de formulario separados por espacios.

Ejemplo

Un campo de entrada se encuentra fuera del formulario HTML (pero aún pertenece al formulario):

<form action="action_page.php" id="form1">
   Nombre: <input type="text" name="fname"><br>
   <input type="submit" value="Enviar">
</form>
 Apellido: <input type="text" name="lname" form="form1">

Pruebe usted mismo

La propiedad formaction

La propiedad formaction especifica la URL del archivo que se procesa cuando se envía el formulario.

La propiedad formaction cubre la propiedad action del elemento <form>.

La propiedad formaction es aplicable a type="submit" y type="image".

Ejemplo

Un formulario HTML con dos botones de envío y diferentes acciones:

<form action="action_page.php">
   Nombre: <input type="text" name="fname"><br>
   Apellido: <input type="text" name="lname"><br>
   <input type="submit" value="Enviar"><br>
   <input type="submit" formaction="demo_admin.asp">
   value="Enviar como administrador">
</form>

Pruebe usted mismo

La propiedad formenctype

La propiedad formenctype especifica cómo se debe codificar los datos del formulario (form-data) cuando se envían al servidor (sólo para formularios con method="post").

La propiedad formenctype cubre la propiedad enctype del elemento <form>.

La propiedad formenctype se aplica a type="submit" y type="image".

Ejemplo

Enviar datos del formulario (form-data) con codificación predeterminada y codificación "multipart/form-data" (segundo botón de envío):

<form action="demo_post_enctype.asp" method="post">
   Nombre: <input type="text" name="fname"><br>
   <input type="submit" value="Enviar">
   <input type="submit" formenctype="multipart/form-data">
   value="Enviar como multipart/form-data">
</form>

Pruebe usted mismo

Propiedad formmethod

La propiedad formmethod define el método HTTP utilizado para enviar los datos del formulario (form-data) a la URL de acción.

La propiedad formmethod sobrescribe la propiedad method del elemento <form>.

La propiedad formmethod se aplica a type="submit" y type="image".

Ejemplo

El segundo botón de envío sobrescribe el método HTTP del formulario:

<form action="action_page.php" method="get">
   Nombre: <input type="text" name="fname"><br>
   Apellido: <input type="text" name="lname"><br>
   <input type="submit" value="Enviar">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Enviar usando POST">
</form>

Pruebe usted mismo

Propiedad formnovalidate

La propiedad novalidate es un atributo booleano.

Si se establece, especifica que no se debe realizar una validación en los elementos <input> al enviar el formulario.

La propiedad formnovalidate sobrescribe la propiedad novalidate del elemento <form>.

La propiedad formnovalidate se puede usar con type="submit".

Ejemplo

Formulario con dos botones de envío (validación y sin validación):

<form action="action_page.php">
   Correo electrónico: <input type="email" name="userid"><br>
   <input type="submit" value="Enviar"><br>
   <input type="submit" formnovalidate value="Enviar sin validación">
</form>

Pruebe usted mismo

Atributo formtarget

El nombre o palabra clave especificado por el atributo formtarget indica dónde se mostrará la respuesta recibida después de enviar el formulario.

El atributo formtarget sobrescribe el atributo target del elemento <form>.

El atributo formtarget se puede usar con type="submit" y type="image".

Ejemplo

Este formulario tiene dos botones de envío, que corresponden a diferentes ventanas de destino:

<form action="action_page.php">
   Nombre: <input type="text" name="fname"><br>
   Apellido: <input type="text" name="lname"><br>
   <input type="submit" value="Enviar de manera normal">
   <input type="submit" formtarget="_blank">
   value="Enviar a una nueva ventana">
</form>

Pruebe usted mismo

Propiedades height y width

Las propiedades height y width especifican la altura y anchura del elemento <input>.

Las propiedades height y width solo se utilizan para <input type="image">.

Nota:Siempre especifique el tamaño de la imagen. Si el navegador no conoce el tamaño de la imagen, la página parpadeará mientras se carga la imagen.

Ejemplo

Defina una imagen como botón de envío y configure las propiedades height y width:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Pruebe usted mismo

Atributo list

El atributo list de la lista de datos <datalist> contiene opciones predeterminadas para el elemento <input>.

Ejemplo

Utilice <datalist> para establecer elementos de valor predeterminado para el elemento <input>:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

Pruebe usted mismo

Propiedades min y max

Las propiedades min y max especifican el valor mínimo y máximo del elemento <input>.

Las propiedades min y max se aplican a los tipos de entrada: number, range, date, datetime, datetime-local, month, time y week.

Ejemplo

Elemento <input> con valores mínimo y máximo:

Ingresa una fecha antes del 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Ingresa una fecha antes del 1980-01-01:
Ingresa una fecha después del 2000-01-01:
 Cantidad (entre 1 y 5):
<input type="number" name="quantity" min="1" max="5">

Pruebe usted mismo

Propiedad multiple

La propiedad multiple es un atributo booleano.

Si se configura, define que el usuario puede ingresar más de un valor en el elemento <input>.

La propiedad multiple se aplica a los tipos de entrada siguientes: email y file.

Ejemplo

Campo de subida de archivos que acepta múltiples valores:

Elige una imagen: <input type="file" name="img" multiple>

Pruebe usted mismo

Propiedad pattern

La propiedad pattern especifica la expresión regular utilizada para verificar el valor del elemento <input>.

La propiedad pattern se aplica a los tipos de entrada siguientes: text, search, url, tel, email y password.

Consejo:Usa la propiedad title global para describir el patrón para ayudar al usuario.

Consejo:Aprende más sobre expresiones regulares en nuestro tutorial de JavaScript.

Ejemplo

El campo de entrada solo puede contener tres letras (sin números o caracteres especiales):

Código de país: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Pruebe usted mismo

Propiedad placeholder

La propiedad placeholder especifica una sugerencia para describir el valor esperado del campo de entrada (un ejemplo de valor o una breve descripción del formato).

Este mensaje se mostrará en el campo de entrada antes de que el usuario ingrese un valor.

La propiedad placeholder se aplica a los siguientes tipos de entrada: text, search, url, tel, email y password.

Ejemplo

Campos de entrada con texto de marcador de posición:

<input type="text" name="fname" placeholder="First name">

Pruebe usted mismo

Propiedad required

La propiedad required es un atributo booleano.

Si se configura, se especifica que el campo de entrada debe estar llenado antes de enviar el formulario.

La propiedad required se aplica a los siguientes tipos de entrada: text, search, url, tel, email, password, selectors de fecha, number, checkbox, radio y file.

Ejemplo

Campos de entrada obligatorios:

Username: <input type="text" name="usrname" required>

Pruebe usted mismo

Propiedad step

La propiedad step especifica el intervalo de números válidos del elemento <input>.

Ejemplo: si step="3", los números válidos serían -3, 0, 3, 6, etcétera.

Consejo:La propiedad step se puede usar junto con las propiedades max y min para crear un rango de valores válidos.

La propiedad step se aplica a los siguientes tipos de entrada: number, range, date, datetime, datetime-local, month, time y week.

Ejemplo

Campos de entrada con intervalo de números específicos y legales:

<input type="number" name="points" step="3">

Pruebe usted mismo