Los formularios son secciones de un documento HTML o página web que permiten la interacción entre el usuario y la aplicación. A través de ciertos elementos HTML de controles interactivos, los usuarios pueden introducir datos, que normalmente se envían a un servidor web para que los procese y devuelva un resultado; pero también se pueden procesar en el lado del cliente.
La utilidad de los formularios puede ser muy variada. Por ejemplo, un formulario se puede usar para seleccionar el idioma preferido, para registrar usuarios en una base de datos, para solicitar información de entrega de una compra, para crear una sección de comentarios de un blog o para crear una calculadora específica.
Los controles interactivos pueden ser campos de texto de una o varias líneas, cajas desplegables para seleccionar una opción de la lista, botones, casillas de verificación, grupos de opciones, controles para subir archivos, selectores de color, selectores de fecha, cajas de texto largo, etc. También existen elementos para crear etiquetas que se asocian a los controles y para agrupar controles.
Creación de formularios: elemento <form>
El elemento <form> permite definir una sección del documento que contiene un formulario con uno o más controles interactivos. Se trata de un elemento de bloque con dos etiquetas: <form> (de apertura) y </form> (de cierre). Por tanto, el resto de elementos del formulario quedarán dentro de estas dos etiquetas.
Ejemplo mínimo de formulario:
<form>
<!--Controles interactivos-->
</form>
Atributos de formulario
Este elemento tiene varios atributos de gran utilidad, pero hay dos que son de vital importancia para el funcionamiento del formulario. Los dos atributos más importantes son action y method, ya que con ellos indicaremos donde enviar los datos y el método que se utilizará para enviarlos.
El atributo ‘action’
El atributo action se utiliza para indicar la ubicación del programa que procesará los datos introducidos por el usuario y enviados por el navegador. El programa que recibirá y procesará estos datos puede estar escrito en cualquier lenguaje del lado del servidor. El valor de este atributo será una URL relativa o absoluta.
También es posible utilizar JavaScript —lenguaje del lado del cliente— mediante el atributo onsubmit. En este caso, el valor de action será javascript:, y el valor de onsubmit será una llamada a la función JavaScript. Por ejemplo, podemos usar la función alert() para mostrar un mensaje emergente.
Ejemplo de código HTML de un formulario con JavaScript
<form action="javascript:" onsubmit="alert('¡Hola, mundo!');">
<button type="submit">Saluda</button>
</form>
Como resultado, aparecerá un botón con el texto «Saluda» que, al presionarlo, aparecerá un mensaje de alerta del navegador con una salutación:
El atributo ‘method’
El atributo method permite especificar el método que se debe usar para enviar los datos del formulario. Este atributo hace referencia al método HTTP, que no es propio del HTML. Los dos valores posibles de este atributo son GET y POST. En caso de no indicar ningún valor, el valor por defecto será GET.
La principal diferencia entre los métodos GET y POST es que usando GET, la información se envía añadiendo variables a la URL —a partir del signo de interrogación (?), y separando las variables con el signo & en caso de existir más de una—; mientras que usando POST, la información se empaqueta dentro del cuerpo de la petición HTTP que se envía al servidor.
En este sentido, el método GET tiene una limitación referente a los caracteres admitidos a la hora de enviar los datos de los campos del formulario. Esta limitación viene dada según el número de caracteres permitidos en la barra de direcciones. Generalmente, este límite está entre 2.000 y 3.000 caracteres.
Otra limitación de GET es que no permite el envío de archivos adjuntos con el formulario. Además, los datos enviados por este método son visibles en la barra de direcciones del navegador, ya que se añaden al final de la URL. Por sus parte, el método POST permite enviar archivos adjuntos.
No siempre es fácil elegir el método que hay que elegir para enviar los datos. En general, lo más habitual es usar el método GET cuando se debe usar en formularios que no modifican los datos, mientras que el método POST es para cuando el formulario modifica la información actual.
Por ejemplo, la mayoría de buscadores de Internet usan el método GET. Es tan sencillo como usar un buscador y revisar la URL para ver los términos buscados. Como ejemplo de formularios que usan el método POST están las páginas de registro o secciones de comentarios en blogs y foros.
El atributo ‘enctype’
El atributo enctype permite especificar el tipo de medio (MIME type) de la información por parte del navegador antes de enviarla al servidor. Sus valores pueden ser los que se detallan a continuación:
application/x-www-form-urlencoded: este valor es el que se aplica por defecto. Se codifican los caracteres antes de ser enviados: los espacios se convierten en+, y los caracteres especiales se convierten en valores HEX.multipart/form-data: este valor permite subir archivos binarios (como imágenes) al servidor. Los datos no se codifican.text/plain: con este valor, los datos se envían sin codificar y en texto plano. Los espacios también se convierten en+.
El atributo ‘target’
El atributo target es un viejo conocido ya explicado en el artículo de los enlaces. Resumiendo, este atributo especifica la forma de acceder a una URL y, en este caso, el contexto de navegación en el que debe mostrarse la respuesta que se recibe después de enviar el formulario. Sus valores pueden ser:
_blank: en una nueva pestaña del navegador._parent: en el contexto de navegación padre._self: en el mismo contexto de navegación._top: en el contexto de navegación más alto.
El atributo ‘accept-charset’
Con el atributo accept-charset se puede especificar la codificación de caracteres. El valor de este atributo será una lista, separada por espacios (en HTML5), de los tipos de codificación que el servidor acepta. Se recomienda el uso de UTF-8 como primer valor. Si no se declara el atributo, el valor por defecto es UNKNOWN.
El atributo ‘autocomplete’
El atributo autocomplete se utiliza para indicar si los controles interactivos que contiene el formulario deben sugerir valores, que serán completados automáticamente. Es habitual usarlo en controles de datos de nombre, apellidos y correo electrónico. Sus valores pueden ser on (activado) y off (desactivado).
El atributo ‘novalidate’
Gracias al atributo novalidate se puede indicar al formulario si los datos que contiene no se deben validar durante su envío. Se trata de un atributo binario y sin valor, por lo que su inclusión en el elemento del formulario es suficiente para que tenga el efecto de no validar los datos.
Atributos que quedaron en desuso
En versiones antiguas de HTML se usó el atributo name para dar un nombre al formulario. Pero en versiones actuales se usa un atributo global: id, que debe ser único en el documento.
También el atributo accept quedó desaprobado para el elemento <form>; desde la versión HTML5 debe usarse en el elemento <input> específico. Este atributo indica una lista de los tipos de contenido que acepta el servidor.
