Formularios (2)

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.

¡Atención!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>
ERROR (no puede mostrarse el objeto)
Enlace externo
<input type="text" name="texto" disabled>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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">
ERROR (no puede mostrarse el objeto)
Enlace externo
<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">
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

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">
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores

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">
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores

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">
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores

En el caso de las teclas de acceso que no son las letras del alfabeto (los acentos no pueden ser teclas de acceso):

<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">
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores
<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="+">
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores

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:

<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">
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores
<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">
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores

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

¡Atención!Falta comentar algunos controles HTML 5 como <datalist>, <meter>, <output> y <progress>.

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">
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
  
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo
<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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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">
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

Incorrecto en Chrome Incorrecto en Firefox
URL: <input type="url" name="direccion" size="40">
ERROR (no puede mostrarse el objeto)
Enlace externo

Actualmente (noviembre de 2021), 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">
ERROR (no puede mostrarse el objeto)
Enlace externo

Actualmente (noviembre de 2021), 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.

Correcto en Chrome Incorrecto en Firefox
Mes: <input type="month" name="mes">
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores

Nota: Firefox no muestra 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.

Correcto en Chrome Incorrecto en Firefox
Semana: <input type="week" name="semana">
ERROR (no puede mostrarse el objeto)
Enlace externo Diferencias entre navegadores

Nota: Firefox no muestra 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">
ERROR (no puede mostrarse el objeto)
Enlace externo

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">
ERROR (no puede mostrarse el objeto)
Enlace externo

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.

Incorrecto en Chrome Incorrecto en Firefox
<input type="file" name="archivo" value="image/*">
ERROR (no puede mostrarse el objeto)
Enlace externo

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. Es importante recordar que esta obligatoriedad no existe en el caso de la etiqueta de imagen <img>, en la que este atributo está aconsejado, pero no es obligatorio.

<input type="image" name="diana" src="diana.svg" alt="Diana">
ERROR (no puede mostrarse el objeto)
Enlace externo

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">
ERROR (no puede mostrarse el objeto)
Enlace externo

Grupos de controles: <fieldset>

La etiqueta <fieldset> permite agrupar un conjunto de controles. Los navegadores muestran una caja alrededor de cada grupo de controles.

La etiqueta <legend> permite añadir una leyenda al <fieldset>. Los navegadores muestran la leyenda sobre el borde que rodea el grupo de controles.

<fieldset>
  <legend>Datos personales</legend>
  <p>Nombre: <input type="text" name="nombre" size="30"></p>
  <p>Edad: <input type="number" name="edad"></p>
</fieldset>

<fieldset>
  <legend>Cultura general</legend>
  <p>Capital de Noruega:
    <input type="radio" name="p1" value="1"> Copenhague
    <input type="radio" name="p1" value="2"> Helsinki
    <input type="radio" name="p1" value="3"> Oslo
  </p>
  <p>Fecha de la Revolución francesa:
    <input type="radio" name="p2" value="1"> 1492
    <input type="radio" name="p2" value="2"> 1789
    <input type="radio" name="p2" value="3"> 1917
  </p>
</fieldset>
ERROR (no puede mostrarse el objeto)
Enlace externo

Sólo puede haber una etiqueta <legend>.

Nota:

Accesibilidad: <label>

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:

<input type="checkbox" name="casilla">Casilla 1
ERROR (no puede mostrarse el objeto)
Enlace externo
<label><input type="checkbox" name="casilla">Casilla 1</label>
ERROR (no puede mostrarse el objeto)
Enlace externo

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:

Nombre: <input type="text" name="casilla">
ERROR (no puede mostrarse el objeto)
Enlace externo
<label>Nombre: <input type="text" name="casilla"></label>
ERROR (no puede mostrarse el objeto)
Enlace externo

Relación explícita: el atributo for

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:

<input type="checkbox" name="casilla">Casilla 1
ERROR (no puede mostrarse el objeto)
Enlace externo
<input type="checkbox" name="casilla" id="casilla1">
<label for="casilla1">Casilla 1</label>
ERROR (no puede mostrarse el objeto)
Enlace externo

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:

Nombre: <input type="text" name="casilla">
ERROR (no puede mostrarse el objeto)
Enlace externo
<label for="text1">Nombre:</label>
<input type="text" name="casilla" id="text1">
ERROR (no puede mostrarse el objeto)
Enlace externo

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:

<table>
  <tbody>
    <tr>
      <th>Sexo</th>
      <th></th>
    </tr>
    <tr>
      <td><input type="radio" name="hm" value="h" id="h"></td>
      <td><label for="h">Hombre</label></td>
    </tr>
    <tr>
      <td><input type="radio" name="hm" value="m" id="m"></td>
      <td><label for="m">Mujer</label></td>
    </tr>
  </tbody>
</table>
ERROR (no puede mostrarse el objeto)
Enlace externo