Formulario (HTML)

Campos de entrada en una página web

Un formulario web , formulario web o formulario HTML en una página web permite al usuario ingresar datos que se envían a un servidor para su procesamiento. Los formularios pueden parecerse a formularios impresos o de bases de datos porque los usuarios de la web los completan con 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 tarjetas de crédito para pedir un producto, o se pueden usar para recuperar resultados de búsqueda de un motor de búsqueda .

Descripción

Formulario de muestra. El formulario está incluido en una tabla HTML para su diseño visual.

Los formularios están incluidos en el elemento HTML <form> . Este elemento 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.

Elementos

Los formularios pueden estar compuestos por 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 de <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 introducidos son invisibles o se reemplazan por símbolos como *)
• <radio>- un botón de radio
• <file>- un control de selección de archivo para cargar un archivo
• <reset>- un botón de reinicio que, cuando se activa, le dice al navegador que restaure los valores a sus valores iniciales.
• <submit>- un botón que le dice al navegador que realice una acción en el formulario (generalmente para enviarlo a un servidor)
• <textarea>- al igual que el <text>campo de entrada, excepto que <textarea>permite que se muestren e ingresen varias filas de datos
• <select>- una lista desplegable que muestra una lista de elementos que un usuario puede seleccionar

La imagen de muestra de la derecha muestra la mayoría de estos elementos:

• un cuadro de texto preguntando tu nombre
• un par de botones de radio que te piden que elijas tu sexo
• un cuadro de selección que le ofrece una lista de colores de ojos para elegir
• un par de casillas de verificación para hacer clic en si se aplican a usted
• un área de texto para describir su capacidad atlética
• un botón de enviar para enviarlo al servidor

Estos elementos básicos proporcionan los elementos de interfaz gráfica de usuario (GUI) más comunes , pero no todos. Por ejemplo, no hay equivalentes a una vista de árbol o una vista de cuadrícula .

Sin embargo, una vista de cuadrícula se puede imitar utilizando una tabla HTML estándar con cada celda que contiene un elemento de entrada de texto. Una vista de árbol también se puede imitar a través de tablas anidadas o, de forma más apropiada 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 idatributo del control en el atributo de la etiqueta de la etiqueta for. ^[1] Esto permite que las etiquetas permanezcan con sus elementos cuando se cambia el tamaño de una ventana y permitir más funciones similares a las 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 presenta 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>para números de teléfono, <number>para 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 no es entrada del usuario (como el texto 'Buscar' que se muestra en muchos campos de entrada de búsqueda antes de introducir un término de búsqueda). Estas tareas solían manejarse con JavaScript , pero se habían vuelto tan comunes que se agregó soporte para ellas 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, de acuerdo con la especificación, ^[4] o un widget selector de color (este último es la solución utilizado en la mayoría de los navegadores que admiten este atributo).

Envío

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 de 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 de espacios con " +" en lugar de " %20". Otra posible codificación, tipo de medio de Internet multipart / form-data, también está disponible y es común para envíos de archivos basados ​​en POST.

Usar con lenguajes de programación

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 usar cualquier lenguaje de programación en el servidor para procesar los datos de un formulario, los lenguajes más comúnmente usados ​​son los lenguajes de scripting , 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 saturación del búfer .

Lado del cliente

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 que se utilizan junto con los formularios son limitados, a menudo pueden servir para realizar la validación previa de los datos del formulario y / 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 campo de entrada y el atributo obligatorio de HTML5 .

Ejecución del lado del servidor

El código del lado del servidor puede realizar una gran 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 , 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.formas. Además, el procesamiento de formularios en un servidor a menudo da como resultado 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.

Formulario de registro del software de tienda web de comercio electrónico basado en PHP ZenCart

Idiomas interpretados

Algunos de los lenguajes interpretados comúnmente usados ​​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 usados ​​son Java y C # con ASP.NET .

PHP

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. Luego, el archivo PHP de destino accede a los datos transmitidos por el formulario a través de PHP $_POSTo $_GETvariables, según el valor del methodatributo utilizado en el formulario. Aquí hay un script PHP básico para el controlador de formularios que mostrará el contenido delprimer nombre campo de entrada en la página:

form.html

<! DOCTYPE html>< html >< cabeza >< título > Formulario </ título ></ cabeza >< cuerpo >< form  action = "form_handler.php" >Nombre: < input  name = "firstname"  type = "text" >< input  type = "submit"  value = "Submit" ></ formulario ></ cuerpo ></ html >

form_handler.php

<! DOCTYPE html>< html >< cabeza >< título > Salida </ título ></ cabeza >< cuerpo ><? php// Esto imprimirá lo que el usuario ingresó en la página form.html.$ nombre  =  filter_input ( INPUT_GET ,  'nombre' ,  FILTER_SANITIZE_STRING );echo  "Hola" . $ nombre . "!" ;?></ cuerpo ></ html >

El código de muestra anterior usa la función de PHP para desinfectar la entrada del usuario antes de insertarla en la página. Simplemente imprimir (hacer eco) la entrada del usuario en el navegador sin verificarlo 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>primer nombre campo, el navegador ejecutará el script en el form_handler.phppágina, como si hubiera sido codificada por el desarrollador; El código malicioso podría ejecutarse de esta manera. se introdujo en PHP 5.2. Los usuarios de versiones anteriores de PHP podrían usar la función o expresiones regulares para desinfectar la entrada del usuario antes de hacer algo con ella.filter_input()htmlspecialchars()

Lenguaje de programación Perl

Perl es otro lenguaje que se usa 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. CGI se puede escribir en otros idiomas que Perl (compatibilidad con múltiples idiomas es un objetivo de diseño del protocolo CGI) y hay otras maneras de hacer scripts de Perl interoperar con un servidor web que el uso de CGI (como FastCGI , Plack o Apache 's mod_perl ).

Los CGI de Perl fueron una vez una forma muy común de escribir aplicaciones web . Sin embargo, en la actualidad, muchos servidores web solo admiten PHP y los desarrolladores de aplicaciones web a menudo buscan compatibilidad con ellos.

Un CGI moderno de Perl 5 que usa el módulo CGI con un formulario similar al anterior podría verse así:

form_handler.pl

#! / usr / bin / env perl use  estricto ; use  CGI  qw (: estándar) ;my  $ nombre  =  param ( 'nombre' ); encabezado de impresión  ; print html ( body ( p ( "¡Hola, $ nombre!" ), ), );    

Secuencias de comandos de formulario a correo electrónico

Entre los tipos de script 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 en uso 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.

Constructores de formularios

Algunas empresas ofrecen formularios como servicio alojado . Por lo general, estas empresas brindan algún tipo de editor visual, herramientas de informes e infraestructura para crear y alojar los formularios, que pueden integrarse en páginas web. ^[8] Las empresas de alojamiento web proporcionan plantillas a sus clientes como un servicio adicional. 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.

Ver también

• CAPTCHA
• Postback
• XForms
• HTML

Referencias

1. "HTML / Elementos / etiqueta" . wiki de w3.org .
2. Satrom, Brandon (noviembre de 2011). "Mejores formularios web con formularios HTML5" . Revista MSDN . Microsoft . Consultado el 20 de febrero de 2014 .
3. "Formularios - HTML5" . w3.org . W3C . Consultado el 20 de febrero de 2014 .
4. "tipo de entrada = color - control de pocillo de color" . w3.org . W3C . Consultado el 31 de octubre de 2014 .
5. El soporte de agente de usuario para elenvío de formularios HTML basados ​​en correo electrónico, utilizando una URL 'mailto'como la acción del formulario, se propuso en la sección 5.6 de RFC 1867, durante la era de HTML 3.2. Varios navegadores web lo implementaron invocando un programa de correo electrónico separado, utilizando sus propiascapacidades SMTP rudimentariaso convirtiéndose en suites de Internet mediante la implementación de clientes de correo electrónico completos. Aunque a veces no es confiable, fue brevemente popular como una forma simple de transmitir datos de formularios sin involucrar un servidor web oscripts CGI .
6. "PHP: preprocesador de hipertexto" .
7. "Enciclopedia web" .
8. Garofalo, Josh. "Introducción a formularios en línea y creadores de formularios" . Blog de Blitzen .

Enlaces externos

• Formularios en documentos HTML , la página de especificaciones del W3C para formularios en HTML 4.
• Especificación de formularios HTML5
• Wikilibros: lenguaje de marcado de hipertexto / formularios
• Pruebe las propiedades HTML.