Atributos de entrada en HTML
Atributos de entrada comunes
type
El atributo type especifica el tipo de elemento de entrada, como texto, contraseña, casilla de verificación, botón de radio y más. Determina la apariencia y el comportamiento del campo de entrada. Configurar
Consejo
<input type="password">ocultará los caracteres ingresados por el usuario, mientras que
Consejo
<input type="checkbox">crea una casilla de verificación que se puede activar o desactivar.
name
El atributo name asigna un nombre al elemento de entrada. Se utiliza para identificar el elemento al enviar los datos del formulario al servidor. El atributo name es importante para el procesamiento del lado del servidor y el manejo de datos. Permite acceder al valor del campo de entrada utilizando el nombre como referencia.
value
El atributo value establece el valor inicial del elemento de entrada. Puede estar prellenado con un valor predeterminado o dejarse vacío para que el usuario lo ingrese.
Consejo
<input type="text" value="John Doe">prerrellenaría el campo de texto con el valor "John Doe". El atributo value también se utiliza para especificar el valor de los botones de radio y las casillas de verificación.
placeholder
El atributo placeholder proporciona un texto de sugerencia o ejemplo dentro del campo de entrada. Se muestra cuando el campo de entrada está vacío y desaparece cuando el usuario comienza a escribir. Los marcadores de posición ayudan a guiar a los usuarios sobre qué tipo de información se espera en el campo de entrada.
Consejo
<input type="email" placeholder="Ingrese su correo electrónico">mostraría "Ingrese su correo electrónico" como texto de marcador de posición.
required
El atributo required especifica que el campo de entrada debe completarse antes de enviar el formulario. Si el usuario intenta enviar el formulario sin ingresar un valor en un campo obligatorio, el navegador mostrará un mensaje de error y evitará que se envíe el formulario. Este atributo ayuda a verificar la entrada del usuario y asegura que se proporcione la información requerida.
readonly
El atributo readonly hace que el campo de entrada sea de solo lectura, impidiendo que el usuario cambie su valor. Sin embargo, el valor aún se puede seleccionar y copiar. Los campos de solo lectura son útiles para mostrar valores prellenados o calculados que no deben ser modificados por el usuario. Los datos de los campos de solo lectura aún se envían cuando se envía el formulario.
disabled
El atributo disabled desactiva el elemento de entrada, haciéndolo no cliqueable y no editable. Los campos deshabilitados se muestran en gris y no responden a las interacciones del usuario. No se envían como parte de los datos del formulario. Los campos deshabilitados se utilizan comúnmente cuando ciertos campos de entrada no son aplicables o no deben modificarse según otras condiciones.
Atributos de Validación
min y max
Los atributos min y max establecen los valores mínimos y máximos permitidos para tipos de entrada numéricos, como número, rango y fecha. Estos atributos ayudan a verificar que el valor ingresado por el usuario esté dentro de un rango establecido.
Consejo: Campo de entrada numérica con min y max
<input type="number" min="0" max="100">Si el usuario ingresa un valor fuera de este rango, el formulario no se enviará y el navegador mostrará un mensaje de error.
minlength y maxlength
Los atributos minlength y maxlength establecen la longitud mínima y máxima permitida para tipos de entrada de texto, como texto, correo electrónico y contraseña. Estos atributos limitan el número de caracteres que se pueden ingresar en el campo de entrada.
Consejo: Campo de contraseña con minlength y maxlength
<input type="password" minlength="8" maxlength="20">Si el valor ingresado no cumple con los requisitos de longitud, el formulario no se enviará.
pattern
El atributo pattern establece un patrón de expresión regular que debe coincidir con el valor de entrada. Se utiliza para verificar el formato de los datos ingresados, como direcciones de correo electrónico, números de teléfono o patrones específicos. El patrón se establece utilizando la sintaxis de expresiones regulares.
Consejo: Campo de entrada de correo electrónico con pattern
<input type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}">Si el valor ingresado no coincide con el patrón establecido, el formulario no se enviará y el navegador mostrará un mensaje de error.
step
El atributo step establece los incrementos para tipos de entrada numéricos cuando se utilizan teclas de flecha o controles giratorios. Establece la granularidad de los valores permitidos.
Consejo: Campo de entrada numérica con step
<input type="number" step="0.1">Establecer step="0.1" en un campo de entrada numérica permitirá valores con un decimal, como 0.1, 0.2, 0.3, etc. Establecer step="10" permitirá valores en incrementos de 10, como 10, 20, 30, etc. El atributo step funciona junto con los atributos min y max para controlar el rango y el incremento de los valores permitidos.
Estos atributos de validación proporcionan una forma de verificar y limitar la entrada del usuario en el lado del cliente antes de enviar el formulario. Ayudan a mantener la integridad de los datos, reducen la validación del lado del servidor y dan retroalimentación inmediata al usuario. Al usar estos atributos, puedes crear formularios más robustos y fáciles de usar que guían a los usuarios hacia la entrada de datos válidos y esperados.
Atributos de accesibilidad
autocomplete
El atributo autocomplete indica si el navegador debe completar el campo de entrada basándose en los valores anteriores del usuario. Ayuda a los usuarios a completar formularios más rápido y con mayor precisión, especialmente para información común como nombres, direcciones de correo electrónico y direcciones de envío.
Consejo: Campo de entrada con autocompletado activado
<input type="email" autocomplete="on">Establecer autocomplete="on" activará la función de autocompletado del navegador para el campo de entrada. El navegador sugerirá valores anteriores que coincidan con el tipo y nombre del campo. Los usuarios pueden seleccionar entre las sugerencias, ahorrando tiempo y reduciendo errores tipográficos.
autofocus
El atributo autofocus enfoca el campo de entrada cuando se carga la página. Dirige la atención del usuario a un campo específico, preparándolo para recibir datos. Solo un elemento del formulario puede tener el atributo autofocus por página.
Consejo: Campo de entrada con autofocus
<input type="text" autofocus>Cuando la página se cargue, el cursor se colocará dentro del campo de entrada con el atributo autofocus. Esto es útil para formularios donde se conoce de antemano el campo de entrada principal, como barras de búsqueda o formularios de inicio de sesión.
aria-label y aria-labelledby
Los atributos aria-label y aria-labelledby proporcionan etiquetas accesibles para los elementos de entrada. Ayudan a mejorar la accesibilidad para usuarios con tecnologías de asistencia, como lectores de pantalla.
El atributo aria-label te permite especificar una etiqueta de texto para el campo de entrada que es leída por las tecnologías de asistencia. Es útil cuando la etiqueta visual no es suficiente o cuando no hay una etiqueta visible con el campo de entrada.
Consejo: Campo de entrada con aria-label
<input type="text" aria-label="Buscar">En este ejemplo, las tecnologías de asistencia leerán "Buscar" como la etiqueta del campo de entrada, incluso si no hay una etiqueta visible en la página.
El atributo aria-labelledby, por otro lado, te permite asociar el campo de entrada con un elemento existente en la página que sirve como su etiqueta. El valor de aria-labelledby debe ser el ID del elemento etiquetador.
Consejo: Campo de entrada con aria-labelledby
<label id="etiqueta-nombre">Nombre:</label>
<input type="text" aria-labelledby="etiqueta-nombre">En este caso, las tecnologías de asistencia usarán el contenido de texto del elemento con el ID "etiqueta-nombre" como la etiqueta del campo de entrada.
Al usar estos atributos de accesibilidad, puedes hacer que tus formularios sean más inclusivos y fáciles de usar para personas con discapacidades. Proporcionan contexto e información adicional a las tecnologías de asistencia, ayudando a los usuarios a entender el propósito y la entrada esperada de cada campo del formulario.
Atributos de estilo
size
El atributo size establece el ancho visible del elemento de entrada en caracteres. Cambia el tamaño del campo de entrada sin modificar la longitud real del valor que se puede introducir. El atributo size se utiliza para establecer el tamaño físico del campo de entrada, haciéndolo más grande o más pequeño según el número de caracteres especificado.
Consejo: Campo de entrada con atributo size
<input type="text" size="40">El campo de entrada de texto se mostrará con un ancho que puede contener unos 40 caracteres. Sin embargo, los usuarios aún pueden introducir más caracteres que el tamaño especificado, y el campo de entrada se desplazará horizontalmente para mostrar el contenido adicional.
El atributo size no limita el número de caracteres que se pueden introducir en el campo de entrada. Solo controla el ancho visual del campo. Para limitar la longitud del valor introducido, debes usar el atributo maxlength.
width y height
Los atributos width y height te permiten establecer el ancho y alto del elemento de entrada usando unidades CSS. Estos atributos te dan más control sobre el tamaño y diseño de los campos de entrada dentro de tu formulario.
Consejo: Campo de entrada con atributos width y height
<input type="text" style="width: 200px; height: 30px;">El campo de entrada de texto tendrá un ancho de 200 píxeles y una altura de 30 píxeles. Puedes usar varias unidades CSS, como píxeles (px), porcentajes (%) o ems (em), para establecer los tamaños que desees.
Al usar los atributos width y height, puedes crear campos de entrada con tamaños personalizados que se ajusten bien a tu diseño de formulario. Esto es útil cuando tienes necesidades de diseño específicas o quieres alinear los campos de entrada con otros elementos de la página.
Los atributos width y height deben usarse con el atributo style o un archivo CSS externo para aplicar los tamaños que desees. El atributo style te permite establecer estilos CSS en línea directamente en el elemento de entrada.
style
El atributo style te permite aplicar estilos CSS en línea al elemento de entrada. Ofrece flexibilidad para personalizar la apariencia de los campos de entrada más allá de los atributos básicos.
Con el atributo style, puedes establecer varias propiedades CSS para controlar el estilo visual del campo de entrada. Esto incluye propiedades como colores, fuentes, bordes, relleno y más.
Consejo: Campo de entrada con atributo style
<input type="text" style="border: 2px solid blue; padding: 5px; font-size: 16px; color: #333;">El campo de entrada de texto tendrá un borde azul sólido de 2 píxeles, un relleno de 5 píxeles, un tamaño de fuente de 16 píxeles y un color de texto #333 (gris oscuro). Puedes agregar múltiples propiedades CSS dentro del atributo style, separándolas con punto y coma.
El uso del atributo style te da gran control sobre la presentación visual de tus campos de entrada. Puedes hacer que el estilo de los campos de entrada coincida con el diseño general de tu página web, creando una interfaz de usuario coherente y visualmente atractiva.
Sin embargo, generalmente se recomienda usar archivos CSS externos o etiquetas <style> en la sección <head> de tu documento HTML para aplicar estilos a tus campos de entrada. Este enfoque separa la presentación de la estructura y hace que tu código sea más fácil de mantener y reutilizar.
Al usar estos atributos de estilo, puedes mejorar la apariencia visual de tus campos de entrada, haciéndolos más atractivos y fáciles de usar. Puedes ajustar el tamaño, las dimensiones o aplicar estilos personalizados para crear formularios bien diseñados.