HTML Atributos de entrada
Este capítulo describe los diferentes atributos del elemento HTML <input>.
El atributo de value
El atributo de entrada value especifica un valor inicial para un campo de entrada:
Ejemplo
Campos de entrada con valores iniciales (predeterminados):
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Inténtalo tú mismo »
El atributo de readonly
El atributo de entrada readonly especifica que un campo de entrada es de solo lectura.
Un campo de entrada de solo lectura no se puede modificar (sin embargo, un usuario puede acceder a él, resaltarlo y copiar el texto).
¡El valor de un campo de entrada de solo lectura se enviará al enviar el formulario!
Ejemplo
Un campo de entrada de solo lectura:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Inténtalo tú mismo »
El atributo disabled
El atributo de entrada disabled especifica que un campo de entrada debe estar deshabilitado.
Un campo de entrada deshabilitado no se puede utilizar ni se puede hacer clic en él.
¡El valor de un campo de entrada deshabilitado no se enviará al enviar el formulario!
Ejemplo
Un campo de entrada deshabilitado:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Inténtalo tú mismo »
El atributo de size
El atributo de entrada size especifica el ancho visible, en caracteres, de un campo de entrada.
El valor predeterminado para size es 20.
Nota: El atributo size funciona con los siguientes tipos de entrada: texto, búsqueda, teléfono, URL, correo electrónico y contraseña.
Ejemplo
Establecer un ancho para un campo de entrada:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
Inténtalo tú mismo »
El atributo maxlength
El atributo de entrada maxlength especifica el número máximo de caracteres permitidos en un campo de entrada.
Nota: Cuando se establece un maxlength, el campo de entrada no aceptará más que el número de caracteres especificado. Sin embargo, este atributo no proporciona ninguna información. Entonces, si desea alertar al usuario, debe escribir código JavaScript.
Ejemplo
Establezca una longitud máxima para un campo de entrada:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
Inténtalo tú mismo »
Los atributos min y max
Los atributos de entrada min y max especifican los valores mínimo y máximo para un campo de entrada.
Los atributos min y max funcionan con los siguientes tipos de entrada: número, rango, fecha, fecha y hora -local, mes, hora y semana.
Consejo: Utilice los atributos máximo y mínimo juntos para crear un rango de valores legales.
Ejemplo
Establezca una fecha máxima, una fecha mínima y un rango de valores legales:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Inténtalo tú mismo »
El atributo multiple
El atributo de entrada multiple especifica que el usuario puede ingresar más de un valor en un campo de entrada.
El atributo multiple funciona con los siguientes tipos de entrada: correo electrónico y archivo.
Ejemplo
Un campo de carga de archivos que acepta múltiples valores:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>
Inténtalo tú mismo »
El atributo del pattern
El atributo de entrada pattern especifica una expresión regular con la que se compara el valor del campo de entrada cuando se envía el formulario.
El atributo pattern funciona con los siguientes tipos de entrada: texto, fecha, búsqueda, URL, teléfono, correo electrónico y contraseña.
Consejo: Utilice el atributo global title para describir el patrón y ayudar al usuario.
Consejo: Obtenga más información sobre las expresiones regulares en nuestro tutorial de JavaScript.
Ejemplo
Un campo de entrada que puede contener solo tres letras (sin números ni caracteres especiales):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
Inténtalo tú mismo »
El atributo de placeholder
El atributo de entrada placeholder especifica una breve sugerencia que describe el valor esperado de un campo de entrada (un valor de muestra o una breve descripción del formato esperado).
La breve sugerencia se muestra en el campo de entrada antes de que el usuario ingrese un valor.
El atributo placeholder funciona con los siguientes tipos de entrada: texto, búsqueda, URL, teléfono, correo electrónico y contraseña.
Ejemplo
Un campo de entrada con un texto de marcador de posición:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Inténtalo tú mismo »
El atributo required
El atributo de entrada required especifica que se debe completar un campo de entrada antes de enviar el formulario.
El atributo required funciona con los siguientes tipos de entrada: text, search, url, tel, email, password, date pickers, number, checkbox, radio y file.
Ejemplo
Un campo de entrada obligatorio:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
Inténtalo tú mismo »
El atributo de step
El atributo de entrada step especifica los intervalos numéricos legales para un campo de entrada.
Ejemplo: si paso="3", los números legales podrían ser -3, 0, 3, 6, etc.
Consejo: Este atributo se puede utilizar junto con los atributos máximo y mínimo para crear un rango de valores legales.
El atributo step funciona con los siguientes tipos de entrada: número, rango, fecha, fecha y hora local, mes, hora y semana.
Ejemplo
Un campo de entrada con intervalos de números legales especificados:
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>
Inténtalo tú mismo »
Nota: las restricciones de entrada no son infalibles y JavaScript proporciona muchas formas de agregar entradas ilegales. Para restringir de forma segura la entrada, ¡el receptor (el servidor) también debe verificarla!
El atributo de autofocus
El atributo de entrada autofocus especifica que un campo de entrada debe recibir foco automáticamente cuando se carga la página.
Ejemplo
Deje que el campo de entrada "First name" se enfoque automáticamente cuando se cargue la página:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Inténtalo tú mismo »
Los atributos de height y width
Los atributos de entrada height y width especifican la altura y el ancho de un <input type="image"> elemento.
Consejo: Especifique siempre los atributos de alto y ancho de las imágenes. Si se configuran el alto y el ancho, el espacio requerido para la imagen se reserva cuando se carga la página. Sin estos atributos, el navegador no conoce el tamaño de la imagen y no puede reservarle el espacio adecuado. El efecto será que el diseño de la página cambiará durante la carga (mientras se cargan las imágenes).
Ejemplo
Defina una imagen como botón de envío, con atributos de alto y ancho:
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Inténtalo tú mismo »
El atributo de list
El atributo de entrada list se refiere a un elemento <datalist> que contiene opciones predefinidas para un <input> elemento.
Ejemplo
Un elemento <input> con valores predefinidos en una <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Inténtalo tú mismo »
El atributo de autocomplete
El atributo de entrada autocomplete especifica si un formulario o un campo de entrada debe tener la función de autocompletar activada o desactivada.
Autocompletar permite que el navegador prediga el valor. Cuando un usuario comienza a escribir en un campo, el navegador debería mostrar opciones para completar el campo, según los valores escritos anteriormente.
El atributo autocomplete funciona con <form> y el siguiente <input> tipos: text, search, url, tel, email, password, datepickers, range, y color.
Ejemplo
Un formulario HTML con autocompletar activado y desactivado para un campo de entrada:
<form action="/action_page.html" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Inténtalo tú mismo »
Consejo: En algunos navegadores es posible que necesites activar una función de autocompletar para que esto funcione (busca en "Preferences" en el menú del navegador).
HTML Ejercicios
HTML Elementos de formulario y entrada
| Etiqueta | Descripción |
|---|---|
| <form> | Define un formulario HTML para la entrada del usuario |
| <input> | Definir un control de entrada |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
