Formularios (2)

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.

<input type="text" name="texto1" placeholder="Texto 1">
<input type="text" name="texto2" placeholder="Texto 2">
<input type="text" name="texto3" placeholder="Texto 3">
<input type="text" name="texto4" placeholder="Texto 4">

<input type="text" name="texto1" placeholder="Texto 1" tabindex="5">
<input type="text" name="texto2" placeholder="Texto 2" tabindex="8">
<input type="text" name="texto3" placeholder="Texto 3" tabindex="7">
<input type="text" name="texto4" placeholder="Texto 4" tabindex="6">

El atributo accesskey

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">

Botón general mediante <input> o <button>

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>

<button type="button" onclick="mensaje('Ha pulsado el botón')">
  <img src="info.svg" alt="imagen" width="32" height="32" style="vertical-align: middle">
  Botón
</button>

<script>
  function mensaje(texto) {
    alert(texto);
  }
</script>

Búsqueda: <input type="search">

Las cajas de texto de una sola línea específicas para búsquedas se crean mediante una etiqueta <input> cuyo atributo type tiene el valor search.

Búsqueda: <input type="search" name="busqueda" size="40">

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.

URL: <input type="url" name="direccion" size="40">

Actualmente (octubre de 2022), 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.

Correo: <input type="email" name="correo" size="40">

Actualmente (octubre de 2022), 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, 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, 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">

Selector de archivo: <input type="file">

El selector de archivo se crea mediante una etiqueta <input> cuyo atributo type tiene el valor file.

<input type="file" name="archivo">

Tradicionalmente, los navegadores no han admitido el atributo value en el selector de archivo por motivos de seguridad, ya que podría utilizarse para "robar" ficheros al usuario sin su autorización. La recomendación HTML 5 indica que el atributo value se puede utilizar para seleccionar selectores de archivos distintos al general, pero los navegadores no parecen utilizar este atributo.

<input type="file" name="archivo" value="image/*">

Imagen: <input type="image">

El control de tipo imagen inserta una imagen que funciona como un botón (aunque los navegadores no le dan relieve como a los botones). Al hacer clic en un punto de la imagen se envía el formulario (como si se hubiera pulsado un botón submit) y se envían las coordenadas del punto en el que se ha hecho clic (junto con los valores de los otros controles del formulario).

Este control debe incluir siempre el atributo alt (con un valor no vacío), para indicar el texto que deben mostrar los navegadores si la imagen no está disponible.

<input type="image" name="diana" src="diana.svg" alt="Diana">

El ejemplo siguiente es un pequeño juego en el que se utilizan las coordenadas recibidas para calcular si el usuario ha hecho clic en el punto negro del dibujo.

<input type="image" name="punto" src="punto.svg" alt="Punto">