Formulario HTML

Los formularios pueden estar compuestos por elementos estándar de interfaz gráfica de usuario :

• <button>— un botón que puede vincularse a una acción como enviar el formulario, restablecerlo o ejecutar una función de JavaScript.
• <input>— un elemento para la entrada de datos del usuario. El elemento varía según el valor de su typeatributo.
• <textarea>— muy similar al campo de entrada, excepto que permite mostrar e introducir varias filas de datos.<text><textarea>
• <select>— una lista desplegable que muestra una lista de elementos que el usuario puede seleccionar

El elemento de entrada puede tener los siguientes tipos:

• text— un cuadro de texto simple que permite introducir una sola línea de texto.
• email- un tipo que requiere una dirección de correo electrónico parcialmente validada<text>
• number- un tipo que requiere un número<text>
• password— similar a , se utiliza con fines de seguridad, en el que los caracteres escritos son invisibles o reemplazados por símbolos como *<text>
• tel— un número de teléfono
• radio— un botón de opción
• file— un control de selección de archivos para cargar un archivo
• reset— un botón de reinicio que, al activarse, 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 alguna acción sobre el formulario (normalmente enviarlo a un servidor).

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

• un cuadro de texto que solicita su nombre
• un par de botones de opción que te piden que elijas entre valores de género
• un cuadro de selección que te ofrece una lista de colores de ojos para elegir.
• un par de casillas de verificación para marcar si te corresponden
• un área de texto para describir tu capacidad atlética
• un botón de envío para enviar los valores actuales del formulario 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 donde cada celda contiene un elemento de entrada de texto. Una vista de árbol también se puede imitar mediante tablas anidadas o, de forma más apropiada desde el punto de vista semántico , listas anidadas . En ambos casos, un proceso del lado del servidor se encarga de procesar la información, mientras que JavaScript gestiona la interacción del usuario. Existen implementaciones de estos elementos de interfaz disponibles a través de bibliotecas de JavaScript como jQuery .

HTML 4 introdujo la etiqueta, que está destinada a representar un título en una interfaz de usuario, y se puede asociar con un control de formulario específico especificando el atributo del control en el atributo de la etiqueta label. ^{[ 1 ]} Esto permite que las etiquetas permanezcan con sus elementos cuando se redimensiona una ventana y permite una funcionalidad más similar a la de escritorio (por ejemplo, al hacer clic en la etiqueta de un botón de radio o una casilla de verificación se activará el elemento de entrada asociado).<label>idfor

HTML 5 introduce varios tipos de entrada que pueden ser representados por 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 emailla introducción de direcciones de correo electrónico, telnúmeros de teléfono y numbervalores 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 "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 datetipo de entrada muestra un calendario del 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 que simplemente verifica que el valor introducido sea una representación hexadecimal correcta de un color, según la especificación, ^{[ 4 ]} o un widget selector de color (esta última es la solución utilizada en la mayoría de los navegadores que admiten este atributo).

El lenguaje de scripting del lado del cliente por excelencia para sitios web es JavaScript . El uso de JavaScript en el Modelo de Objetos del Documento (DOM) da lugar 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 con formularios tienen limitaciones, a menudo sirven para realizar la validación previa de los datos del formulario o para prepararlos para su envío a un programa del lado del servidor. Sin embargo, este uso está siendo reemplazado por los nuevos tipos de campo y atributos de HTML5 .inputrequired

El código del lado del servidor puede realizar una amplia gama 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 , pasando por la corrección ortográfica y el envío de 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 la funcionalidad en el servidor en lugar de depender de diferentes navegadores web para implementar diversas funciones de forma consistente y estandarizada . Además, el procesamiento de formularios en un servidor suele resultar 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 sanitizació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 se realiza en el servidor, mientras que el procesamiento del lado del cliente se realiza en los ordenadores de cada cliente.

Algunos de los lenguajes interpretados que se utilizan habitualmente para diseñar formularios interactivos en el desarrollo web son PHP , Python , Ruby , Perl , JSP , Adobe ColdFusion y algunos de los lenguajes compilados que se utilizan habitualmente son Java y C# con ASP.NET .

< ! DOCTYPE html > < html lang = " en " > <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>​​​​​​​​​​​

<!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 >

#!/usr/bin/env perl use strict ; use CGI qw(:standard) ;mi $nombre = param ( "first_name" ); print header ; print html ( body ( p ( "Hola, $nombre!" ), ), );

Algunas empresas ofrecen formularios como servicio alojado . Por lo general, estas empresas proporcionan 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 ofrecen plantillas a sus clientes como servicio adicional. Otros servicios de alojamiento de formularios ofrecen formularios de contacto gratuitos que el usuario puede instalar en su propio sitio web pegando el código del servicio en el HTML del sitio.