Un formulario web , formulario web o formulario HTML en una página web permite a un usuario ingresar datos que se envían a un servidor para su procesamiento. Los formularios pueden parecerse a formularios en papel o de bases de datos porque los usuarios web los completan utilizando casillas de verificación, botones de opción o campos de texto . Por ejemplo, los formularios se pueden usar para ingresar datos de envío o de tarjeta de crédito para ordenar un producto, o se pueden usar para recuperar resultados de búsqueda desde un motor de búsqueda .
Los formularios están encerrados en el elemento HTML <form> . Este elemento HTML especifica el punto final de comunicación al que se deben enviar los datos ingresados en el formulario y el método de envío de los datos, GETo POST.
Los formularios pueden estar compuestos por elementos estándar de la interfaz gráfica de usuario :
<text>— un cuadro de texto simple que permite ingresar una sola línea de texto.<email>- un tipo <text>que requiere una dirección de correo electrónico parcialmente validada<number>- un tipo de <text>que requiere un número<password>— similar a <text>, se utiliza por motivos de seguridad, en el que los caracteres escritos son invisibles o se reemplazan por símbolos como *<radio>- un botón de radio<file>— un control de selección de archivos para cargar un archivo<reset>— un botón de reinicio que, cuando se activa, le indica al navegador que restaure los valores del formulario actual a sus valores iniciales.<submit>— un botón que le indica al navegador que realice una acción en el formulario (normalmente, que lo envíe a un servidor)<textarea>— muy parecido al <text>campo de entrada, excepto que <textarea>permite mostrar e ingresar múltiples filas de datos<select>— una lista desplegable que muestra una lista de elementos entre los que un usuario puede seleccionarLa imagen de muestra de la derecha muestra la mayoría de estos elementos:
Estos elementos básicos proporcionan los elementos de interfaz gráfica de usuario (GUI) más comunes , pero no todos. Por ejemplo, no existen equivalentes a una vista de árbol o de cuadrícula .
Sin embargo, se puede imitar una vista de cuadrícula utilizando una tabla HTML estándar en la que cada celda contenga un elemento de entrada de texto. Una vista de árbol también podría imitarse a través de tablas anidadas o, más apropiadamente semánticamente , listas anidadas . En ambos casos, un proceso del lado del servidor es responsable de procesar la información, mientras que JavaScript maneja la interacción del usuario. Las implementaciones de estos elementos de la interfaz están disponibles a través de bibliotecas de JavaScript como jQuery .
HTML 4 introdujo la <label>etiqueta, que pretende representar un título en una interfaz de usuario y puede asociarse con un control de formulario específico especificando el id atributo del control en el foratributo de la etiqueta de la etiqueta. [1] Esto permite que las etiquetas permanezcan con sus elementos cuando se cambia el tamaño de una ventana y permite una funcionalidad más similar a la de un escritorio (por ejemplo, al hacer clic en un botón de opción o en la etiqueta de una casilla de verificación se activará el elemento de entrada asociado).
HTML 5 introduce una serie de etiquetas de entrada que pueden representarse mediante otros elementos de la interfaz. Algunos se basan en campos de entrada de texto y están destinados a introducir y validar datos comunes específicos. Estos incluyen <email>ingresar direcciones de correo electrónico, <tel>números de teléfono y <number>valores numéricos. Hay atributos adicionales para especificar campos obligatorios, campos que deben tener el foco del teclado cuando se carga la página web que contiene el formulario y texto de marcador de posición que se muestra dentro del campo pero que no es entrada del usuario (como el texto de 'Buscar' que se muestra en muchos campos de entrada de búsqueda antes de ingresar un término de búsqueda). Estas tareas solían manejarse con JavaScript , pero se habían vuelto tan comunes que se agregó soporte al estándar. El <date>tipo de entrada muestra un calendario desde el cual el usuario puede seleccionar una fecha o rango de fechas. [2] [3] Y el colortipo de entrada se puede representar como un texto de entrada simplemente verificando que el valor ingresado sea una representación hexadecimal correcta de un color, según la especificación, [4] o un widget de selección de color (siendo este último la solución utilizado en la mayoría de los navegadores que admiten este atributo).
Cuando se envían datos que se ingresaron en formularios HTML, los nombres y valores en los elementos del formulario se codifican y se envían al servidor en un mensaje de solicitud HTTP mediante GET o POST . Históricamente también se utilizaba un transporte de correo electrónico . [5] El tipo MIME predeterminado (tipo de medio de Internet) , application/x-www-form-urlencoded , se basa en una versión muy temprana de las reglas generales de codificación porcentual de URI , con una serie de modificaciones, como la normalización de nueva línea y el reemplazo. espacios con " +" en lugar de " %20". Otra codificación posible, tipo de medio de Internet multipart/form-data , también está disponible y es común para envíos de archivos basados en POST.
Los formularios generalmente se combinan con programas escritos en varios lenguajes de programación para permitir a los desarrolladores crear sitios web dinámicos . Los lenguajes más populares incluyen lenguajes del lado del cliente y/o del lado del servidor.
Aunque se puede utilizar cualquier lenguaje de programación en el servidor para procesar los datos de un formulario, los lenguajes más utilizados son los lenguajes de secuencias de comandos , que tienden a tener una funcionalidad de manejo de cadenas más sólida que los lenguajes de programación como C, y también tienen administración automática de memoria que ayuda a prevenir Ataques de desbordamiento del buffer .
El lenguaje de programación del lado del cliente de facto para sitios web es JavaScript . El uso de JavaScript en el modelo de objetos de documento (DOM) conduce al método de HTML dinámico que permite la creación y modificación dinámica de una página web dentro del navegador.
Si bien los lenguajes del lado del cliente utilizados junto con los formularios son limitados, a menudo pueden servir para realizar una validación previa de los datos del formulario y/o preparar los datos del formulario para enviarlos a un programa del lado del servidor. Sin embargo, este uso está siendo reemplazado por los nuevos tipos de campos y atributos de HTML5 .inputrequired
El código del lado del servidor puede realizar una amplia variedad de tareas para crear sitios web dinámicos que, por razones técnicas o de seguridad, el código del lado del cliente no puede realizar, desde autenticar un inicio de sesión hasta recuperar y almacenar datos en una base de datos , revisar la ortografía y enviar. correo electrónico . Una ventaja significativa de la ejecución del lado del servidor sobre la del lado del cliente es la concentración de la funcionalidad en el servidor en lugar de depender de diferentes navegadores web para implementar varias funciones de manera consistente y estandarizada . Además, el procesamiento de formularios en un servidor a menudo resulta en una mayor seguridad si la ejecución del lado del servidor está diseñada para no confiar en los datos proporcionados por el cliente e incluye técnicas como la desinfección de HTML . Una desventaja del código del lado del servidor es la escalabilidad : el procesamiento del lado del servidor para todos los usuarios ocurre en el servidor, mientras que el procesamiento del lado del cliente ocurre en computadoras cliente individuales.
Algunos de los lenguajes interpretados comúnmente utilizados para diseñar formularios interactivos en el desarrollo web son PHP , Python , Ruby , Perl , JSP , Adobe ColdFusion y algunos de los lenguajes compilados comúnmente utilizados son Java y C# con ASP.NET .
PHP es un lenguaje muy común utilizado para la "programación" del lado del servidor y es uno de los pocos lenguajes creados específicamente para la programación web . [6] [7]
Para usar PHP con un formulario HTML, la URL del script PHP se especifica en el actionatributo de la etiqueta del formulario. El archivo PHP de destino luego accede a los datos pasados por el formulario a través de PHP $_POSTo $_GETvariables, dependiendo del valor del methodatributo utilizado en el formulario. Aquí hay un script PHP de controlador de formulario básico que mostrará el contenido delnombre de pilacampo de entrada en la página:
formulario.html
<!DOCTYPE html> < html lang = "es" > < head > < title > Formulario </ title > </ head > < body > < form action = "form_handler.php" > < p >< etiqueta > Nombre: < nombre de entrada = "nombre" /></ etiqueta >> p > < p > < tipo de botón = "enviar" > Enviar </ botón >> p > < / formulario > </ cuerpo > </ html > form_handler.php
<!DOCTYPE html> <?php // solicitando el valor de la variable externa "first_name" y filtrándolo. $primerNombre = filtro_entrada ( INPUT_GET , "primer_nombre" , FILTER_SANITIZE_STRING ); ?> < html lang = "en" > < head > < title > Salida </ title > </ head > < body > < p > <?php echo "Hola, ${ firstName } !" ; /* imprimiendo el valor */ ?> </ p > </ body > </ html >El código de muestra anterior utiliza la función de PHP para desinfectar la entrada del usuario antes de insertarla en la página. Simplemente imprimir (hacer eco) de la entrada del usuario en el navegador sin verificarla primero es algo que debe evitarse en los procesadores de formularios seguros: si un usuario ingresó el código JavaScript en elfilter_input()<script>alert(1)</script>nombre de pilacampo, el navegador ejecutará el script en elform_handler.phppágina, como si hubiera sido codificada por el desarrollador; El código malicioso podría ejecutarse de esta manera. fue introducido en PHP 5.2. Los usuarios de versiones anteriores de PHP podían usar la función o expresiones regulares para desinfectar la entrada del usuario antes de hacer algo con ella.filter_input()htmlspecialchars()
Perl es otro lenguaje de uso frecuente para el desarrollo web . Los scripts Perl se utilizan tradicionalmente como aplicaciones de interfaz de puerta de enlace común (CGI). De hecho, Perl es una forma tan común de escribir CGI que a menudo se confunden. Los CGI pueden escribirse en otros lenguajes además de Perl (la compatibilidad con múltiples idiomas es un objetivo de diseño del protocolo CGI) y existen otras formas de hacer que los scripts Perl interoperen con un servidor web además de usar CGI (como FastCGI , Plack o Apache ). mod_perl ).
Los CGI de Perl alguna vez fueron una forma muy común de escribir aplicaciones web . Sin embargo, hoy en día muchos servidores web solo admiten PHP, y los desarrolladores de aplicaciones web a menudo buscan compatibilidad con ellos.
Un CGI de Perl 5 moderno que utilice el módulo CGI con un formulario similar al anterior podría verse así:
formulario_handler.pl
#!/usr/bin/env uso perl estricto ; utilizar CGI qw(:estándar) ; mi $nombre = parámetro ( "primer_nombre" ); imprimir encabezado ; print html ( body ( p ( "Hola, $nombre!" ), ), ); Entre los tipos de secuencias de comandos del lado del servidor más simples y más comúnmente necesarios se encuentra el que simplemente envía por correo electrónico el contenido de un formulario enviado. Sin embargo, los spammers suelen explotar este tipo de script y muchos de los scripts de formulario a correo electrónico más populares que se utilizan son vulnerables al secuestro con el fin de enviar correos electrónicos no deseados. Uno de los scripts más populares de este tipo fue "FormMail.pl" creado por Matt's Script Archive . Hoy en día, este script ya no se usa ampliamente en nuevos desarrollos debido a la falta de actualizaciones, problemas de seguridad y dificultad de configuración.
Algunas empresas ofrecen formularios como servicio alojado . Por lo general, estas empresas ofrecen algún tipo de editor visual, herramientas de generación de informes e infraestructura para crear y alojar los formularios, que pueden integrarse en las páginas web. [8] Las empresas de alojamiento web proporcionan plantillas a sus clientes como un servicio complementario. Otros servicios de alojamiento de formularios ofrecen formularios de contacto gratuitos que un usuario puede instalar en su propio sitio web pegando el código del servicio en el HTML del sitio.
Los formularios HTML fueron implementados por primera vez por el navegador Viola . [9]