HTML5-Formularios (I)

logoRF_HTML5Porque no solo de semántica se hace la web…..HTML5 nos proporciona una gran ayuda en el mundo de los formularios; hasta ahora, siempre teníamos que utilizar Javascript para filtrar los errores que se pudieran cometer en la entrada…Pues de un plumazo, HTML5 ha dejado obsoletas millares de lineas de código javascript, ahora ya podemos filtrar datos solo con HTML5!

Si, de pronto, el hacer un formulario se ha simplificado, ya no tenemos que preocuparnos por los filtros, pero ademas, se ha mejorado la visualizacion, para que un campo de fecha presente el calendario,  o formatee correctamente un valor.

Ya desde el principio, os animo a que creeis la correspondiente carpeta dentro de nuestro directorio; yo la he llamado “formularios”, y dentro, ya podemos crear nuestro primer archivo, llamado “formulario1.html”

Supongo que sabéis lo que es un formulario; definimos como formulario a un conjunto de labeles y campos que se encuentran recubiertos por la etiqueta “form”. Tambien debemos saber, que cuando se pulsa el botón de Enviar, se envían todos los campos pero solo del formulario que contiene el botón.

Dentro de las generalidades, os comento que existen dos formas de enviar los datos:

  • porGET – todos los campos se agregan a la dirección de la pagina de destino (URL), formando parejas de nombre-valor, el tamaño máximo a enviar, depende del navegador, pero puede oscilar entre las 2kby y las 8kby. Ademas los valores quedan visibles y sonfácilmentemanipulables:
    /test/demo_form.php?name1=value1&name2=value2
  • por POST – los campos se envían directamente al servidor dentro de un mensaje http, lo que hace mas incomoda su manipulacion, y la capacidad máxima, esta establecida por el servidor, pero normalmente es superior a 2Mby. Si deseamos subir ficheros (datos o imágenes), esta debería ser la opción elegida.

Y vamos a empezar a construir nuestro formulario.

Etiqueta < form >

Todo formulario, y todos los controles de un formulario, deben estar dentro de una etiqueta  “form”. A la vez de actuar como contenedor, contiene los atributos necesarios para poder gestionar el form

autocomplete

Es un nuevo atributo de HTML5, que nos permite indicar si queremso que el formulario recupere datos existentes en el navegador del cliente, para completar los campos “input” automaticamente. Solo acepta valores “on” y “off”, por defecto su valor es “on”

accept-charset

Indica la codificación de caracteres que se va a utilizar para la presentación y la entrada; si no se indica, se utiliza la activa para el documento.

enctype

Indica como se enviara la informacion; los valores son:

  1. application/x-www-form-urlencoded
  2. multipart/form-data
  3. text/plain

El formato estandar es la (1), y solo necesitaremos indicar la (2) si vamos a subir ficheros. (documentos, imágenes,…)

novalidate

Nuevo atributo, que cuando aparece, indica que no queremos que los campos del formulario se validen.

action

Indica la dirección URL a la que se han de enviar los datos del formulario. Para la realización de los ejercicios que comentamos, hemos preparado una función en nuestro servidor, para que reciba cualquier formulario que enviéis, y os devuelva una lista con los nombres de campo y sus valores, para eso debéis indicar en el form, la siguiente action:

2014-08-22_17h18_23

method

La forma como se enviará la información; para nuestros efectos, solo estudiaremos los valores GET y POST

name

Nombre del formulario, dentro del documento HTML. El atributo “id“, que también se puede indicar, se utiliza para las CSS, aunque, para evitar confusiones, se aconseja que se utilice el mismo valor para “name” y para “ID“.

target

Cuando se pulsa el botón de “Submit“, esta etiqueta se comporta también como la etiqueta “a”, por ello, este atributo puede tener los mismos valores que en dicha etiqueta, e indica donde se abrirá la pagina que esta llamando el “action

Con todo eso, una llamada mas o menos estandar quedaría así:

form_html5a punto para poner todos los controles dentro de estas etiquetas.

Etiqueta < input />

Empezamos comentando la que puede ser la etiqueta “reina” de un form, ya que vamos a utilizar mas a menudo, y soporta la mayoría de controles, por medio de sus atributos.

Los atributos que ya teníamos son:

  • accept – Tipo de archivo aceptado
  • alt – Ayuda visual. Genera un tool tip con el contenido del atributo
  • checked – Estado seleccionado. Utilizado en los “type=checkbox” y “type=radio“, su único valor puede ser “checked
  • disabled – Su único valor posible es “disabled“, y hace que un campo aparezca en baja intensidad, y NO SE ENVÍE.
  • maxlength – Longitud máxima, en numero de caracteres
  • multiple – indica que el campo acepta valores múltiples
  • name – Nombre del control en el dom. Si necesitamos acceder a este control, conviene definir también el ID.
  • readonly – El campo no se puede modificar
  • size – Numero de caracteres visibles
  • src – Fuente
  • type – Tipo de entrada de datos
  • value – Valor del campo, o valor inicial
  • width – Anchura del campo

Y los nuevos

  • placeholder – texto de ayuda
  • autofocus – Establecer foco en el campo
  • autocomplete – Completar escritura
  • required – Campo obligatorio
  • pattern – Comprobacion con expresion regular
  • max,min, step – numero maximo, minimo y salto
  • height – Establece la altura de los inputs, solo se permiten en los “type=image”
  • list – Sugerir lista de datos
  • novalidate – no realiza la validacion de ese control
  • form – Indica el  id aol que pertenece el control
  • formaction – Indica el action a realizar con el formulario
  • formenctype – Reemplaza en valor del enctype formulario
  • formmethod – Reemplaza en valor del methodformulario
  • formnovalidate – Hace que el formulario pase a ser novalidate
  • formtarget – Reemplaza en valor del target del formulario
  • x-webkit-speech – Booleano, permite escribir campos desdee la entrada del micrófono, de momento solo funciona en Chrome

autofocus

Este atributo hace que cuando se cargue el formulario, este campo reciba inmediatamente el foco de teclado. Solo puede figurar en un campo del formulario.

readonly

Si indicamos este atributo, el campo no se puede modificar, utilizaremos el atributo value para darle valor al campo.

required

Un campo con este atributo es obligatorio, por lo que se debe rellenar de forma obligatoria

placeholder

El valor que le indiquemos a este atributo, aparecerá en en el campo de entrada, hasta que el campo reciba foco, en cuyo momento desaparecerá. Muchas veces se utiliza para ebitar la inclusion de etiquetas que indiquen lo que ha de contener el campo.

2014-08-22_12h14_41

autocomplete

Si se indica sin valor, o con el valor “on”, el campo puede ser completado automáticamente con los datos de que disponga el navegador de entradas previas del usuario. Si no deseamos ese comportamiento, deberemos indicar este atributo con el valor “off”

pattern

Filtra el contenido de la entrada para que cumpla con el patron indicado. Aunque la creacion de patrones no es un tema sencillo, podemos encontrar muchos ya creados, y ademas, muchas web que nos pueden ayudar, indicandonos como crearlos, y tambien como probarlos; teneis mas direcciones en la bibliografia

multiple

Si se indica este atributo (no tiene valores), permite que este input seleccione mas de un objeto, se acepta únicamente con “type” “images” o “files”, y permite hacer una selección múltiple

accept

indica el tipo de archivo que se acepta en la entrada, solo se puede usar con el “type=file”, y los posibles valores son:

  • una extensión de fichero como .gig, .png, .doc,….
  • audio/* para aceptar cualquier fichero de audio
  • video/* para aceptar cualquier fichero de video
  • image/* para aceptar cualquier fichero de imagen
  • media-type: tambien podemos indicar cualquier “MIME-TYPE”

si queremos indicar mas de un tipo de fichero, los podemos separar con un espacio en blanco

max, min, step

Estos tres atributos son para aplicarlos a los campos “type=number”, “type=range”  y establece los valores minimo y maximo que puede adquirir el campo, asi como el paso. Estos campos tiene flechas para establecer el valor, o un deslizante, y no estan pensados para entrada directa, es por eso que tiene sentido “step”

 list

Este atributo, debe ser el id de un elemento datalist, cuyos elementos option serán usados como ayuda para el campo de entrada

En el ejemplo, podéis comprobar las diferencias existentes entre el combolist (select) que existía hasta ahora, y el nuevo “input->list

 

Los siguientes atributos, solo se pueden utilizar en controles que envíen  el formulario, y tienen como función sobrescribir comportamientos definidos en la etiqueta form

form

Permite indicar en un control el nombre de los formularios a los que pertenece, ya que podemos indicar mas de uno. Con este atributo, ya no es necesario que todos los controles estén fisicamente dentro de la caja “form” para que pertenezcan al mismo.

formaction

Sobrescribe el action indicado en la etiqueta form; solo se autoriza en los controles de envío de formulario. Este atributo, tiene que tener como valor una URL para enviar el formulario, nos permite disponer de mas de un destino en funcion del boton que se utilice.

formenctype

Sobrescribe la codificación indicada en la etiqueta form con el atributo “enctype” Solo esta autorizado en controles de envio de formulario, y puede tener los mismos valores autorizados para el atributo “enctype

formmethod

Sobrescribe el método indicado en el atributo “method” de la etiqueta “form“, los valores posibles son los mismos. Solo se autoriza en los controles de envío de formulario

formnovalidate

Aplica la opcion “novalidate” a un formulario.Solo se autoriza en los controles de envío de formulario. Podríamos utilizarlo cuando un formulario no esta terminado y queremos dar la opción de guardarlo temporalmente.

formtarget

Modifica el valor del atributo “target” de la etiqueta form. Solo se autoriza en los controles de envío de formulario.

Hasta aqui esta revisión de Forms, en el siguiente articulo revisamos las posibilidades de “type”, primero las de siempre, con alguna modificacion

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Desarrollo Web, Diseño, Formacion, HTML5 y etiquetada , , . Guarda el enlace permanente.

Una respuesta a HTML5-Formularios (I)

  1. Pingback: HTML5-Enlaces semanticos | Recursos para formacion

Deja un comentario