Formulario HTML

Un formulario web, un formulario web o un formulario HTML en una página web permite al usuario introducir 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 utilizar para introducir datos de envío o de tarjeta de crédito para pedir un producto, o se pueden utilizar para recuperar resultados de búsqueda de un motor de búsqueda.

Descripción

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, GET o POST.

Elementos

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

• — un simple cuadro de texto que permite la entrada de una sola línea de texto.
• - un tipo de que requiere una dirección de correo electrónico validada parcialmente
• - un tipo de que requiere un número
• - similar a , se utiliza para fines de seguridad, en los que los caracteres inscritos son invisibles o reemplazados por símbolos como *
• - un botón de radio
• — un control selecto de archivos para subir un archivo
• — un botón de reset que, cuando se activa, le dice al navegador que restablezca los valores de la forma actual, a sus valores iniciales.
• — un botón que le dice al navegador que tome acción en el formulario (típicamente para enviarlo a un servidor)
• </code> - mucho como el <code><text></code> campo de entrada excepto un <code><textarea></code> permite que se muestren y introduzcan múltiples filas de datos</li><li><code><select></code> — una lista desplegable que muestra una lista de elementos que un usuario puede seleccionar</li></ul><p>La imagen muestral de la derecha muestra la mayoría de estos elementos: </p><ul><li>una caja de texto pidiendo su nombre</li><li>un par de botones de radio pidiéndole que elija entre los valores de género</li><li>una caja selecta que le da una lista de colores de los ojos para elegir</li><li>un par de casillas de verificación para hacer clic en si se aplican a usted</li><li>un área de texto para describir su habilidad atlética</li><li>un botón de envío para enviar valores de formularios actuales al servidor</li></ul><p>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. </p><p>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 mediante 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. </p><p>HTML 4 introdujo la etiqueta <code><label></code>, que pretende representar un título en una interfaz de usuario y puede asociarse con un control de formulario específico especificando el <code>id</. atributo code> del control en el atributo <code>for</code> de la etiqueta de etiqueta. Esto permite que las etiquetas permanezcan con sus elementos cuando se cambia el tamaño de una ventana y permitir 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). </p><p>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 <code><email></code> para ingresar direcciones de correo electrónico, <code><tel></code> para números de teléfono, <code><number></code> 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 que no es entrada del usuario (como el botón 'Buscar'). ; texto 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 tipo de entrada <code><date></code> muestra un calendario desde el cual el usuario puede seleccionar una fecha o un rango de fechas. Y el tipo de entrada <code>color</code> 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, o un widget de selección de color (siendo esta última la solución utilizada en la mayoría de los navegadores que admiten este atributo). </p><h2>Presentación</h2><p>Cuando se envían datos ingresados en formularios HTML, los nombres y valores de 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. 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 de espacios con & #34;<código>+</code>" en lugar de "<code>%20</code>". 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. </p><h2>Uso con lenguajes de programación</h2><p>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. </p><p>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 potente que los lenguajes de programación como C, y también tienen Gestión automática de la memoria que ayuda a prevenir ataques de desbordamiento del búfer. </p><h3>Lado del cliente</h3><p>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. </p><p>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 campo <code>input</code> y el atributo <code>required</code> de HTML5. </p><h3>Ejecución del lado del servidor</h3><p>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 y revisar la ortografía. , para 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. </p><figure class="mw-default-size" typeof="mw:File/Thumb"><a class="mw-file-description" href="https://en.wikipedia.org/wiki/File:Zen-cart_Web-Shop_Frontend_Registration_Form.png"><img class="mw-file-element" data-file-height="738" data-file-width="1009" decoding="async" height="161" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Zen-cart_Web-Shop_Frontend_Registration_Form.png/220px-Zen-cart_Web-Shop_Frontend_Registration_Form.png" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Zen-cart_Web-Shop_Frontend_Registration_Form.png/330px-Zen-cart_Web-Shop_Frontend_Registration_Form.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Zen-cart_Web-Shop_Frontend_Registration_Form.png/440px-Zen-cart_Web-Shop_Frontend_Registration_Form.png 2x" width="220"/></a><figcaption>Forma de registro del software de tienda electrónica basado en PHP ZenCart</figcaption></figure><h3>Idiomas interpretados</h3><p>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. </p><h4>PHP</h4><p>PHP es un lenguaje muy común utilizado para el lado del servidor y#34;programación " y es uno de los pocos lenguajes creados específicamente para la programación web. </p><p>Para usar PHP con un formulario HTML, la URL del script PHP se especifica en el atributo <code>action</code> de la etiqueta del formulario. El archivo PHP de destino luego accede a los datos pasados por el formulario a través del <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><span class=" de PHP. nv">$_POST</span></code> o <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><span class="nv">$ _GET</span></code> variables, dependiendo del valor del atributo <code>method</code> utilizado en el formulario. Aquí hay un script PHP de controlador de formulario básico que mostrará el contenido de <samp style="padding-left:0.4em; padding-right:0.4em; color:var(--color-subtle, #666666);"> campo de entrada first_name</samp> en la página: </p><p><b><samp style="padding-left:0.4em; padding-right:0.4em; color:var(--color-sutil, #666666);">form.html</samp></b> </p><div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp">¡Seguido! DOCTYPE html</span><span class="p">c)</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">■</span><span class="p">c)</span><span class="nt">cabeza</span><span class="p">■</span> <span class="p">c)</span><span class="nt">Título</span><span class="p">■</span>Formulario<span class="p">.</span><span class="nt">Título</span><span class="p">■</span><span class="p">.</span><span class="nt">cabeza</span><span class="p">■</span><span class="p">c)</span><span class="nt">cuerpo</span><span class="p">■</span> <span class="p">c)</span><span class="nt">forma</span> <span class="na">acción</span><span class="o">=</span><span class="s">"form_handler.php"</span><span class="p">■</span> <span class="p">c)</span><span class="nt">p</span><span class="p">■ c)</span><span class="nt">etiqueta</span><span class="p">■</span>Nombre: <span class="p">c)</span><span class="nt">entrada</span> <span class="na">Nombre</span><span class="o">=</span><span class="s">"primer nombre"</span> <span class="p">/</span><span class="nt">etiqueta</span><span class="p">"</span><span class="nt">p</span><span class="p">■</span> <span class="p">c)</span><span class="nt">p</span><span class="p">■ c)</span><span class="nt">botón</span> <span class="na">Tipo</span><span class="o">=</span><span class="s">"Enviar"</span><span class="p">■</span>Submit<span class="p">.</span><span class="nt">botón</span><span class="p">"</span><span class="nt">p</span><span class="p">■</span> <span class="p">.</span><span class="nt">forma</span><span class="p">■</span><span class="p">.</span><span class="nt">cuerpo</span><span class="p">■</span><span class="p">.</span><span class="nt">html</span><span class="p">■</span></pre></div><p><b><samp style="padding-left:0.4em; padding-right:0.4em; color:var(--color-subtle, #666666);">form_handler.php</samp></b> </p><div class="mw-highlight mw-highlight-lang-html+php mw-content-ltr" dir="ltr"><pre><span></span><span class="cp">¡Seguido! DOCTYPE html</span><span class="cp">Identificado?php</span><span class="c1">// solicitar el valor de la variable externa "primer nombre" y filtrarla.</span><span class="nv">Primero Nombre</span> <span class="o">=</span> <span class="nb">filter_input</span><span class="p">()</span><span class="nx">INPUT_GET</span><span class="p">,</span> <span class="s2">"primer nombre"</span><span class="p">,</span> <span class="nx">FILTER_SANITIZE_STRING</span><span class="p">);</span><span class="cp">?</span><span class="p">c)</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">■</span><span class="p">c)</span><span class="nt">cabeza</span><span class="p">■</span> <span class="p">c)</span><span class="nt">Título</span><span class="p">■</span>Producto<span class="p">.</span><span class="nt">Título</span><span class="p">■</span><span class="p">.</span><span class="nt">cabeza</span><span class="p">■</span><span class="p">c)</span><span class="nt">cuerpo</span><span class="p">■</span> <span class="p">c)</span><span class="nt">p</span><span class="p">■</span> <span class="cp">Identificado?php</span> <span class="k">eco</span> <span class="s2">"Hola, </span><span class="si">${</span><span class="nv">primero Nombre</span><span class="si">}</span><span class="s2">!"</span><span class="p">;</span> <span class="cm">/* imprimir el valor */</span><span class="cp">?</span> <span class="p">.</span><span class="nt">p</span><span class="p">■</span><span class="p">.</span><span class="nt">cuerpo</span><span class="p">■</span><span class="p">.</span><span class="nt">html</span><span class="p">■</span></pre></div><p>El código de muestra anterior utiliza PHP <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><span class="nb">filter_input< /span><span class="p">()</span></code> función 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 <code class="mw-highlight mw-highlight-lang-html mw-content -ltr" dir="ltr"><span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="nx">alerta</span><span class="p">(</span><span class="mf">1</span><span class="p">)< /</span><span class="nt">script</span><span class="p">></span></code> en <samp style="padding-left:0.4em; padding-right:0.4em; color:var(--color-subtle, #666666);">firstname</samp> campo, el navegador ejecutaría el script en el campo <samp style="padding-left:0.4em; padding-right:0.4em; color:var(--color-subtle, #666666);">form_handler.php</samp> página, como si hubiera sido codificada por el desarrollador; El código malicioso podría ejecutarse de esta manera. <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><span class="nb">filter_input</span><span class="p">() </span></code> se introdujo en PHP 5.2. Los usuarios de versiones anteriores de PHP podían utilizar <code class="mw-highlight mw-highlight-lang-php mw-content-ltr" dir="ltr"><span class="nb">htmlspecialchars</span><span función class="p">()</span></code> o expresiones regulares para desinfectar la entrada del usuario antes de hacer algo con ella. </p><h4>Lenguaje de programación Perl</h4><p>Perl es otro lenguaje que se utiliza a menudo 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). ;s mod_perl). </p><p>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. </p><p>Un CGI de Perl 5 moderno que utilice el módulo CGI con un formulario similar al anterior podría verse así: </p><p><b><samp style="padding-left:0.4em; padding-right:0.4em; color:var(--color-subtle, #666666);">form_handler.pl</samp></b> </p><div class="mw-highlight mw-highlight-lang-perl mw-content-ltr" dir="ltr"><pre><span></span><span class="ch">#/usr/bin/env perl</span><span class="k">uso</span><span class="w"> </span><span class="nn">estricto</span><span class="p">;</span><span class="k">uso</span><span class="w"> </span><span class="nn">CGI</span><span class="w"> </span><span class="sx">qw(:standard)</span><span class="p">;</span><span class="k">#</span><span class="w"> </span><span class="nv">Nombre</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">param</span><span class="p">()</span><span class="s">"primer nombre"</span><span class="p">);</span><span class="k">impresión</span><span class="w"> </span><span class="n">header</span><span class="p">;</span><span class="k">impresión</span><span class="w"> </span><span class="n">html</span><span class="p">()</span><span class="w"> </span><span class="n">cuerpo</span><span class="p">()</span><span class="w"> </span><span class="n">p</span><span class="p">()</span><span class="s">"¡Hola, nombre de $!"</span><span class="p">),</span><span class="w"> </span><span class="p">),</span><span class="p">);</span></pre></div><h4>scripts de formulario a correo electrónico</h4><p>Entre los tipos más simples y más comúnmente necesarios de script lado servidor es aquello que simplemente envía un correo electrónico al contenido de un formulario enviado. Este tipo de script es explotado frecuentemente por spammers, sin embargo, y muchos de los scripts de forma a correo más populares en uso son vulnerables al secuestro con el propósito de enviar correos electrónicos basura. Uno de los scripts más populares de este tipo fue "FormMail.pl" hecho por el Archivo de Script de Matt. Hoy en día, este script ya no se utiliza ampliamente en el nuevo desarrollo debido a la falta de actualizaciones, preocupaciones de seguridad y dificultad de configuración. </p><h3>Creadores de formularios</h3><p>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. Las empresas de alojamiento web proporcionan plantillas a sus clientes como 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. </p><h2>Historia</h2><p>Los formularios HTML fueron implementados por primera vez por el navegador Viola. </p></div><!--[--><!----><!--[--><!--]--><div class="more-results"> Más resultados... </div><!--]--><div class="related-video-wrapper" data-nosnippet><div class="matched-video"><span>Te puede interesar</span><iframe width="560" height="315" src="https://www.youtube.com/embed/lTQ1KU6NDrU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div></main><!--]--><footer id="piedepaginar" class="piedepagina"><link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet"><div class="footerContainer"><div class="headerWrapper"><header class="footerLogo"><span class="metamainlogo"><img src="data:image/webp;base64,UklGRoQDAABXRUJQVlA4WAoAAAAQAAAAPwAAPwAAQUxQSLAAAAABcFpr29q8K4TXIJmMgp5GI5XCAuQTV5iBftW/jK/viYgJwGMrqVeH888eV3Vs4WWtWIjzj4t5rrzgTeWZUI6cJ8FwJu2DB95wph1cAOr0TDxWgVIyyRzW8kw9N1PBdQzbM3m1YVsd2XZndkn3B+yR7bBhW7dsdSK4RGQtuGYmCsl0ygBlxDRSADgDT+/g3u9Zeh+P7ZFkOHU2niv5XPyamGcKXjbjdnv4ncO2TUw8BlZQOCCuAgAAEA0AnQEqQABAAD5tKpJFpCIhlwtuqEAGxKAHjeQEgi2wF2kwJ3obtJhgdmFMy4naPT0J9Bz017BKOOzJC43PG59yxl1m7mYUS9TyyL0ptMch8uybByfBk7BUfyawFwSTNLxfFzwDrOMiQ0kZy1Q7sAAA/vFNL/7z+XNfe2Gw+n/yvladk0KjNDMUvodAfZJNyM3bDviJxigd3bmV3HL/lMqPirR7L9/7M7WCmv58Jyqc5ENWBUxnUgLON5OhuBaummLKsjYU+xMRGYwCZAE0hNztb2LIT1SDybKcPR1Zfzzr0PND1D259N2JYnWJ2VzhMwkpcGgtDuRFjRTFz0TNr2pEkdZBvMaB5k/LE4ICQd1aPhsx23WeSANZZ1nGu1qPyZiAR4YbSjCoTYU+wOLEZNNSK4v9vWee05zbdCSpS+h2bwzB6163DE5ngi/I1Jpgptu3o0XMk7HDpZZALKXwJxPro+f8SeqvIeMfMeR/cEp0kmFjiye2IE1uKBzWBnQKmU7nF/Rx8dzXdoYz50pSD+bpKVR90kF6KEslioMq5MqXEb+7wkD3d3XaMKCpJ/xnD4Vb/nhECzgJQaie1f8s811Ct01cIUgcsc1/RDdoM1HlwC7OEOlIZi+dOxzv7KVlU0EokDXOoduJfrvLez62qusA29VYImd+d4adMQKlkqrl34S94mdtanzJ7IZwTYSPwl2QPT5HPcu3Q4PhSMaKTOidi5qygq9exxs/jRr7xzfj5vXLoQNTNjCU/vaE9C+8yf8Vk9yXiRRn1VtMhxVUDFH+t8+V4f2+sVWCwErfYtvq3bAYlH6m35jpL6KGEWjXQFs7p/tzkKO4TPQws6DhFft2wpsPzOXTTKa1WaCI8RUKIPvlTJbuSV2mpQp4iTUyoHbkyim8y1vYCsJ1AAA=" alt="Academia Lab logo" class="logo-footer"><a href=" https://academia-lab.com/ "> AcademiaLab </a></span></header></div><div class="infoWrapper"><div><span></span><span>YouTube: <a href="https://www.youtube.com/@academialab">@academialab</a></span><span>TikTok: <a href="https://www.tiktok.com/@academialab">@academialab</a></span><span>LinkedIn: <a href="https://www.linkedin.com/company/academialab/">@academialab</a></span><span class="non">Facebook: <a href="https://www.facebook.com/academialabf">@academialabf</a></span><span class="non">Instagram: <a href="https://www.instagram.com/academialabf/">@academialabf</a></span><span class="non">X: <a href="https://x.com/academialabf">@academialabf</a></span></div><div class="to-remove"><span><a href="#">Tema</a></span><span><a href="#">Categorías</a></span><span><a href="#">Libros</a></span></div><div><span>Site design / logo ©</span><span>2024 AcademiaLab</span><span><a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.es">CC BY-NC-ND</a></span><span><a href="mailto:info@academia-lab.com">info@academia-lab.com</a></span></div></div></div></footer><span></span><dialog id="adjustDlg"><div class="adjustDlgWrapper"><div class="adjustDlgItem"><div class="adjustDlgItemDesc">Tamaño del texto:</div><div class="adjustDlgItemSett"><div class="adjustDlgRadioWrapper"><div class="adjustDlgRadioOpt"><input type="radio" value="14" id="sText" name="loptions" checked><label class="adjustDlgRadioOptLabel" for="sText">Pequeño</label></div><div class="adjustDlgRadioOpt"><input type="radio" value="16" name="loptions" id="mText"><label class="adjustDlgRadioOptLabel" for="mText">Mediano</label></div><div class="adjustDlgRadioOpt"><input type="radio" value="20" name="loptions" id="bText"><label class="adjustDlgRadioOptLabel" for="bText">Grande</label></div></div></div></div></div></dialog><!--[--><ul class="custom-menu"><li data-action="copy">Copiar</li><li data-action="edit">Editar</li><li data-action="summarize">Resumir</li></ul><div class="custom-ia-panel"><div class="custom-ia-panel-wrapper"><l-tail-chase size="40" speed="1.75" color="black"></l-tail-chase></div></div><div class="editor-options"><div class="editor-options-w"><span class="icon material-symbols-outlined" data-action="editor-undo">undo</span><span class="icon material-symbols-outlined" data-action="editor-redo">redo</span><div class="divider"></div><span class="icon material-symbols-outlined" data-action="editor-bold">format_bold</span><span class="icon material-symbols-outlined" data-action="editor-italic">format_italic</span><span class="icon material-symbols-outlined" data-action="editor-underline">format_underlined</span><span class="icon material-symbols-outlined" data-action="editor-strikethrough">strikethrough_s</span><span class="icon material-symbols-outlined" data-action="editor-superscript">superscript</span><span class="icon material-symbols-outlined" data-action="editor-subscript">subscript</span><span class="icon material-symbols-outlined" data-action="editor-linkpopup">link</span><div class="divider"></div><span class="icon material-symbols-outlined" data-action="editor-save">save</span></div></div><div class="editor-link"><div class="editor-link-w"><div class="link-field" contenteditable="true"></div><div class="link-options"><span class="icon material-symbols-outlined" data-action="editor-linkpopup-cancel">cancel</span><span class="icon material-symbols-outlined" data-action="editor-linkpopup-add">check_circle</span></div></div></div><!--]--><!--]--></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":19,"once":21,"_errors":22,"serverRendered":25,"path":26},["ShallowReactive",3],{"content":4,"related":15},{"status":5,"payload":7},{"code":6},200,{"id":8,"slug":9,"datePublished":10,"dateModified":10,"author":11,"status":12,"title":13,"content":14},691243,"formulario-html","2024-06-12T21:27:47.771653Z","AcademiaLab Editors","","Formulario HTML","\u003Cdiv class=\"shortdescription nomobile noexcerpt noprint searchaux\" style=\"display:none\">Campos de entrada en una página web\u003C/div>\u003Cp>Un \u003Cb>formulario web\u003C/b>, un \u003Cb>formulario web\u003C/b> o un \u003Cb>formulario HTML\u003C/b> en una página web permite al usuario introducir 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 utilizar para introducir datos de envío o de tarjeta de crédito para pedir un producto, o se pueden utilizar para recuperar resultados de búsqueda de un motor de búsqueda.\n\u003C/p>\u003Ch2>Descripción\u003C/h2>\u003Cfigure typeof=\"mw:File/Thumb\">\u003Ca class=\"mw-file-description\" href=\"https://en.wikipedia.org/wiki/File:Sample_web_form.png\">\u003Cimg alt=\"test\" class=\"mw-file-element\" data-file-height=\"320\" data-file-width=\"393\" decoding=\"async\" height=\"320\" src=\"https://upload.wikimedia.org/wikipedia/commons/3/34/Sample_web_form.png\" width=\"393\"/>\u003C/a>\u003Cfigcaption>Forma de muestra. El formulario se adjunta en una tabla HTML para el diseño visual.\u003C/figcaption>\u003C/figure>\u003Cp>Los formularios están encerrados en el elemento HTML \u003Ccode><form>\u003C/code>. 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, \u003Ccode>GET\u003C/code> o \u003Ccode>POST\u003C/code>.\n\u003C/p>\u003Ch3>Elementos\u003C/h3>\u003Cp>Los formularios pueden estar compuestos por elementos estándar de la interfaz gráfica de usuario:\n\u003C/p>\u003Cul>\u003Cli>\u003Ccode>\u003Ctext>\u003C/code> — un simple cuadro de texto que permite la entrada de una sola línea de texto.\u003C/li>\u003Cli>\u003Ccode>\u003Cemail>\u003C/code> - un tipo de \u003Ccode>\u003Ctext>\u003C/code> que requiere una dirección de correo electrónico validada parcialmente\u003C/li>\u003Cli>\u003Ccode>\u003Cnumber>\u003C/code> - un tipo de \u003Ccode>\u003Ctext>\u003C/code> que requiere un número\u003C/li>\u003Cli>\u003Ccode>\u003Cpassword>\u003C/code> - similar a \u003Ccode>\u003Ctext>\u003C/code>, se utiliza para fines de seguridad, en los que los caracteres inscritos son invisibles o reemplazados por símbolos como *\u003C/li>\u003Cli>\u003Ccode>\u003Cradio>\u003C/code> - un botón de radio\u003C/li>\u003Cli>\u003Ccode>\u003Cfile>\u003C/code> — un control selecto de archivos para subir un archivo\u003C/li>\u003Cli>\u003Ccode>\u003Creset>\u003C/code> — un botón de reset que, cuando se activa, le dice al navegador que restablezca los valores de la forma actual, a sus valores iniciales.\u003C/li>\u003Cli>\u003Ccode>\u003Csubmit>\u003C/code> — un botón que le dice al navegador que tome acción en el formulario (típicamente para enviarlo a un servidor)\u003C/li>\u003Cli>\u003Ccode>\u003Ctextarea>\u003C/code> - mucho como el \u003Ccode>\u003Ctext>\u003C/code> campo de entrada excepto un \u003Ccode>\u003Ctextarea>\u003C/code> permite que se muestren y introduzcan múltiples filas de datos\u003C/li>\u003Cli>\u003Ccode>\u003Cselect>\u003C/code> — una lista desplegable que muestra una lista de elementos que un usuario puede seleccionar\u003C/li>\u003C/ul>\u003Cp>La imagen muestral de la derecha muestra la mayoría de estos elementos:\n\u003C/p>\u003Cul>\u003Cli>una caja de texto pidiendo su nombre\u003C/li>\u003Cli>un par de botones de radio pidiéndole que elija entre los valores de género\u003C/li>\u003Cli>una caja selecta que le da una lista de colores de los ojos para elegir\u003C/li>\u003Cli>un par de casillas de verificación para hacer clic en si se aplican a usted\u003C/li>\u003Cli>un área de texto para describir su habilidad atlética\u003C/li>\u003Cli>un botón de envío para enviar valores de formularios actuales al servidor\u003C/li>\u003C/ul>\u003Cp>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.\n\u003C/p>\u003Cp>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 mediante 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.\n\u003C/p>\u003Cp>HTML 4 introdujo la etiqueta \u003Ccode><label>\u003C/code>, que pretende representar un título en una interfaz de usuario y puede asociarse con un control de formulario específico especificando el \u003Ccode>id\u003C/. atributo code> del control en el atributo \u003Ccode>for\u003C/code> de la etiqueta de etiqueta. Esto permite que las etiquetas permanezcan con sus elementos cuando se cambia el tamaño de una ventana y permitir 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).\n\u003C/p>\u003Cp>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 \u003Ccode><email>\u003C/code> para ingresar direcciones de correo electrónico, \u003Ccode><tel>\u003C/code> para números de teléfono, \u003Ccode><number>\u003C/code> 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 que no es entrada del usuario (como el botón 'Buscar'). ; texto 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 tipo de entrada \u003Ccode><date>\u003C/code> muestra un calendario desde el cual el usuario puede seleccionar una fecha o un rango de fechas. Y el tipo de entrada \u003Ccode>color\u003C/code> 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, o un widget de selección de color (siendo esta última la solución utilizada en la mayoría de los navegadores que admiten este atributo).\n\u003C/p>\u003Ch2>Presentación\u003C/h2>\u003Cp>Cuando se envían datos ingresados en formularios HTML, los nombres y valores de 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. 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 de espacios con & #34;\u003Ccódigo>+\u003C/code>" en lugar de "\u003Ccode>%20\u003C/code>". 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.\n\u003C/p>\u003Ch2>Uso con lenguajes de programación\u003C/h2>\u003Cp>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.\n\u003C/p>\u003Cp>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 potente que los lenguajes de programación como C, y también tienen Gestión automática de la memoria que ayuda a prevenir ataques de desbordamiento del búfer.\n\u003C/p>\u003Ch3>Lado del cliente\u003C/h3>\u003Cp>El lenguaje de programación del lado del cliente de facto para sitios web es JavaScript.\nEl 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.\n\u003C/p>\u003Cp>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 campo \u003Ccode>input\u003C/code> y el atributo \u003Ccode>required\u003C/code> de HTML5.\n\u003C/p>\u003Ch3>Ejecución del lado del servidor\u003C/h3>\u003Cp>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 y revisar la ortografía. , para 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.\n\u003C/p>\u003Cfigure class=\"mw-default-size\" typeof=\"mw:File/Thumb\">\u003Ca class=\"mw-file-description\" href=\"https://en.wikipedia.org/wiki/File:Zen-cart_Web-Shop_Frontend_Registration_Form.png\">\u003Cimg class=\"mw-file-element\" data-file-height=\"738\" data-file-width=\"1009\" decoding=\"async\" height=\"161\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Zen-cart_Web-Shop_Frontend_Registration_Form.png/220px-Zen-cart_Web-Shop_Frontend_Registration_Form.png\" srcset=\"https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Zen-cart_Web-Shop_Frontend_Registration_Form.png/330px-Zen-cart_Web-Shop_Frontend_Registration_Form.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Zen-cart_Web-Shop_Frontend_Registration_Form.png/440px-Zen-cart_Web-Shop_Frontend_Registration_Form.png 2x\" width=\"220\"/>\u003C/a>\u003Cfigcaption>Forma de registro del software de tienda electrónica basado en PHP ZenCart\u003C/figcaption>\u003C/figure>\u003Ch3>Idiomas interpretados\u003C/h3>\u003Cp>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.\n\u003C/p>\u003Ch4>PHP\u003C/h4>\u003Cp>PHP es un lenguaje muy común utilizado para el lado del servidor y#34;programación " y es uno de los pocos lenguajes creados específicamente para la programación web.\n\u003C/p>\u003Cp>Para usar PHP con un formulario HTML, la URL del script PHP se especifica en el atributo \u003Ccode>action\u003C/code> de la etiqueta del formulario. El archivo PHP de destino luego accede a los datos pasados por el formulario a través del \u003Ccode class=\"mw-highlight mw-highlight-lang-php mw-content-ltr\" dir=\"ltr\">\u003Cspan class=\" de PHP. nv\">$_POST\u003C/span>\u003C/code> o \u003Ccode class=\"mw-highlight mw-highlight-lang-php mw-content-ltr\" dir=\"ltr\">\u003Cspan class=\"nv\">$ _GET\u003C/span>\u003C/code> variables, dependiendo del valor del atributo \u003Ccode>method\u003C/code> utilizado en el formulario. Aquí hay un script PHP de controlador de formulario básico que mostrará el contenido de \u003Csamp style=\"padding-left:0.4em; padding-right:0.4em; color:var(--color-subtle, #666666);\"> campo de entrada first_name\u003C/samp> en la página:\n\u003C/p>\u003Cp>\u003Cb>\u003Csamp style=\"padding-left:0.4em; padding-right:0.4em; color:var(--color-sutil, #666666);\">form.html\u003C/samp>\u003C/b>\n\u003C/p>\u003Cdiv class=\"mw-highlight mw-highlight-lang-html mw-content-ltr\" dir=\"ltr\">\u003Cpre>\u003Cspan>\u003C/span>\u003Cspan class=\"cp\">¡Seguido! DOCTYPE html\u003C/span>\u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">html\u003C/span> \u003Cspan class=\"na\">lang\u003C/span>\u003Cspan class=\"o\">=\u003C/span>\u003Cspan class=\"s\">\"en\"\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">cabeza\u003C/span>\u003Cspan class=\"p\">■\u003C/span> \u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">Título\u003C/span>\u003Cspan class=\"p\">■\u003C/span>Formulario\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">Título\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">cabeza\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">cuerpo\u003C/span>\u003Cspan class=\"p\">■\u003C/span> \u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">forma\u003C/span> \u003Cspan class=\"na\">acción\u003C/span>\u003Cspan class=\"o\">=\u003C/span>\u003Cspan class=\"s\">\"form_handler.php\"\u003C/span>\u003Cspan class=\"p\">■\u003C/span> \u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">■ c)\u003C/span>\u003Cspan class=\"nt\">etiqueta\u003C/span>\u003Cspan class=\"p\">■\u003C/span>Nombre: \u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">entrada\u003C/span> \u003Cspan class=\"na\">Nombre\u003C/span>\u003Cspan class=\"o\">=\u003C/span>\u003Cspan class=\"s\">\"primer nombre\"\u003C/span> \u003Cspan class=\"p\">/\u003C/span>\u003Cspan class=\"nt\">etiqueta\u003C/span>\u003Cspan class=\"p\">"\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">■\u003C/span> \u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">■ c)\u003C/span>\u003Cspan class=\"nt\">botón\u003C/span> \u003Cspan class=\"na\">Tipo\u003C/span>\u003Cspan class=\"o\">=\u003C/span>\u003Cspan class=\"s\">\"Enviar\"\u003C/span>\u003Cspan class=\"p\">■\u003C/span>Submit\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">botón\u003C/span>\u003Cspan class=\"p\">"\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">■\u003C/span> \u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">forma\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">cuerpo\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">html\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003C/pre>\u003C/div>\u003Cp>\u003Cb>\u003Csamp style=\"padding-left:0.4em; padding-right:0.4em; color:var(--color-subtle, #666666);\">form_handler.php\u003C/samp>\u003C/b>\n\u003C/p>\u003Cdiv class=\"mw-highlight mw-highlight-lang-html+php mw-content-ltr\" dir=\"ltr\">\u003Cpre>\u003Cspan>\u003C/span>\u003Cspan class=\"cp\">¡Seguido! DOCTYPE html\u003C/span>\u003Cspan class=\"cp\">Identificado?php\u003C/span>\u003Cspan class=\"c1\">// solicitar el valor de la variable externa \"primer nombre\" y filtrarla.\u003C/span>\u003Cspan class=\"nv\">Primero Nombre\u003C/span> \u003Cspan class=\"o\">=\u003C/span> \u003Cspan class=\"nb\">filter_input\u003C/span>\u003Cspan class=\"p\">()\u003C/span>\u003Cspan class=\"nx\">INPUT_GET\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"s2\">\"primer nombre\"\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">FILTER_SANITIZE_STRING\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\u003Cspan class=\"cp\">?\u003C/span>\u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">html\u003C/span> \u003Cspan class=\"na\">lang\u003C/span>\u003Cspan class=\"o\">=\u003C/span>\u003Cspan class=\"s\">\"en\"\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">cabeza\u003C/span>\u003Cspan class=\"p\">■\u003C/span> \u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">Título\u003C/span>\u003Cspan class=\"p\">■\u003C/span>Producto\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">Título\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">cabeza\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">cuerpo\u003C/span>\u003Cspan class=\"p\">■\u003C/span> \u003Cspan class=\"p\">c)\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">■\u003C/span> \u003Cspan class=\"cp\">Identificado?php\u003C/span> \u003Cspan class=\"k\">eco\u003C/span> \u003Cspan class=\"s2\">\"Hola, \u003C/span>\u003Cspan class=\"si\">${\u003C/span>\u003Cspan class=\"nv\">primero Nombre\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"s2\">!\"\u003C/span>\u003Cspan class=\"p\">;\u003C/span> \u003Cspan class=\"cm\">/* imprimir el valor */\u003C/span>\u003Cspan class=\"cp\">?\u003C/span> \u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">p\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">cuerpo\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nt\">html\u003C/span>\u003Cspan class=\"p\">■\u003C/span>\u003C/pre>\u003C/div>\u003Cp>El código de muestra anterior utiliza PHP \u003Ccode class=\"mw-highlight mw-highlight-lang-php mw-content-ltr\" dir=\"ltr\">\u003Cspan class=\"nb\">filter_input\u003C /span>\u003Cspan class=\"p\">()\u003C/span>\u003C/code> función 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 \u003Ccode class=\"mw-highlight mw-highlight-lang-html mw-content -ltr\" dir=\"ltr\">\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">script\u003C/span>\u003Cspan class=\"p\">>\u003C/span> \u003Cspan class=\"nx\">alerta\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"mf\">1\u003C/span>\u003Cspan class=\"p\">)< /\u003C/span>\u003Cspan class=\"nt\">script\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\u003C/code> en \u003Csamp style=\"padding-left:0.4em; padding-right:0.4em; color:var(--color-subtle, #666666);\">firstname\u003C/samp> campo, el navegador ejecutaría el script en el campo \u003Csamp style=\"padding-left:0.4em; padding-right:0.4em; color:var(--color-subtle, #666666);\">form_handler.php\u003C/samp> página, como si hubiera sido codificada por el desarrollador; El código malicioso podría ejecutarse de esta manera. \u003Ccode class=\"mw-highlight mw-highlight-lang-php mw-content-ltr\" dir=\"ltr\">\u003Cspan class=\"nb\">filter_input\u003C/span>\u003Cspan class=\"p\">() \u003C/span>\u003C/code> se introdujo en PHP 5.2. Los usuarios de versiones anteriores de PHP podían utilizar \u003Ccode class=\"mw-highlight mw-highlight-lang-php mw-content-ltr\" dir=\"ltr\">\u003Cspan class=\"nb\">htmlspecialchars\u003C/span>\u003Cspan función class=\"p\">()\u003C/span>\u003C/code> o expresiones regulares para desinfectar la entrada del usuario antes de hacer algo con ella.\n\u003C/p>\u003Ch4>Lenguaje de programación Perl\u003C/h4>\u003Cp>Perl es otro lenguaje que se utiliza a menudo 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). ;s mod_perl).\n\u003C/p>\u003Cp>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.\n\u003C/p>\u003Cp>Un CGI de Perl 5 moderno que utilice el módulo CGI con un formulario similar al anterior podría verse así:\n\u003C/p>\u003Cp>\u003Cb>\u003Csamp style=\"padding-left:0.4em; padding-right:0.4em; color:var(--color-subtle, #666666);\">form_handler.pl\u003C/samp>\u003C/b>\n\u003C/p>\u003Cdiv class=\"mw-highlight mw-highlight-lang-perl mw-content-ltr\" dir=\"ltr\">\u003Cpre>\u003Cspan>\u003C/span>\u003Cspan class=\"ch\">#/usr/bin/env perl\u003C/span>\u003Cspan class=\"k\">uso\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"nn\">estricto\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\u003Cspan class=\"k\">uso\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"nn\">CGI\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"sx\">qw(:standard)\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\u003Cspan class=\"k\">#\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"nv\">Nombre\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"o\">=\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"n\">param\u003C/span>\u003Cspan class=\"p\">()\u003C/span>\u003Cspan class=\"s\">\"primer nombre\"\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\u003Cspan class=\"k\">impresión\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"n\">header\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\u003Cspan class=\"k\">impresión\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"n\">html\u003C/span>\u003Cspan class=\"p\">()\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"n\">cuerpo\u003C/span>\u003Cspan class=\"p\">()\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"n\">p\u003C/span>\u003Cspan class=\"p\">()\u003C/span>\u003Cspan class=\"s\">\"¡Hola, nombre de $!\"\u003C/span>\u003Cspan class=\"p\">),\u003C/span>\u003Cspan class=\"w\"> \u003C/span>\u003Cspan class=\"p\">),\u003C/span>\u003Cspan class=\"p\">);\u003C/span>\u003C/pre>\u003C/div>\u003Ch4>scripts de formulario a correo electrónico\u003C/h4>\u003Cp>Entre los tipos más simples y más comúnmente necesarios de script lado servidor es aquello que simplemente envía un correo electrónico al contenido de un formulario enviado. Este tipo de script es explotado frecuentemente por spammers, sin embargo, y muchos de los scripts de forma a correo más populares en uso son vulnerables al secuestro con el propósito de enviar correos electrónicos basura. Uno de los scripts más populares de este tipo fue \"FormMail.pl\" hecho por el Archivo de Script de Matt. Hoy en día, este script ya no se utiliza ampliamente en el nuevo desarrollo debido a la falta de actualizaciones, preocupaciones de seguridad y dificultad de configuración.\n\u003C/p>\u003Ch3>Creadores de formularios\u003C/h3>\u003Cp>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. Las empresas de alojamiento web proporcionan plantillas a sus clientes como 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.\n\u003C/p>\u003Ch2>Historia\u003C/h2>\u003Cp>Los formularios HTML fueron implementados por primera vez por el navegador Viola.\n\u003C/p>",{"status":16},{"code":17,"debug":18},404,"fetching error",["Reactive",20],{},["Set"],["ShallowReactive",23],{"content":24,"related":24},null,true,"/enciclopedia/formulario-html"]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildId:"891e51b2-22a5-4f72-9bfa-75a9902b372c",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script> <script defer src="https://www.googletagmanager.com/gtag/js?id=G-3NVN9267P3"></script> <script>(async(e,t,a)=>{e[t]=async function(){(e[a]=e[a]||[]).push(arguments),e.dispatchEvent(new CustomEvent("layerUpdated",{detail:arguments}))},e[t]("js",new Date),e[t]("config","G-3NVN9267P3",{transport_type:"beacon"}),e.addEventListener("error",(a=>{e[t]("error",a),a.preventDefault()}))})(window,"gtag","dataLayer")</script></body></html>