En esta lección y en la lección Formularios (1) se comentan las etiquetas relacionadas con los formularios
En esta lección se comentan las etiquetas y atributos menos utilizados.
Atributos comunes de los controles
Algunos atributos se pueden utilizar en varios tipos de controles.
Falta comentar algunos atributos como autocomplete, height, list, pattern, title, width.
El atributo disabled
El atributo disabled permite deshabilitar el control. Una vez deshabilitado, el control ni siquiera puede coger el foco.
<input type="submit" value="Enviar" disabled>
<input type="text" name="texto" disabled>
El atributo readonly
El atributo readonly hace que el control no sea modificable, aunque el control puede coger el foco.
<input type="text" name="texto" value="¡A que no me cambias!" readonly>
<input type="text" name="texto" placeholder="¡A que no me cambias!" readonly>
El atributo tabindex
El atributo tabindex permite controlar el orden en que el foco pasa de un elemento a otro mediante el tabulador (Tab para avanzar y Shift+Tab para retroceder). Los valores de tabindex pueden ser números naturales (incluido el cero), no necesariamente consecutivos. Si no está presente, los controles se visitan en el orden en que aparecen en el texto. Si está presente, los controles se visitan de menor a mayor.
El atributo accesskey establece la tecla que coloca el foco en un elemento de un formulario, pero los navegadores Google Chrome y Firefox no utilizan los mismos atajos de teclado, como se comenta en la lección de diferencias entre navegadores.
Firefox utiliza la combinación Alt+Shift+tecla
Google Chrome utilizan normalmente la combinación Alt+tecla, pero cuando esa combinación ya está asociada a alguna acción usa la combinación Alt+Shift+tecla
En el ejemplo siguiente Firefox utiliza la combinación Alt+Shift+tecla para situar el cursor en las cajas de texto, mientras que Google Chrome utiliza la combinación Alt+tecla:
<input type="text" name="texto1" placeholder="Acceso con a" accesskey="a">
<input type="text" name="texto2" placeholder="Acceso con i" accesskey="i">
<input type="text" name="texto3" placeholder="Acceso con o" accesskey="o">
<input type="text" name="texto4" placeholder="Acceso con u" accesskey="u">
Chrome utiliza la combinación Alt+tecla, que tiene el inconveniente que entra en conflicto con combinaciones de teclas ya definidas por el navegador o el sistema operativo. Firefox utiliza la combinación Alt+Shift+tecla, más incómoda de utilizar, pero que no interfiere con las combinaciones ya definidas por el navegador o el sistema operativo.
En el ejemplo siguiente, Chrome no puede acceder a la caja de texto con la combinación Alt+d, ya que esta combinación traslada el foco a la barra de dirección, pero pueden hacerlo con la combinación Alt+Shift+d:
<input type="text" name="texto1" placeholder="Acceso con d" accesskey="d">
En el ejemplo siguiente, Chrome no puede acceder a la caja de texto con la combinación Alt+e, ya que esta combinación abre el menú de herramientas, pero puede hacerlo con la combinación Alt+Shift+e:
<input type="text" name="texto2" placeholder="Acceso con e" accesskey="e">
En el caso de las teclas de acceso que no son las letras del alfabeto (los acentos no pueden ser teclas de acceso):
Firefox utiliza la combinación Alt+Shift+tecla
Chrome utiliza la combinación Alt+tecla
<input type="text" name="texto1" placeholder="Acceso con 1" accesskey="1">
<input type="text" name="texto2" placeholder="Acceso con 2" accesskey="2">
<input type="text" name="texto3" placeholder="Acceso con 3" accesskey="3">
<input type="text" name="texto4" placeholder="Acceso con 4" accesskey="4">
<input type="text" name="texto1" placeholder="Acceso con ," accesskey=",">
<input type="text" name="texto2" placeholder="Acceso con ." accesskey=".">
<input type="text" name="texto3" placeholder="Acceso con +" accesskey="+">
Si hay varios elementos con la misma tecla de acceso, o si hay varios elementos con la misma tecla de acceso en mayúsculas y minúsculas:
Google Chrome no avanza de uno a otro
Firefox avanza de uno a otro con la combinación Alt+Shift+tecla
<input type="text" name="texto1" placeholder="Acceso con z" accesskey="z">
<input type="text" name="texto2" placeholder="Acceso con z" accesskey="z">
<input type="text" name="texto3" placeholder="Acceso con z" accesskey="z">
<input type="text" name="texto1" placeholder="Acceso con w" accesskey="w">
<input type="text" name="texto2" placeholder="Acceso con W" accesskey="W">
<input type="text" name="texto3" placeholder="Acceso con W" accesskey="W">
Controles: <input> y otros
Los controles son los elementos que permiten al usuario introducir información.
La mayoría de controles se obtienen mediante mediante la etiqueta vacía <input>, pero algunos tienen su etiqueta específica.
Lista de opciones: <datalist>
La lista de opciones <datalist> es un control invisible. Su papel es suministrar a otros controles una lista de opciones predeterminadas que esos controles pueden aprovechar.
Cada lista se identifica con un atributo id y cada control que quiera utilizar una lista debe incluir un atributo list con el valor del atributo id correpondiente.
Cada opción de la lista de opciones se escribe como un elemento <option>. El texto que corresponde a la opción puede escribirse como contenido del elemento <option> o como atributo value del elemento <option>.
En el caso de las cajas de texto, las opciones disponibles se muestran al hacer clic en la propia caja o al empezar a escribir si el texto coincid.
<p>
Escriba su color favorito:
<input type="text" name="favorito" list="colores">
</p>
<datalist id="colores">
<option>marrón</option>
<option>morado</option>
<option>naranja</option>
<option>rosa</option>
</datalist>
En el caso de las cajas de fechas, Firefox muestra las opciones del <datalist> porque las trata como cajas de texto, pero Chrome, que sí muestra un interfaz especial para seleccionar el mes y el año, no admite las opciones del <datalist>.
<p>
Indique su mes favorito:
<input type="month" name="favorito" list="meses">
</p>
<datalist id="meses">
<option value="junio"></option>
<option value="julio"></option>
<option value="agosto"></option>
</datalist>
En el caso del selector de color, si el color está expresado en formato RGB, tanto Firefox como Chrome muestran las opciones del <datalist>.
Firefox admite todos los formatos de color en la lista de opciones, pero Chrome sólo admite el formato RGB, como se comenta en la página de diferencias entre navegadores. En cualquier caso, el control envía el color en formato RGB.
En el caso del selector de rango, las opciones del datalist añaden marcas al control en las posiciones correspondientes.
Indique su nivel (de 0 a 6):
<input type="range" name="rango"
min="0" max="10" list="lista-rango">
<datalist id="lista-rango">
<option value="0">
<option value="1">
<option value="5">
<option value="6">
</datalist>
Si el elemento datalist contiene elementos option con atributos label, el control debería mostrar esas etiquetas en las posiciones de las marcas, pero actualmente (diciembre de 2025), ni Chrome ni Firefox lo hacen:
Los botones de tipo button se crean mediante la etiqueta <input> o mediante la etiqueta <button>. La diferencia entre ellos es que <input> sólo puede contener texto, mientras que <button> permite incluir elementos html como imágenes.
El contenido del botón <input> se define mediante el atributo value, por lo que sólo puede contener texto.
<input type="button" value="Este botón no hace nada">
El contenido del botón <button> se escribe dentro del elemento, por lo que puede incluir texto e imágenes.
<button type="button">
<img src="cdlibre.png" alt="cdlibre.org" width="32" height="32" style="vertical-align: middle">
Este botón no hace nada
</button>
Un botón de tipo button se suele asociar a un script.
<input type="button" onclick="mensaje('Ha pulsado el botón')" value="Botón">
<script>
function mensaje(texto) {
alert(texto);
}
</script>
La recomendación HTML 5 aclara que la diferencia entre text y search es únicamente de estilo y que el cuadro de búsqueda debería tener el estilo de los cuadros de búsqueda del sistema utilizado.
Teléfono: <input type="tel">
Las cajas de texto de una sola línea específicas para números de teléfonos se crean mediante una etiqueta <input> cuyo atributo type tiene el valor tel.
Teléfono: <input type="tel" name="telefono">
La recomendación HTML 5 aclara que los formatos de números de teléfono siguen formatos tan variados que este control no obliga a utilizar ninguna sintaxis en particular.
En los teléfonos móviles, al escribir en una caja de texto de tipo tel se muestra un teclado numérico.
URL: <input type="url">
Las cajas de texto de una sola línea específicas para direcciones web (URL) se crean mediante una etiqueta <input> cuyo atributo type tiene el valor url.
Actualmente (diciembre de 2025), los navegadores sólo comprueban que el texto escrito empiece por http: o https:, pero no obligan a que las URL sean sintácticamente válidas.
En los teléfonos móviles, al escribir en una caja de texto de tipo url se adapta ligeramente el teclado de texto, mostrándose el carácter /.
Dirección de correo electrónico: <input type="email">
Las cajas de texto de una sola línea específicas para direcciones de correo electrónico se crean mediante una etiqueta <input> cuyo atributo type tiene el valor email.
Actualmente (diciembre de 2025), los navegadores sólo comprueban que el texto escrito contenga una arroba @ y no contengan caracteres no permitidos, pero no obliga a que las direcciones sean válidas.
En los teléfonos móviles, al escribir en una caja de texto de tipo email se adapta ligeramente el teclado de texto, mostrándose el carácter @.
Mes: <input type="month">
Las cajas de texto de una sola línea específicas para meses (y años) se crean mediante una etiqueta <input> cuyo atributo type tiene el valor month. El dato se envía con el formato AAAA-MM donde AAAA es el número de año y MM el número de mes.
Mes: <input type="month" name="mes">
Nota: Firefox no muestra un control específico para seleccionar el mes y el año, ni envía el dato en el formato AAAA-MM, como se comenta en la lección de diferencias entre navegadores.
Semana: <input type="week">
Las cajas de texto de una sola línea específicas para semanas (y años) se crean mediante una etiqueta <input> cuyo atributo type tiene el valor week. El dato se envía con el formato AAAA-WSS donde AAAA es el número de año y SS el número de semana.
Semana: <input type="week" name="semana">
Nota: Firefox no muestra un control específico para seleccionar la semana y el año, ni envía el dato en el formato AAAA-WSS, como se comenta en la lección de diferencias entre navegadores.
Fecha y hora: <input type="datetime-local">
Las cajas de texto de una sola línea específicas para fechas (días, meses, años, horas y minutos) se crean mediante una etiqueta <input> cuyo atributo type tiene el valor datetime-local. El dato se envía con el formato AAAA-MM-DDTHH-MM donde AAAA es el número de año, MM el número de mes, DD el número de día, HH son las horas y MM los minutos.
Fecha y hora: <input type="datetime-local" name="fechaHora">
Medidor: <meter>
El control de tipo medidor inserta una imagen de un indicador que muestra gráficamente un valor en una escala. El texto que se escriba dentro de la etiqueta sólo se muestra si el navegador no puede mostrar el indicador. Aunque la etiqueta <meter> se incluye en las etiquetas relacionadas con formularios, este control NO se envía al enviar un formulario.
La escala se define con los atributos min y max y el valor a representar con el atributo value. Los valores tienen que estar ordenados: min ≤ value ≤ max. Si solo se utilizan estos atributos, el color del indicador es siempre el mismo, independientemente del valor (normalmente, verde).
<p>Medidor: <meter min="0" max="100" value="10">Valor: 10 de 100</meter></p>
<p>Medidor: <meter min="0" max="100" value="50">Valor: 50 de 100</meter></p>
<p>Medidor: <meter min="0" max="100" value="90">Valor: 90 de 100</meter></p>
La escala se puede dividir en tres partes añadiendo dos valores intermedios mediante los atributos low y high. Los valores tienen que estar ordenados: min ≤ low ≤ high ≤ max El indicador se muestra de un color (normalmente, verde) si el valor value se encuentra en el tramo central (entre low y high) y de otro color (normalmente, amarillo) si el valor se encuentra en uno de los tramos laterales (por debajo de low o por encima de high).
<p>Medidor: <meter min="0" low="30" high="70" max="100" value="20">Valor: 20 de 100</meter></p>
<p>Medidor: <meter min="0" low="30" high="70" max="100" value="50">Valor: 50 de 100</meter></p>
<p>Medidor: <meter min="0" low="30" high="70" max="100" value="80">Valor: 80 de 100</meter></p>
En la escala se puede añadir el atributo optimum que puede estar en cualquiera de los tres tramos (central o laterales). En ese caso el indicador se muestra de un color (normalmente, verde) si el valor value se encuentra en el mismo tramo en el que se encuentra el valor optimum, de otro color (normalmente, amarillo) si el valor value se encuentra en el tramo contiguo y de otro color (normalmente, rojo) si el valor value se encuentra a dos tramos.
En el ejemplo siguiente, el valor del atributo optimum se encuentra en el primer tramo (min ≤ optimum ≤ low).
El control de tipo barra de progreso inserta una imagen de una barra que muestra gráficamente un valor en una escala. El texto que se escriba dentro de la etiqueta sólo se muestra si el navegador no puede mostrar la barra. Aunque la etiqueta <progress> se incluye en las etiquetas relacionadas con formularios, este control NO se envía al enviar un formulario.
Si la barra de progreso no tiene establecida ningún atributo se dice que la barra está en estado indeterminado, que normalmente se muestra con un indicador en movimiento continuo.
<p>
Barra de progreso indeterminada:
<progress>Valor indeterminado</progress>
</p>
La escala se define con el atributo max y el valor a representar con el atributo value. Los valores tienen que estar ordenados: value ≤ max.
<p>Progreso: <progress max="100" value="20">Valor: 20 de 100</progress></p>
<p>Progreso: <progress max="100" value="50">Valor: 50 de 100</progress></p>
<p>Progreso: <progress max="100" value="80">Valor: 80 de 100</progress></p>
Salida: <output>
El control de tipo salida está pensado para mostrar el resultado de un cálculo efectuado con JavaScript o por la acción del usuario. Aunque la etiqueta <output> se incluye en las etiquetas relacionadas con formularios, este control NO se envía al enviar un formulario.
El atributo for permite indicar explícitamente los controles cuyos valores intervienen en el cálculo. Este atributo no es obligatorio ni se utiliza para el cálculo.
El ejemplo siguiente muestra en un elemento <output> la suma de los valores contenidos por dos controles numéricos. El cálculo se hace mediante JavaScript que se ha incluido en el atributo oninput de la etiqueta <form>, que hace que el cálculo se actualice cada vez que se modifica alguno de los controles del formulario. El valor inicial del elemento <output> se hace mediante JavaScript que se ha incluido en el atributo onload de la etiqueta <body>, que hace que el cálculo se actualice al cargar la página. El formulario incluye el atributo onsubmit con el valor return false para que el formulario no se envíe en ningún caso.
La etiqueta <label> permite asociar un control con un texto, de manera que mejore la accesibilidad de los formularios.
La asociación entre el control y la etiqueta <label> puede ser implícita o explícita.
Relación implícita
Se dice que la relación es implícita cuando el control se encuentra en el interior de la etiqueta.
Por ejemplo, en el caso de una casilla de verificación, la etiqueta <label> permite que la casilla se marque o desmarque haciendo clic en el texto, como se muestra en los ejemplos siguientes:
En el caso de la cajas de texto <input type="text">, la etiqueta <label> permite que el cursor se sitúe en la caja de texto haciendo clic en el texto, como se muestra en los ejemplos siguientes:
Se dice que la relación es explícita cuando la etiqueta <label> contiene el atributo for, que indica el control afectado (el control tiene entonces que tener establecido el atributo id).
Por ejemplo, en el caso de una casilla de verificación, la etiqueta <label> permite que la casilla se marque o desmarque haciendo clic en el texto, como se muestra en los ejemplos siguientes:
En el caso de la cajas de texto <input type="text">, la etiqueta <label> permite que el cursor se sitúe en la caja de texto haciendo clic en el texto, como se muestra en los ejemplos siguientes:
La forma explícita se necesita cuando el control y el texto asociado se encuentran en elementos distintos (por ejemplo en una tabla) y la etiqueta <label> no puede incluir ambos, como muestra el ejemplo siguiente:
Falta comentar algunos atributos como autocomplete, height, list, pattern, title, width.
