Atributos de entrada HTML
Este capítulo describe los diferentes atributos para el <input>
elemento HTML.
El atributo de valor
El value
atributo de entrada 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>
El atributo de solo lectura
El readonly
atributo de entrada 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 tabular, 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>
El atributo deshabilitado
El disabled
atributo de entrada especifica que un campo de entrada debe estar deshabilitado.
Un campo de entrada deshabilitado es inutilizable y no se puede hacer clic.
¡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>
El atributo de tamaño
El size
atributo de entrada especifica el ancho visible, en caracteres, de un campo de entrada.
El valor predeterminado para size
es 20.
Nota: el size
atributo 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>
El atributo maxlength
El maxlength
atributo de entrada especifica el número máximo de caracteres permitidos en un campo de entrada.
Nota: Cuando maxlength
se establece a, el campo de entrada no aceptará más que el número de caracteres especificado. Sin embargo, este atributo no proporciona ningún comentario. 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>
Los atributos min y max
La entrada min
y los max
atributos 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.
Sugerencia: use los atributos max y min 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>
El atributo múltiple
El multiple
atributo de entrada especifica que el usuario puede ingresar más de un valor en un campo de entrada.
El multiple
atributo 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>
El atributo del patrón
El pattern
atributo de entrada especifica una expresión regular con la que se comprueba el valor del campo de entrada cuando se envía el formulario.
El pattern
atributo funciona con los siguientes tipos de entrada: texto, fecha, búsqueda, URL, teléfono, correo electrónico y contraseña.
Sugerencia: use el atributo de título global para describir el patrón para ayudar al usuario.
Sugerencia: 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>
El atributo de marcador de posición
El placeholder
atributo de entrada especifica una sugerencia breve que describe el valor esperado de un campo de entrada (un valor de muestra o una descripción breve del formato esperado).
La sugerencia breve se muestra en el campo de entrada antes de que el usuario ingrese un valor.
El placeholder
atributo 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>
El atributo requerido
El required
atributo de entrada especifica que se debe completar un campo de entrada antes de enviar el formulario.
El required
atributo funciona con los siguientes tipos de entrada: texto, búsqueda, URL, teléfono, correo electrónico, contraseña, selectores de fecha, número, casilla de verificación, radio y archivo.
Ejemplo
Un campo de entrada obligatorio:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
El atributo de paso
El step
atributo de entrada especifica los intervalos de números legales para un campo de entrada.
Ejemplo: si paso = "3", los números legales podrían ser -3, 0, 3, 6, etc.
Sugerencia: este atributo se puede usar junto con los atributos máximo y mínimo para crear un rango de valores legales.
El step
atributo 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>
Nota: las restricciones de entrada no son infalibles y JavaScript proporciona muchas formas de agregar entradas ilegales. ¡Para restringir la entrada de forma segura, también debe ser verificada por el receptor (el servidor)!
El atributo de enfoque automático
El autofocus
atributo de entrada especifica que un campo de entrada debe enfocarse automáticamente cuando se carga la página.
Ejemplo
Deje que el campo de entrada "Nombre" 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>
Los atributos de alto y ancho
La entrada height
y los width
atributos especifican la altura y el ancho de un <input
type="image">
elemento.
Sugerencia: especifique siempre los atributos de alto y ancho de las imágenes. Si se establecen alto y 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 el 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>
El atributo de la lista
El list
atributo de entrada hace referencia a un <datalist>
elemento que contiene opciones predefinidas para un elemento <input>.
Ejemplo
Un elemento <input> con valores predefinidos en un <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>
El atributo de autocompletar
El autocomplete
atributo de entrada especifica si un formulario o un campo de entrada debe tener activado o desactivado el autocompletado.
Autocompletar permite que el navegador prediga el valor. Cuando un usuario comienza a escribir en un campo, el navegador debe mostrar opciones para completar el campo, en función de los valores escritos anteriormente.
El autocomplete
atributo funciona con <form>
los siguientes <input>
tipos: texto, búsqueda, URL, teléfono, correo electrónico, contraseña, selectores de fecha, rango y color.
Ejemplo
Un formulario HTML con autocompletado activado y desactivado para un campo de entrada:
<form action="/action_page.php" 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>
Sugerencia: en algunos navegadores, es posible que deba activar una función de autocompletar para que esto funcione (busque en "Preferencias" en el menú del navegador).
Ejercicios HTML
Formulario HTML y elementos de entrada
Tag | Description |
---|---|
<form> | Defines an HTML form for user input |
<input> | Defines an input control |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .