Nuevas etiquetas para formularios con html5 (II)

Sigamos viendo etiquetas para formularios. En el post anterior vimos nuevos atributos y elementos, ahora veremos una serie de nuevos campos para formularios con html5.

Lo primero que debemos aclarar es que todos los campos enumerados a continuación son llevan el siguiente formato:

<input type="...">
  • tel: para introducir números de teléfono, en realidad, es un campo idéntico a un type=”text” o un type=”number”, ya que no se valida de ninguna forma si lo introducido es un número telefónico o no… Podríamos validarlo con el atributo pattern visto en el post anterior (claro que también podríamos hacerlo con un type=”text”…)
  • color: sirve para seleccionar colores de una paleta, en principio, enviando un formulario no es muy útil, pero si el formulario está combinado con php o javascript sí se le encuentra una cierta utilidad, ya lo veremos…
  • number: campo en el que únicamente se podrán introducir números, no aceptando ningún otro caracter, ya sean letras o caracteres especiales (. , : ; …)
  • range: campo también para enviar un número, pero en este caso introducido mediante un “slider”, que es una barra que podemos desplazar con el ratón (a más longitud, el número será mayor)
  • email: para introducir emails
  • datetime: en este campo podremos introducir la fecha y hora con zona horaria UTC
  • date: para introducir una fecha
  • time: para introducir la hora completa sin zona horaria
  • month: para introducir meses y año
  • week: para introducir semanas, en realidad introduciremos un número, que es la semana del año.

Puedes ver los ejemplos de todos estos campos y otros más para formularios en

Nuevas etiquetas para formularios con html5

Como ya comenté en el post anterior, no solo iba a poner los nuevos campos, sino que iba a compensarlo con una serie de nuevas etiquetas curiosas para cambiar cosas internas en los formularios. Éstas etiquetas son:

  • dirname: con este “atributo” además de enviarse el input text, se va a enviar la dirección en la que se escribió (de izquierda a derecha o de derecha a izquierda)
  • novalidate: imaginemos que en un elemento de nuestro formulario (o varios) hemos realizado una validación previa a su envío. Pues gracias a este atributo, podremos enviar el formulario (o realizar la acción que queramos) sin validar dichos elementos. Su uso es muy sencillo, basta con ponerlo en la etiqueta form (<form novalidate>)
  • formnovalidate: como vemos, en el caso anterior tenemos que declarar la no validación de los elementos al principio del formulario. Pues si lo que queremos es que por ejemplo, al enviar el formulario se validen los elementos pero al guardarlo no, podemos usar este atributo en el botón concreto (que en este caso sería guardar y quedaría algo como: <input type=”button” value=”Guardar” formnovalidate/>)
  • formaction: nos sirve para variar el comportamiento de la etiqueta form. Podemos usarlo por ejemplo para que al pulsar el botón enviar, el usuario además de enviar el formulario entre en una dirección web (en la que podríamos, por ejemplo, agradecer el envío del formulario). Quedaría algo como: <input type=”submit” value=”Enviar” formaction=”http://www.paginaweb.es”&gt;
  • progress: utilizaremos este elemento para mostrar el grado de progreso de una tarea, como por ejemplo, la carga de la página, una imagen, un formulario… <progress value=”50″>

Puedes ver más elementos y etiquetas en

Nuevas etiquetas para formularios con html5 II

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: