Este artículo forma parte del Curso HTML5 desde cero.
Haz click aquí para ver el índice.

En el módulo de hoy veremos todas las etiquetas relativas a los formularios en HTML5, que podrás combinar con cualquiera de las etiquetas que ya has aprendido. Los formularios permiten al usuario introducir datos en el documento que, posteriormente, serán enviados y tratados por el servidor, ya sea para interactuar con ellos, para guardarlos en una base de datos, etc.

Etiqueta <form> … </form>

Es la etiqueta en la que definimos un formulario en HTML5 como tal. Dentro de esta etiqueta irá todo el código del formulario.

Su sintaxis es la siguiente:

Revisemos sus atributos:

• accept-charset
  Permite establecer el conjunto de caracteres que debe de utilizar el formulario al enviar la información al servidor. Si no indicamos este atributo, se tomará el definido por defecto en nuestro documento HTML5. Los conjuntos de caracteres más utilizados son los siguientes:
  • UTF-8
  • ISO-8859-1
• action
  Con éste especificamos dónde han de ser enviados los datos del formulario. De forma habitual suele ser otro documento web, escrito en lenguaje de programación de servidor que se encarga de leer y procesar la información. Hemos de indicar la ruta relativa o absoluta de dicho recurso.
• autocomplete
  Indica que el formulario puede utilizar las entradas de datos anteriores que pueda haber utilizado el usuario para autocompletar los campos solicitados. Su valor puede ser ON para activar esta funcionalidad u OFF para desactivarla.
• enctype
  Este artibuto sirve para indicar cómo han de ser codificados los datos del formulario cuando es enviado. Solo se debe utilizar cuando el atributo method tiene asignado el valor POST. Sus posibles valores son los siguientes:
  • application/x-www-form-urlencoded
    Es el valor predeterminado; todos los caracteres son codificados, los espacios en blanco son convertidos en el símbolo + y los caracteres especiales convertidos a sus valores hexadecimales en ASCII.
  • multipart/form-data
    Los datos no son codificados. Se ha de utilizar al enviar archivos asociados al formulario, con el control de carga de archivos.
  • text/plain
    Los datos son codificados de la misma forma que en el primer punto con la excepción de que los caracteres especiales no son convertidos.
• method
  Este atributo se usa para especificar la forma o método de envío de los datos contenidos en el formulario. Existen dos valores posibles: GET y POST.
  • GET
    Usando este valor se envían los datos del formulario utilizando la URL, por lo que todos los datos añadidos se unen a la URL mediante valores tipo nombre/valor.
    No se recomienda usar este método cuando los datos son sensibles (datos personales, bancarios, contraseñas, etc.). Además, la cantidad de información que se puede enviar por este método está limitada a 3000 caracteres (aprox.)
  • POST
    Es el valor recomendado, no tiene limitación de tamaño y los datos son enviados dentro de la petición HTTP del atributo ACTION, por lo que los datos no son visibles y su envío es más seguro.
• name
  Este atributo se usa para indicar el nombre que se quiere asignar al formulario o a los datos que se solicitan en el mismo. El nombre puede ser utilizado por lenguajes de cliente, para interactuar con el formulario, por ejemplo.
• novalidate
  Con éste indicamos que los datos del formulario no han de ser validados según las características de los campos utilizados en el formulario. De esta forma el formulario envía los datos sin realziar ningún tipo de comprobación sobre ellos. El atributo es booleano, por lo que no ha de añadirse ningún valor. Si lo añadimos, lo activamos.
• target
  Utilizado para indicar dónde ejecutar el destino al enviar el formulario. Funciona de la misma forma que en la etiqueta de enlace <a>…</a>, por lo que sus valores son los mismos:
  
  • _blank
    Lo ejecuta en una nueva ventana o pestaña.
  • _self
    Lo ejecuta en la misma ventana.
  • _parent
    Lo ejecuta en un marco asociado.
  • _top
    Lo ejecuta ocupando todo el cuerpo de la ventana.
  • framename
    Lo ejecuta en el marco del cual especificamos el nombre.

Etiqueta <input>

Sin duda una de las etiquetas más importantes en un formulario HTML5, dado que sirve para solicitar los datos que queramos que el usuario rellene y, por ende, son los datos que recogen al enviar el formulario.

Es además una de las etiquetas con más atributos posibles, ya que con ellos indicamos qué tipo de dato vamos a recoger, qué validaciones tiene que hacer sobre la información introducida, así como otros análisis de los mismos.

Te muestro su sintaxis completa:

No te asustes por la sintaxis, parece muy compleja pero sus atributos son bastante sencillos:

• accept
  Se utiliza concretamente para los datos de entrada tipo file, y permite especificar los tipos de archivo que acepta el servidor que recibe los datos, pero no realiza ninguna validación.
  • Sintaxis:
    <input type=»file» accept=»valor«>
  • Estos son los valores que acepta:
    • audio/*
      Todos los archivos de audio son aceptados.
    • video/*
      Todos los archivos de vídeo son aceptados.
    • image/*
      Todos los archivos de imagen son aceptados.
    • MIME Tipo
      Se ha de especificar un valor de tipo MIME, sin parametros.
• alt
  Permite especificar un texto alternativo para la imagen.
• autocomplete
  Indica que el dato solicitado puede utilizar las entradas de datos anteriores que haya podido realizar el usuario.
• autofocus
  Sirve para especificar cuál es el control que recibe el «foco» cuando el navegador realiza la carga del formulario. Es un atributo booleano y sólo con aparecer significa que está activado.
  • Es decir, este atributo se añade únicamente en una etiqueta <input>, que será en la que se sitúe el cursor cuando el navegador cargue el formulario.
• checked
  Se puede utilizar en los casos en que el atributo type indique un tipo de dato checkbox o radio, y con él indicamos que campo ha de aparecer inicialmente marcado/seleccionado cuando el navegador carga el formulario.
• disabled
  Este atributo indica que el elemento sobre el que se aplica se ha de desactivar. Es decir, se convierte en un elemento bloqueado que no se puede ni cambiar ni realizar click sobre le mismo.
• form
  Permite indicar a qué formulario pertenece el campo. De esta forma, se puede situar un campo incluso fuera del formulario pero indicando que pertenece a uno en concreto, para que cuando los datos sean enviados también se envíe la información de este elemento.
• formaction
  Permite indicar una URL distinta de envío, sobreescribiendo la que aparece en el atributo action del formulario. De esta forma un mismo formulario puede enviar información a diferentes destinos.
  • Se ha de utilizar cuando el atributo type tiene como valor submit o image.
• formenctype
  Con éste especificamos cómo han de ser codificados los datos del formulario cuando es enviado. Se aplica sólo a botones de formulario de tipo submit o image. Estos son su posibles valores:
  • application/x-www-form-urlencoded
    Es el valor predeterminado por defecto. Todos los caracteres son codificados, los espacios en blanco son convertidos en símbolos «+» y los caracteres especiales son convertidos a sus valores hexadecimales en ASCII
  • multipart/form-data
    Los datos no son codificados. Se ha de utilizar cuando se envíen archivos asociados al formulario.
  • text/plain
    Actúa como el primer punto, codificando todos los caracteres con la diferencia que los caracteres especiales no son convertidos.
• formmethod
  Permite indicar la forma o método de envío de los datos del formulario. Funciona exactamente igual que en la anterior etiqueta, pudiendo añadir como valores GET o POST.
• formnovalidate
  Indica que los datos del formulario no han de ser validados (igual que en la etiqueta anterior)
• formtarget
  Con éste podemos especificar el destino del elemento en cuestión. Como en la etiqueta anterior, sus valores pueden ser los siguientes:
  • _blank
  • _self
  • _parent
  • _top
  • framename
• height
  Se aplica únicamente a campos de tipo image, y permite especificar el alto de la imagen en píxeles.
• width
  Al igual que en el anterior atributo, se usa únicamente para campos tipo image y, en este caso, permite espeficiar el ancho de la imagen.
• name
  Dentro de este atributo indicamos el nombre que se quiere asignar al campo del formulario. El nombre puede ser utilizado por lenguajes de cliente para interacturar con el formulario o con lenguajes de servidor para procesar los archivos recibidos.
• readonly
  Al añadir este atributo indicamos que el campo es de sólo lectura. Es decir, la información es visible y puede ser seleccionada, pero no se puede modificar. Al ser un atributo booleano no tiene valor, simplemente se añade o no se añade.
• required
  Al aplicar este atributo a un campo indicamos que la introducción de datos en el mismo es obligatorio. Es decir, no se puede dejar en blanco. Como en el anterior, el atributo es booleano por lo que o se añade, o no se añade.
• placeholder
  Se utiliza para indicar un texto de ayuda informativo sobre el contenido del campo. El texto se muestra cuando el campo está vacío y desaparece cuando el usuario escribe algo en él.
• value
  Sirve para indicar el valor de un campo. Aprovecho para comentarte un par de cosas:
  • Si lo utilizamos dentro de elementos del tipo button, submit o reset sirve para indicar el texto del botón.
  • Si lo utilizamos dentro de elementos tipo radio, checkbox o image indica el valor asociado al campo, y en los dos primeros es obligatorio.
• size
  Indica el ancho visible del campo en caracteres, siempre que la etiqueta sea de tipo text, search, url, email o password.
• maxlength
  Este atributo permite indicar el número máximo de caracteres que se permite telcear en una etiqueta del tipo input.
• src
  Lo hemos visto anteriormente; se aplica solo a elementos tipo image y sirve para indicar la URL origen de la imagen, y la ruta puede ser relativa o absoluta.
• max, min, step
  Estos atributos permiten indicar los valores máximos, mínimos y los intervalos de los valores numéricos o de fecha que se puede aplicar a un campo, siempre y cuando el campo sea de tipo number, range, date, datetime, datetime-local, month, time o week.
  • Nota: Tened en cuenta que los formatos de fecha se añaden en formato americano (año – mes – día)
• multiple
  Se aplica sólo a campos del tipo file o email y sirve para indicar que se pueden introducir en el campo uno o más valores.
• list
  Este atributo permite indicar una lista de datos asociada al campo. Es decir, este atributo se utiliza para indicar que un campo ha de mostrar un listado desplegable de valores de donde el usuario tendrá que seleccionar el que quiera.
  • Para crear el listado de valores usamos la etiqueta <datalist> … </datalist>, dentro de la cual añadiremos cada uno de los valores uno a uno dentro de la etiqueta <option>.

    La sitaxis del listado es la siguiente:

    <datalist id=»identificador del listado«>
     <option value=»Primer valor del listado«>
     <option value=»Segundo valor del listado«>
    …
    </datalist>
  • A su vez, la etiqueta <option> tiene los siguientes atributos:
    • label, para indicar un texto corto para la opción.
    • selected, para indicar que es el valor predeterminado en el listado.
    • value, para indicar el valor que será enviando al servidor como dato.
• pattern
  Se utiliza para indicar un «patron» de entrada de datos en el campo en cuestión. Es decir, es una validación en la que le indicamos que si los datos introducidos no tienen el patrón que le hemos dado en este atributo, los datos no serán correctos y el formulario no será validado.
  • Se aplica a elementos de tipo text, search, tel, email y password.
  • El patrón no deja de ser una cadena de texto donde se indica, mediante ciertos caracteres, el formato que debe ser revisado.
    • Ejemplo de un patrón para un campo de código postal españolcorreo electrónico:
      ((0[1-9]|5[0-2])|[1-4][0-9])[0-9]{3}
      Este patrón indica que puede el valor introducido debe contener sólo números y ha de ser desde el 01xxx hasta el 52xxx.
  • Aunque lo ideal es que aprendas el significado y nomenclatura de este tipo de patrones y puedas así crear los tuyos propios, esto se suele ver al estudiar lenguajes como JavaScript o SQL, por lo que hasta entonces te recomiendo la siguiente página web con patrones stándar: http://html5pattern.com/
• type
  Es el atributo en el que indicamos el tipo de campo que queremos solicitar. El valor por defecto al no añadir este atributo es text, aunque se recomienda que siempre indiquemos este atributo. Estos son los valores posibles:
  • button – Define un botón, usado para activar scripts o enviar el formulario.
  • checkbox – Define una casilla de verificación.
  • color – Define un campo de selector de colores.
  • date – Define un campo tipo fecha sin hora (formato americano).
  • datetime – Define un campo tipo fecha (fecha + hora en formato americano), basado en zona horaria.
  • datetime-local – Igual que el anterior pero sin base de zona horaria.
  • email – Define un campo de e-mail.
  • file – Define un campo de selector de ficheros, que visualiza un botón para mostrar una ventana donde seleccionar el fichero o ficheros.
  • hidden – Define un campo oculto, normalmente utilizados por los programadores para el enviar datos al servidor.
  • image – Define un campo de imagen.
  • month – Define un campo de control de mes y año, mostrando un selector de fecha.
  • number – Define un campo numérico entero.
  • password – Define un campo de contraseña, que visualizará los datos introducidos como asteriscos.
  • radio – Define un botón de tipo radio, de selección única (solo se puede seleccionar una opción de entre varias propuestas).
  • range – Define un deslizador o rango, en el cual podemos seleccionar un rango de valor numérico arrastrando el mismo.
  • reset – Define un botón de reseteo o limpieza de datos. Al pulsarlo se limpian todos los datos del formulario.
  • search – Define un campo de búsqueda (para indicar cadenas de búsqueda como información, pero no realiza ninguna búsqueda).
  • submit – Define un botón de envío de formulario.
  • tel – Define un campo de teléfono.
  • text – Define un campo de tipo texto. El campo es de 20 caracteres por defecto.
  • time – Define un campo para introducir horas.
  • url – Define un campo para introducir una dirección web (URL).
  • week – Define un campo para introducir semana y mes.

Antes de continuar con las etiquetas que nos faltan por ver de los formularios en HTML5, te voy a mostrar algunos ejemplos con las etiquetas y atributos que hemos visto hasta ahora.

Ejemplo 1 – Formulario de registro de usuario

Aunque los formularios de registro hoy en día suelen ser muy simples (para conseguir el registro rapidamente), en éste ejemplo te muestro un formulario algo más completo, para que veas el uso de las etiquetas y atributos que hemos visto hasta ahora:

Y así se vería en el navegador:

Ejemplo 2 – Formulario de compra online

Otro formulario, en este caso enfocado a una compra online. Ten en cuenta que los formularios de compra online son mucho más complejos que éste, dado que incluyen otros lenguajes de programación y seguridad añadida. En todo caso, es un ejemplo sencillo de cómo crear la base en html5:

Y en el navegador se vería así:

Te animo a que practiques tu mismo añadiendo los input que necesites, probando todos los atributos.

>> CONTINÚA en la página 2/2

Summary

Article Name

Curso HTML5 - 8/9 - Formularios en HTML5 - Parte 1/2

Description

En el módulo de hoy veremos todas las etiquetas relativas a los formularios en HTML5.

Author

Nicolau Roca

Publisher Name

Let's Webbing

Publisher Logo