Explicar el concepto de codificación de URL y describir la necesidad de codificación en HTML

La URL (Localizador uniforme de recursos) se utiliza para identificar un recurso de Internet en la WWW (World Wide Web). El siguiente ejemplo muestra una URL.

https://www.en.com:443/path/filename?r=1#fragment

Esta URL contiene:

  • Un protocolo o esquema (https://)
  • Un prefijo de dominio (subdominio) (www.)
  • Un dominio (es)
  • Un dominio de nivel superior (.com)
  • Un puerto (:443)
  • Una ruta de archivo (/ruta)
  • Un nombre de archivo (nombre de archivo)
  • Una string de consulta (?)
  • Parámetros A (r=1)
  • Un identificador de fragmento (#fragmento)

Codificación de URL: cuando se realiza una solicitud utilizando el método POST, los datos deben codificarse de alguna manera. La codificación de URL se refiere al envío de URL en forma codificada en Internet y eso se puede hacer usando el juego de caracteres ASCII. La URL necesita conversión si no contiene datos en el conjunto de caracteres ASCII. Por lo tanto, las direcciones URL están formateadas de tal manera que se pueden enviar a través de Internet. Si la URL contiene espacios, debe reemplazarse con el símbolo ( + ) o con %20 , que es un conjunto de caracteres ASCII para espacios.

La codificación de la entrada de URL por parte de su navegador se basa en el conjunto de caracteres de su página. UTF-8 es el conjunto de caracteres predeterminado de HTML5.

Necesidad de codificación en formulario HTML

La necesidad de codificación surge debido a las preocupaciones de seguridad al procesar la entrada del formulario.

El método de codificación de los datos del formulario HTML se especifica utilizando el atributo ENCTYPE de la etiqueta <form>. El atributo ENCTYPE especifica el método de codificación de los datos del formulario. Hay dos valores para especificar el método de codificación:

  • application/x-www-form-urlencoded: Es el valor por defecto. Si no se especifica ningún valor para el atributo ENCTYPE, toma este valor para el formulario HTML. El proceso de codificación se realiza antes de enviar los datos al servidor, ya que los espacios se convierten en un símbolo (+) y los caracteres no alfanuméricos o caracteres especiales se convierten en valores hexadecimales (0-9, AF).

    Sintaxis:

    <form action="login.php" method="post" 
          enctype="application/x-www-form-urlencoded">
    </form>
  • multipart/form-data: Es otra forma de codificar el formulario HTML. Se utiliza específicamente cuando se requiere la carga de archivos en formato HTML. Envía los datos del formulario a un servidor en varias partes debido al gran tamaño del archivo.

    Sintaxis:

    <form action="login.php" method="post" 
          enctype="multipart/form-data">
    </form>

El último valor del atributo ENCTYPE es texto/sin formato, lo que no se recomienda ya que los datos no están codificados en este tipo.

Ejemplo: Con ENCTYPE=”application/x-www-form-urlencoded”.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <form action="login.php" method="POST" 
          enctype="application/x-www-form-urlencoded">
        <h2>URL Encoded Forms</h2>
        Username: <input type="text" 
                         name="username" 
                         value="Geeks for Geeks @" />
        <br><br>
        Password: <input type="text"
                         name="password" 
                         value="gfg" />
        <br><br>
        <input type="submit" value="Submit" />
    </form>
</body>
  
</html>

Producción :

archivo:///C:/Users/Dell/Downloads/geek%20articles/post.html?name=GEEKS+FOR+GEEKS+%40+&password=GFG&submit=Enviar

Ejemplo: Con ENCTYPE=”multipart/form-data”

HTML

<!DOCTYPE html>
<html>
  
<body>
    <form action="login.php" method="POST" 
          enctype="multipart/form-data">
        <h2>URL Encoded Forms</h2>
        Username: <input type="text" name="username" />
        <br><br>
        Password: <input type="text" name="password" />
        <br><br>
        <p>Browse your file</p>
  
        <input type="file" name="upload"><br><br>
        <input type="submit" value="Submit" />
    </form>
</body>
  
</html>

Salida: el servidor procesará la solicitud y mostrará el resultado con el parámetro de límite de multipart/form-data. Aquí, las partes están delimitadas con un delimitador de límite “–“, y el valor del parámetro “límite”. El campo recibe algunos subtítulos antes de sus datos, como datos de formulario; el nombre del campo, el nombre del archivo, seguido de los datos.

El servidor lee los datos hasta la siguiente string de límite. El navegador necesita seleccionar un límite que no se mostrará en ninguno de los campos, esta es también la razón por la que el límite puede variar entre las requests.

Publicación traducida automáticamente

Artículo escrito por annieahujaweb2020 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *