Atributos en Formularios HTML5

Para poder visualizar correctamente es necesario un navegador que soporte HTML5. Prueba instalando Firefox, Chrome o Safari (recomendados) si tu navegador no es compatible.

Cuando eres un desarrollador web, mediar con formularios es algo imprescindible, algo que toca hacer día sí y día también. A pesar de que hace tiempo que se publicó la versión 5 de HTML, muchos de nosotros continuamos haciendo los formularios a la vieja usanza, dejando de lado muchísimas novedades futuras.

En este artículo veremos los nuevos atributos de formularios en HTML5, mientras que en un futuro artículo hablaremos de los nuevos tipos de input. Allá vamos:

Atributos principales

placeholder

¿Sabéis ese texto que está en un input y que al pinchar sobre él se elimina? En HTML4 hacía falta JavaScript y la utilización del atributo value, ahora no hace falta más que declarar placeholder con el texto deseado.

Veamos un ejemplo sencillo:

<input type="text" placeholder="Ingrese su nombre de usuario.">
<input type="password" placeholder="Ingrese su contraseña.">

Este atributo es soportado por todos los navegadores modernos, y funcionará aún teniendo JavaScript desactivado. Los navegadores más viejos lo ignorarán y no mostrarán nada.

autofocus

Al colocar este atributo en un campo este será seleccionado automáticamente al cargar la página. Al igual que el atributo anterior, esto también se hace antes con JavaScript, pero ahora tenemos la ventaja de que nada más cargar el formulario se ejecutará, y no tendremos que esperar a que la página termine de cargar como estábamos acostumbrados.

Es un atributo boolean, es decir, solo se tendrá en cuenta si está presente o no. Podemos definirlo de los siguientes modos:

<input type="text" autofocus>
<input type="text" autofocus="">
<input type="text" autofocus="autofocus">

Puedes ver aquí un ejemplo.

autocomplete

Mediante este atributo podemos hacer que el navegador vuelva a pedir un campo siempre. Es decir, después de enviar un formulario, el navegador recordará los campos de ese formulario la siguiente vez que vayamos a enviarlo. Nosotros podemos hacer que no los recuerde, ya que este atributo siempre está en on.

Funciona del siguiente modo:

<input type="text" autocomplete="off">

required

Atributo boolean. Al definirlo el navegador hará que un campo de formulario sea obligatorio de rellenar. Funciona en Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 y Chrome 5+.

Importante: recuerda siempre que este tipo de medidas son muy básicas, y además de su poca compatibilidad con navegadores viejos, es muy fácil bypassearlas. Haz siempre la comprobación de los formularios en el lado del servidor, sin excepción alguna.

Tiene un uso muy simple:

<input type="text" required>

Para darle estilos a los campos con este atributo podemos utilizar la pseudoclase CSS :required, del siguiente modo:

input:required {
	/* Estilos. */
}

Para dar estilos a la burbuja de notificación utilizaremos las siguientes clases, aunque lamentablemente solo están disponibles con webkit.

::-webkit-validation-bubble {}
::-webkit-validation-bubble-arrow-clipper {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-message {}

pattern

Tal como se indica en el nombre, con este atributo podemos darle a un campo una expresión regular de forma que muestre una alerta si no se cumple. Por ejemplo:

<input type="text" pattern="([0-9]{3}( ){0,1}){3}">

Al ejecutar ese código nos pedirá un número de 9 cifras, bien con espacios cada tres números o sin ellos.

Al igual que required, funciona en Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 y Chrome 5+. Deberéis hacer la comprobación también del lado del servidor.

Atributo list y elemento datalist

Mediante la combinación de estos dos elementos podremos mostrar opciones mientras se escribe dentro de un campo de texto. Veamos un ejemplo con marcas de coches. Para empezar crearemos una lista de los nombres con datalist.

<datalist id="cars">
	<option value="BMW">BMW</option>
	<option value="Audi">Audi</option>
	<option value="Mercedes">Mercedes</option>
	<option value="Seat">Seat</option>
	<option value="Renault">Renault</option>
	<option value="Citroen">Citröen</option>
	<!-- etc. -->
</datalist>

Ahora aplicaremos la lista en un input mediante el atributo list.

<input type="text" list="cars">

Nos dará como resultado algo como lo siguiente (probad escribiendo la primera letra de cada marca).

multiple

Se utiliza principalmente para permitir la subida de varios archivos a la vez mediante un inputfile.

<form action="process.php" method="post" enctype="multipart/form-data">
	<input type="file" value="" name="upload[]" multiple>
	<button type="submit">Subir Archivo</button>
</form>

formnovalidate y novalidate

Al utilizar estos atributos el formulario no será validado (ojo, sí que se enviará), por lo tanto los atributos required y pattern quedarán inutilizados, así como los nuevos campos introducidos. formnovalidate solo es aplicable a campos sueltos, mientras que novalidate solo puede usarse en el elemento form.

<form action="process.php" novalidate></form>

<input type="submit" formnovalidate>

form

Este atributo (no confundirlo con el elemento) sirve para asociar un campo a un formulario, de manera que no tenga que estar dentro del mismo necesariamente.

<input type="text" form="contact">

Variaciones en los atributos del formulario

Podemos cambiar los atributos como method o action del elemento form desde campos del formulario. Todos estos atributos pueden usarse solamente en inputtype="submit" o type="image". Aquí tenemos las posibilidades:

formaction

Cambia la URL de acción del formulario.

<input type="submit" formaction="process.php">

formenctype

Su equivalente en form es enctype. Los dos determinan el modo de encriptación de un formulario enviado por POST. Puedes encontrar una lista de los posibles valores aquí.

<input type="submit" formenctype="application/x-www-form-urlencoded">

formmethod

Modifica el atributo method.

<input type="submit" formmethod="post">

formtarget

Tiene como equivalente target. Especifica la ventana en la que se ejecutará el formulario. Aquí una lista de valores.

<input type="submit" formtarget="_self">

Conclusión

Espero que todos estos atributos os ayuden con vuestros siguientes proyectos. La verdad es que alguno puede ser de gran utilidad, como por ejemplo form cuando estas haciendo un formulario en una tabla, pattern para validar códigos, list para hacer un pequeño autocompletar, etc.

No olvidéis comentar. ¡Nos vemos en la segunda parte con los nuevos tipos de campos!