La función de autocompletar es ahora una característica muy popular en Internet. Al escribir algo en un campo de formulario, los navegadores ofrecen una lista de palabras sugeridas si la función se ha activado y es compatible con el navegador.
Este tipo de aplicaciones pueden implementarse ahora muy fácilmente. Para ello, asigne el atributo autocompletar al elemento de entrada.
<input type="text" autocompletar="on" />
El valor on activa autocompletar para el campo. A partir de este momento, el navegador recuerda los valores introducidos en el campo y los ofrece posteriormente a través de una lista de selección. De este modo, los formularios pueden completarse mucho más rápidamente.
Sin embargo, este comportamiento no es el deseado para todos los campos. En tales casos, la función de autocompletar puede desactivarse explícitamente. Para ello, asigne el valor desactivado al atributo autocompletar.
<input type="text" autocomplete="off" />
Alternativamente, también puede añadir el atributo autocompletar al elemento formulario. Dependiendo de si se utiliza aquí el valor on u off, la función autocompletar se activa o desactiva para todo el formulario.
<form autocompletar="on"> ... </form>
Sin embargo, si se realizan especificaciones contrarias dentro del formulario, éstas se aplican.
<form autocomplete="on"> Nombre: <input type="text" name="vname" autocomplete="off" /><br /> Nombre: <input type="text" name="nname" /><br /> Código postal: <input type="text" name="plz" /><br /> Ciudad: <input type="text" name="ort" /> </form>
En este ejemplo, autocompletar se aplicaría a todos los campos del formulario, ya que el valor de autocompletar se estableció en on en el elemento introductorio del formulario. La única excepción es el campo vname. Esto se debe a que autocompletar se ha desactivado explícitamente para este campo.
Para que la función de autocompletar funcione, debe ser compatible con el navegador correspondiente y no debe estar desactivada. Además, en la lista de sugerencias sólo se muestran los valores que ya se han introducido una vez.
El elemento datalist se introdujo con HTML5 para poder influir realmente en los valores de la lista de sugerencias. Este elemento no produce ninguna salida visible en el navegador. Los valores de las listas de sugerencias pueden definirse mediante los elementos de opción subordinados. Un ejemplo:
<div> Idioma: <br /> <input type="text" autocomplete="on" list="language" /> </div> <datalist id="language"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
El atributo list del elemento input se utiliza para crear una conexión lógica entre el campo input y el elemento datalist. Para ello, se deben utilizar los mismos valores para list y el atributo id del elemento datalist.
Establecer el foco
El foco puede asignarse automáticamente a un campo de formulario al abrir la página. Reconocerá esta función, por ejemplo, en la página de inicio de Google. Si se accede a esta página, puede escribir inmediatamente el término de búsqueda sin tener que colocar manualmente el cursor en el campo de búsqueda/entrada.
En HTML5, existe el atributo autofocus para estos casos. Este atributo garantiza que el campo de formulario equipado con él reciba automáticamente el foco cuando se carga la página.
Un ejemplo:
<form> <input name="campo de búsqueda" autofocus="autofocus" /> <input type="submit" value="search" /> </form>
Los navegadores que no reconocen el atributo autofocus simplemente lo ignoran. Esta omisión no tiene efectos negativos. (Sin embargo, el campo no estará enfocado).
Comprobación de entradas
Hasta ahora, no era posible comprobar las entradas de los formularios utilizando únicamente las herramientas HTML. Por ejemplo, si se quería comprobar si un usuario había introducido realmente una dirección de correo electrónico en un campo de formulario, normalmente había que utilizar JavaScript o PHP. En HTML5, ya no son necesarias esas "contorsiones". HTML dispone ahora de una API de validación. Y tiene mucho que ofrecer. Ahora se pueden comprobar las entradas de los formularios con muy poco esfuerzo.
HTML5 tiene una serie de reglas que determinan cómo se validan los campos. Por ejemplo, los campos de entrada de tipo email se comprueban para ver si se ha introducido una dirección de correo electrónico sintácticamente correcta.
- url - Comprueba la URL
- email - Comprueba la dirección de correo electrónico
- range - Comprueba si se trata de un número en coma flotante
- number - Comprueba el número en coma flotante
Para marcar un campo como obligatorio, se le asigna el atributo required.
<input id="vname" name="vname" type="text" required="requerido" />
Un campo etiquetado con este atributo debe rellenarse obligatoriamente, es decir, no debe estar vacío.
Pero cuidado: deben cumplirse ciertos requisitos para que los campos sean validados.
- El atributo name debe estar asignado al elemento.
- El elemento debe estar situado dentro de un elemento de formulario, es decir, en un formulario HTML. Alternativamente, la conexión con el formulario también puede establecerse a través del atributo form.
- El elemento no debe tener el atributo readonly o disabled.
Una aplicación correcta tendría el siguiente aspecto
<form action="form.php"> <input id="vname" name="vname" type="text" required="requerido" /> <input type="submit" /> </form>
Aquí el navegador comprobaría si el campo ha sido rellenado. Si el campo está vacío y se sigue intentando enviar el formulario, el navegador debería mostrar un mensaje de error.
Los tipos de campo de formulario email, rango, número, tel y url ya se han mencionado varias veces en esta serie. Estos campos no sólo se comprueban para ver si contienen un valor, sino también si el valor introducido es correcto.
<form action="form.php"> <input id="email" name="email" type="email" /> <input type="submit" /> </form>
Para los campos de tipo email, por ejemplo, el sistema comprueba si el valor introducido es realmente una dirección de correo electrónico sintácticamente correcta. Si no es así, el navegador muestra un mensaje de error.
El navegador es responsable de mostrar el mensaje de error.
No hacer que los campos se comprueben automáticamente
La validación automática de las entradas no siempre es deseable. Si desea evitar la validación de todo el formulario, asigne el atributo novalidate al elemento introductorio del formulario.
<form action="form.php" novalidate> <input id="email" name="email" type="email" /> <input type="submit" /> </form>
Alternativamente, el atributo formnovalidate se puede añadir a un botón de envío. Esto es interesante, por ejemplo, si se ofrece un botón para guardar temporalmente el formulario en paralelo a un botón de envío.
<form action="form.cgi" method="post"> <input id="email" name="email" type="email" /> <input type="submit" name="submit" value="Enviar" /> <input type="submit" formnovalidate="formnovalidate" value="Guardar" /> <input type="submit" formnovalidate="formnovalidate" value="Salir" /> </form>
En este caso, el formulario sólo se valida a través del primer botón de envío. Los otros dos se utilizan para guardar y cerrar la sesión. La validación no es necesaria en estos casos.
