Table of contents
- El atributo value
- El atributo readonly
- El atributo disabled
- El atributo size
- El atributo maxlength
- Los atributos min & max
- El atributo multiple
- El atributo pattern
- El atributo placeholder
- El atributo required
- El atributo step
- El atributo autofocus
- Los atributos height & width
- El atributo list
- El atributo autocomplete
- Resumen
Este capítulo describe los diferentes atributos para el elemento
<input>.
El atributo value
El atributo value especifica un valor inicial para un campo de entrada:
Ejemplo:
El atributo readonly
El atributo 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 tabular, resaltarlo y copiar el texto).
El valor de un campo de entrada de solo lectura se enviará al hacer clic en el botón del formulario.
Ejemplo:
El atributo disabled
El atributo disabled 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 hacer clic en el botón del formulario.
Ejemplo:
El atributo size
El atributo size especifica el ancho visible, en caracteres, de un campo de entrada.
El valor predeterminado para size es 20.
Nota: el atributo
sizefunciona con los siguientes tipos de input:text,search,tel,url,password.
Ejemplo:
El atributo maxlength
El atributo maxlength especifica el número máximo de caracteres permitidos en un campo de entrada.
Nota: cuando se establece una longitud máxima, el campo de entrada no aceptará más de la cantidad de caracteres especificada. Sin embargo, este atributo no proporciona ningún comentario. Entonces, si deseas alertar al usuario, debes escribir código JavaScript.
Ejemplo:
Los atributos min & max
Los atributos 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: number, range, date, datetime-local, month, time y week.
Tip: use los atributos
maxyminjuntos para crear un rango de valores legales.
Ejemplo:
El atributo multiple
El atributo 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: email y file.
Ejemplo:
El atributo pattern
El atributo pattern especifica una expresión regular con la que se comprueba el valor del campo de entrada cuando se envía el formulario.
El atributo pattern funciona con los siguientes tipos: text, date, search, url, tel, email y password.
Sugerencia: use el atributo global
titlepara describir el patrón y ayudar al usuario.
Ejemplo:
El atributo placeholder
El atributo placeholder especifica una sugerencia breve que describe el valor esperado de un campo de entrada.
La sugerencia breve se muestra en el campo de entrada antes de que el usuario ingrese un valor.
El atributo placeholder funciona con los siguientes tipos: text, search, url, tel, email y password.
Ejemplo:
El atributo required
El atributo required especifica que se debe completar un campo de entrada antes de enviar el formulario.
El atributo required funciona con los siguientes tipos:text, search, url, tel, email, password, date, number, checkbox, radio y file.
Ejemplo:
El atributo step
El atributo step especifica los intervalos de números legales para un campo de entrada.
Ejemplo: step = "3", los números legales podrían ser -3, 0, 3, 6, etc.
Sugerencia: este atributo se puede usar junto con los atributos
maxyminpara crear un rango de valores legales.
El atributo step funciona con los siguientes tipos: number, range, date, datetime-local, month, time y week.
Ejemplo:
El atributo autofocus
El atributo autofocus especifica que un campo de entrada debe enfocarse automáticamente cuando se carga la página.
Ejemplo:
Los atributos height & width
Los atributos height y width especifican el alto y ancho de un elemento <input type="image">.
Sugerencia: siempre especifique los atributos
heightywidtha las imágenes. Si se establece el 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:
El atributo list
El atributo list hace referencia a un elemento <datalist> que contiene opciones predefinidas para un elemento <input>.
Ejemplo:
El atributo autocomplete
El atributo 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 debe mostrar opciones para completar el campo, en función de los valores escritos anteriormente.
El atributo autocomplete funciona con <form> y los siguientes tipos: text, search, url, tel, email, password, date, range y color.
Ejemplo:
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).
Resumen
Hemos hecho un largo recorrido sobre los atributos del elemento input, para conocer cuáles aplicar de acuerdo al propósito que queramos darle a nuestro documento HTML.
Traducido con 💚 desde W3Schools.com