Nuevas etiquetas de html5 para formularios

Vamos a ver una serie de etiquetas y atributos que ha introducido recientemente html5 para los formularios. Gracias a ellas conseguiremos una mejor funcionalidad y una más agradable visibilidad en los mismos. Además veremos una serie de campos nuevos, unos más útiles que otros, pero nuevos al fin y al cabo…

Para empezar, me gustaría recomendar un enlace de nuestra web para aquellos que no tengan mucha “soltura” con los formularios en html: Formularios en html, manual gratis..

Me acabo de dar cuenta de que no se ven los ejemplos… así que los he subido todos AQUÍ

Una vez visto y aclaradas cualquier duda que pudiese sugir, empezamos a ver los nuevos atributos:

  • placeholder: hasta ahora, la única forma que teníamos de introducir un texto en el interior de un type=”text” era una etiqueta de apertura y una de cierre, y además, el usuario tenía que clickar en él y borrarlo para poder escribir, esto lo solucionamos con el atributo placeholder. Su uso sería:
    <input type="text" name="nombre" placeholder="Introduzca su nombre">

    Y quedaría:

  • multiple: en html, al seleccionar un type=”file”, nos aparece un botón para seleccionar el archivo, y cuando queríamos que el usuario pudiese seleccionar varios, no teníamos más forma (sencilla) que recurrir a JavaScript. Pues gracias a este atributo, podremos hacer que el usuario seleccione varios archivos…
    <input type="file" multiple>

    Y quedaría:

  • required: y una vez más teníamos que recurrir a JavaScript o a PHP en caso de querer que todos los campos (o algunos) del formulario fuesen de “relleno obligatorio”, quiero decir, que fuese obligatorio rellenarlos para enviar el formulario. Ahora con required nos sirve…
    <input type="text" name="nombre" required>

    Puedes probar:

  • min, max, step: todavía no hemos visto los nuevos campos, pero esto se empleará con el type=”number”, es decir, para números… lo que conseguimos con eso, es señalar un número mínimo que habrá que introducir, uno máximo a partir del cual no se podrá introducir número mayor, y un “salto”, quiero decir, un intervalo de aumento de los números:
    <input type="number" min=0 max=100 step=10>
  • pattern: con este atributo, aceptaremos en un input del tipo text un elemento que sea previamente validado por una expresión. En el ejemplo, únicamente aceptaremos números del 0 al 9 y de 6 caracteres…
    <input type="text" name="nombre" pattern="[0-9]{6}">

    Puedes probar:

  • autocomplete: con este atributo especificamos si el formulario puede o no ser completado con datos que hayan quedado almacenados de otros formularios que el usuario haya rellenado con anterioridad…
    <form autocomplete=on>

Ya hemos visto todos los nuevos atributos de html5, ahora pasaremos a los nuevos elementos, que en este post voy a destacar tres de ellos:

  • meter: muy atractivo visualmente, y da mucho juego en los formularios, votaciones… Empleado para medir en pantalla algo en escala, ya sean temperaturas, votos, una cantidad de visitas… lo que sea. Habrá que introducirle un valor máximo, uno mínimo (que suelen ser el 0 y el 100) y un valor actual:
    <meter min=0 max=100 value=40>

     

  • datalist: este elemento es de tipo “text”, y lo que nos va a permitir realizar es una lista a partir de la cual el usuario va a poder autocompletar la casilla del formulario con los valores introducidos en nuestra lista. Se ve mejor con el ejemplo así que ahí va:
    <input type="text" list="flores"><datalist id="flores"><option value="margarita"><option value="rosa"></datalist>
  • keygen: éste nuevo elemento nos va a permitir crear una clave de control privada que se enviará de forma local y una clave de control pública que se enviará al servidor.
    <keygen name="key">

Sin querer, me he alargado demasiado en este post, así que mañana subiré la continuación al post con los nuevos campos de formularios de html5, y con algunas cosas interesantes más…

Me acabo de dar cuenta de que no se ven los ejemplos… así que los he subido todos AQUÍ

Hasta mañana!

Un saludo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: