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 mediante 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 solicitar un producto, o se pueden usar para recuperar resultados de búsqueda de un motor de búsqueda .
Los formularios se incluyen en el elemento HTML <form> . Este elemento HTML especifica el punto de comunicación al que se deben enviar los datos ingresados en el formulario y el método de envío de los datos GET.POST
Los formularios pueden estar compuestos de elementos de interfaz gráfica de usuario estándar :
<text>— un cuadro de texto simple que permite la entrada de 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 con fines de seguridad, en los 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 enviarlo 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 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 una vista de cuadrícula .
Sin embargo, es posible imitar una vista de cuadrícula utilizando una tabla HTML estándar en la que cada celda contiene un elemento de entrada de texto. También se puede imitar una vista de árbol mediante tablas anidadas o, de forma más semánticamente apropiada, listas anidadas . En ambos casos, un proceso del lado del servidor es responsable de procesar la información, mientras que JavaScript se encarga de la interacción del usuario. Las implementaciones de estos elementos de interfaz están disponibles a través de bibliotecas de JavaScript como jQuery .
HTML 4 introdujo la <label>etiqueta, que tiene como objetivo 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 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 parecida 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 ser representadas por otros elementos de la interfaz. Algunas se basan en campos de entrada de texto y están destinadas a introducir y validar datos comunes específicos. Estos incluyen <email>la introducción de 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 una entrada del usuario (como el texto "Buscar" que se muestra en muchos campos de entrada de búsqueda antes de que se introduzca un término de búsqueda). Estas tareas solían gestionarse con JavaScript , pero se habían vuelto tan comunes que se añadió soporte para ellas al estándar. El <date>tipo de entrada muestra un calendario desde el que el usuario puede seleccionar una fecha o un rango de fechas. [2] [3] Y el colortipo de entrada puede representarse como un texto de entrada simplemente comprobando que el valor introducido es una representación hexadecimal correcta de un color, según la especificación, [4] o un widget selector de color (siendo esta última la solución utilizada en la mayoría de los navegadores que admiten este atributo).
Cuando se envían datos que se han ingresado 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 utilizó 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 la sustitución de espacios con " +" en lugar de " %20". Otra codificación posible, el tipo de medio de Internet multipart/form-data , también está disponible y es común para los envíos de archivos basados en POST.
Los formularios suelen combinarse 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 script , que tienden a tener una funcionalidad de manejo de cadenas más fuerte 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 de 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 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 que se utilizan junto con los formularios son limitados, a menudo pueden servir para realizar una validación previa de los datos del formulario o para 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: desde autenticar un inicio de sesión hasta recuperar y almacenar datos en una base de datos , revisar la ortografía o enviar correos electrónicos . Una ventaja significativa de la ejecución del lado del servidor sobre la del lado del cliente es la concentración de 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 suministrados 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 utilizar PHP con un formulario HTML, la URL del script PHP se especifica en el actionatributo de la etiqueta del formulario. A continuación, el archivo PHP de destino accede a los datos que pasa el formulario a través de las variables PHP $_POST, $_GETsegún el valor del methodatributo utilizado en el formulario. A continuación, se muestra un script PHP de controlador de formulario básico que mostrará el contenido del formulario.nombre 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 >< label > Nombre: < input name = "first_name" /></ label ></ p > < p >< button type = "submit" > Enviar </ button ></ p > </ form > </ body > </ html >manejador_de_formularios.php
<!DOCTYPE html> <?php // solicitando el valor de la variable externa "first_name" y filtrándolo. $firstName = filter_input ( INPUT_GET , "first_name" , 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 ejemplo anterior utiliza la función de PHP para limpiar la entrada del usuario antes de insertarla en la página. Simplemente imprimir (hacer eco) la entrada del usuario en el navegador sin verificarla primero es algo que se debe evitar en los procesadores de formularios seguros: si un usuario ingresó el código JavaScript en el navegador,filter_input()<script>alert(1)</script>nombre de pilacampo, el navegador ejecutaría el script en elmanejador_de_formularios.phppágina, tal como si hubiera sido codificada por el desarrollador; de esta manera se podría ejecutar código malicioso. se introdujo en PHP 5.2. Los usuarios de versiones anteriores de PHP podían usar la función o expresiones regulares para sanear la entrada del usuario antes de hacer algo con ella.filter_input()htmlspecialchars()
Perl es otro lenguaje que se utiliza a menudo para el desarrollo web . Los scripts de 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 dos. Los CGI pueden escribirse en otros lenguajes además de Perl (la compatibilidad con varios lenguajes es un objetivo de diseño del protocolo CGI) y existen otras formas de hacer que los scripts de Perl interactúen con un servidor web además de usar CGI (como FastCGI , Plack o mod_perl de Apache ).
En su momento, los CGI de Perl 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 suelen buscar compatibilidad con ellos.
Un CGI moderno de Perl 5 que utilice el módulo CGI con un formato similar al anterior podría verse así:
formulario_handler.pl
#!/usr/bin/env perl usa estricto ; usa CGI qw(:standard) ; mi $nombre = param ( "nombre" ); imprimir encabezado ; imprimir html ( cuerpo) ( p ( "Hola, $nombre!" ), ), ); Entre los tipos de scripts 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, este tipo de script es frecuentemente explotado por spammers , y muchos de los scripts de formulario a correo electrónico más populares que se utilizan son vulnerables a ser pirateados con el propósito 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 proporcionan algún tipo de editor visual, herramientas de generación de informes e infraestructura para crear y alojar los formularios, que se pueden integrar en 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]