Formularios en HTML5

Antes de empezar, hemos de aclarar qué son y para qué sirven los formularios en HTML5.

Primeramente, un formulario, según la Real Academia Española, es un impreso con espacios en blanco. Esta definición en un sitio web, sería un documento que nos permite rellenar información de forma ordenada y estructurada. Algunos ejemplos podrían ser escribir nuestro nombre y apellidos, dirección, cuenta de email, etc.

formularios en HTML5

Crear formularios con HTML5

Para empezar, creamos un formulario en HTML5 con la estructura principal del formulario usando la etiqueta form y sus atributos propios:

Atributos de la etiqueta form

Estos son los principales atributos. Es posible que no estén todos:

  • action: Dirección o url del servidor a la que se envía la información rellenada.
  • method: Este atributo tiene dos valores posibles:
    1. get: Usando este método, los datos del formulario se enviarán directamente y sin codificar en la url especificada en el atributo action.
    2. post: Con este método, los datos del formulario se envían de forma oculta. Por tanto, es la forma más recomendable de enviar datos desde un formulario.
  • accept: Especifica el tipo de datos MIME o tipo de archivos que pueden subirse con el formulario. Este atributo sólo sirve si el formulario acepta el envío de archivos.
  • enctype: Se utiliza para indicar al formulario cómo debería codificar los datos en el momento de enviarlos al servidor:
    1. application/x-www-form-urlencoded: Es el valor por defecto.
    2. multipart/form-data: Es requerido, si queremos subir archivos mediante el formulario.
    3. text/plain.
  • autocomplete: Especifica los controles del formulario que pueden tener sus valores automáticamente completados:
    1. off:  El navegador no autocompleta las entradas.
    2. on: El navegador puede completar automáticamente valores basados en lo que el usuario ha ingresado durante entradas previas al formulario.
  • name: Es el nombre con el que identificamos al formulario.
  • novalidate: Es booleano. Indica que el formulario no es validado cuando es enviado.
  • target:  Indica dónde mostrar la respuesta, después de enviar el formulario. Las siguientes palabras clave tienen significados especiales:
    1. _self: Carga la respuesta dentro contexto de navegación. Es el valor por defecto si el atributo no se especifica.
    2. _blank: La respuesta es el contexto de navegación.
    3. _parent: Carga la respuesta en el contexto de navegación padre del marco actual. Si no hay marco, esta opción es igual que _self.
    4. _top: Carga la respuesta en el contexto de navegación de más alto nivel. Si no hay padre, esta opción se comporta igual que _self.

Nuevos elementos de un formulario HTML5

En primer lugar, la principal ventaja de los formularios en HTML5 es que ya no es necesario implementar funcionalidades que hasta ahora solo eran posibles mediante JavaScript. Ahora la mayoría de estas funcionalidades están disponibles en las mejoras implícitas de los formularios en HTML5.

En segundo lugar, veamos una lista de los nuevos tipo de entrada (input):

<input type="date" />
<input type="email" />
<input type="url" />
<input type="color" />
<input type="time" />
<input type="datetime" />
<input type="month" />
<input type="week" />
<input type="number" />
<input type="tel" />
<input type="search" />
<input type="range" />

Tipo date

Con la ayuda de un calendario emergente, podemos seleccionar una fecha en concreto.

Tipo email

Es un cuadro de texto específico para escribir direcciones de correo electrónico. Conlleva una comprobación de los datos introducidos y mostrará un mensaje de error, si la dirección de correo no es válida.

Tipo url

Indica al navegador que no debe permitir que se envíe el formulario, si el usuario no introduce una url correcta.

Tipo color

Sirve para seleccionar el código de un color de una paleta.

Tipo time

Nos permite seleccionar una hora en concreto.

Tipo datetime

Tiene el mismo funcionamiento que el tipo date, pero incluyendo la hora y la zona horaria.

Tipo month

Es un control similar a date, pero con la diferencia de que usaremos el calendario emergente para seleccionar solamente un mes del año.

Tipo week

Es similar a date, pero solamente seleccionaremos una semana del año.

Tipo number

Este cuadro de texto solamente admite valores numéricos. El propio formulario realizará la validación del control antes de enviar los datos. admite dos atributos: min, max y step.

Tipo tel

Los formularios con este tipo de entrada esperan introducir un número de teléfono. No realiza ninguna validación.

Tipo search

Es utilizado para generar formularios de búsqueda. dispone de una x para eliminar el texto introducido.

Tipo range

Muestra un control deslizante en el navegador.

Nuevos controles en los formularios HTML5

HTML5 incluye tres nuevos elementos de formularios.

datalist

Este nuevo elemento sirve para crear cuadros de texto con la función de autocompletado. Además, debe ir junto a un cuadro de texto con un atributo list con el mismo valor que el atributo id del elemento datalist.

Ejemplo de datalist

<form name="formulario" action=datos.php" method="post">

   <input type="text" list="citricos">
   <datalist id="citricos">
      <option value="naranja">
      <option value="limones">
      <option value="pomelos">
      <option value="mandarinas">
   </datalist>

</form>

keygen

Este control está pensado para establecer una comunicación segura entre el cliente y el servidor. Sobre todo, su funcionamiento consiste en generar en el momento de enviar el formulario un par de claves, una privada almacenada localmente y otra pública enviada al servidor. Así pues, este elemento dispone de una lista desplegable para seleccionar el grado de encriptación: 2048 (Grado elevado) y 1024 (Mediano).

Ejemplo de keygen

<form name="formulario" action=datos.php" method="post">

   Usuario: <input type="text" name="usuario">
   Tipo de encriptación: <keygen name="encriptacion">
   <input type="submit" value="Enviar">

</form>

output

Output muestra el resultado de un cálculo matemático escrito dentro del atributo oninput. El resultado queda almacenado en el atributo name del elemento output. Por consiguiente, esto es una forma muy simple de realizar cálculo en formularios.

Ejemplo de output

<form oninput="resultado.value=parseInt(campo1.value) + parseInt(campo2.value)">

   <input type="number" id="campo1" value=""> +
   <input type="number" id="campo2" value=""> =
   <output name="resultado" for=" campo1 campo2 "></output>

</form>

Nuevos atributos

autofocus

Deja el foco automáticamente en un control. Sobre todo es conveniente, si el usuario está acostumbrado a usar la tecla tab.

Ejemplo de autofocus

<form name="formulario" action=datos.php" method="post">

   Nombre: <input type="text" name="nombre" autofocus><br>
   Apellidos: <input type="text" name="apellidos"><br>
   <input type="submit" value="Enviar">

</form>

pattern

Sirve para introducir un patrón en un control. Si no cumplimos el patrón el dato no será enviado.

Ejemplos de pattern

Ejemplo 1
<form name="formulario" action=datos.php" method="post">

   Contraseña: <input type="password" name="contrasenya" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Debe contener al menos un número y una mayúscula y una minúscula, y al menos 8 o más carácteres">
   <input type="submit" value="Enviar">

</form>
Ejemplo 2
<form name="formulario" action=datos.php" method="post"">
   Contraseña: <input type="password" name="contrasenya" pattern=".{6,}" title="Seis o más carácteres">
   <input type="submit" value="Enviar">
</form>

placeholder

Aparece un texto para indicar qué escribir en el control. También, es conveniente resaltar que este texto se autoborra al situar el cursor en el control.

Ejemplo de placeholder

<form name="formulario" action=datos.php" method="post">

   <input type="text" name="nombre" placeholder="Escribe el nombre">
   <br>
   <input type="text" name="apellidos" placeholder="Escribe los apellidos">
   <br>
   <input type="submit" value="Enviar">

</form>

required

Ten cuenta que se utiliza para obligar la introducción de un dato en un control. Es especialmente relevante y por tanto, es obligatorio.

<form name="formulario" action=datos.php" method="post">
   Usuario: <input type="text" name="usuario" required>
   <br>
   <input type="submit" value="Enviar">
</form>

Enviar el formulario

Por último, nos queda crear un botón de envío. Para esto, la etiqueta input nos puede servir. Resumiendo, hay cuatro tipos:

  • type=”submit”: Es el botón de envío principal del formulario. El usuario será redireccionado a la página especificada en el atributo action del formulario.
  • type=”reset”: Reinicia el formulario.
  • type=”image”: Es equivalente al botón submit, pero esta vez mostrado como una imagen. Añade el atributo src para especificar la url de la imagen.
  • type=”button”: Es un botón genérico, que no tendrá efecto alguno por defecto. En general, este botón se utiliza en JavaScript para escribir acciones en la página.

Finalmente, queda pendiente algún ejemplo de cómo enviar datos al servidor mediante el método post… pero, esto será para otra entrada.

También puede interesarte

Enviar un formulario por email

Selects dependientes

JavaScript – Selects dependientes

XMLHttp – Selects dependientes

Inyección SQL, usando GET

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *