HTML | Propiedad de enctype de formulario DOM

La propiedad Form enctype en HTML DOM se usa para establecer o devolver el valor del atributo enctype en un formulario. Este atributo especifica que los datos que estarán presentes en el formulario deben codificarse al enviarlo al servidor. Este tipo de atributo solo se puede utilizar si method = “POST”.

Sintaxis:

  • Se utiliza para devolver la propiedad enctype.
formObject.enctype
  • Se utiliza para establecer la propiedad enctype.
  • formObject.enctype = "application/x-www-form-urlencoded, multipart/form-data, text/plain"

    Valores de propiedad:

    • application/x-www-form-urlencoded: Es el valor por defecto. Codifica todos los caracteres antes de enviarlos al servidor. Convierte espacios en símbolos + y caracteres especiales en su valor hexadecimal.
    • multipart/form-data: este valor no codifica ningún carácter.
    • text/plain: este valor convierte los espacios en símbolos + pero los caracteres especiales no se convierten.

    Valor devuelto Devuelve un valor de string que representa el tipo codificado de los datos del formulario cuando se envía al servidor.

    Ejemplo 1: este ejemplo utiliza el método getElementById() para devolver la propiedad enctype.

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>
                HTML DOM Form enctype Property
            </title> 
        </head> 
          
        <body> 
          
            <h1>GeeksforGeeks</h1> 
              
            <h2>DOM Form enctype Property</h2> 
              
            <form action="#" id="GFG" method="post"
                        enctype="multipart/form-data"> 
                          
                First name: <input type="text" name="fname">
                  
                <br><br> 
                  
                Last name: <input type="text" name="lname">
                  
                <br><br> 
                  
                Address: <input type="text" name="Address">
                  
                <br><br> 
                  
                <input type="submit" value="Submit"> 
            </form>
              
            <p>
                Click on Button to return enctype
                attribute value
            </p>
              
            <button onclick = "myGeeks()">
                Click Here!
            </button>
              
            <p id = "sudo"></p>
              
            <!-- Script to return enctype property value -->
            <script>
                function myGeeks() {
                    var x = document.getElementById("GFG").enctype;
                    document.getElementById("sudo").innerHTML = x;
                }
            </script>
        </body> 
    </html>                            
    

    Salida:
    Antes de hacer clic en el botón:

    Después de hacer clic en el botón:

    Ejemplo 2: este ejemplo establece la propiedad enctype.

    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>
                HTML DOM Form enctype Property
            </title> 
        </head> 
          
        <body> 
          
            <h1>GeeksforGeeks</h1> 
              
            <h2>DOM Form enctype Property</h2> 
              
            <form action="#" id="GFG" method="post" 
                        enctype="multipart/form-data"> 
                          
                First name: <input type="text" name="fname">
                  
                <br><br> 
                  
                Last name: <input type="text" name="lname">
                  
                <br><br> 
                  
                Address: <input type="text" name="Address">
                  
                <br><br> 
                  
                <input type="submit" value="Submit"> 
            </form>
              
            <p>
                Click on Button to return the
                enctype attribute value
            </p>
              
            <button onclick="myGeeks()">
                Click Here!
            </button>
              
            <p id="sudo"></p>
              
            <!-- Script to set enctype attribute value -->
            <script>
                function myGeeks() {
                    var x = document.getElementById("GFG").enctype 
                            = "application/x-www-form-urlencoded";
                    document.getElementById("sudo").innerHTML
                            = "The value of the enctype attribute"
                            + " was changed to: " + x;
                }
            </script>
        </body> 
    </html>                    
    

    Salida:
    Antes de hacer clic en el botón:

    Después de hacer clic en el botón:

    Navegadores compatibles: los navegadores compatibles con la propiedad DOM Form enctype se enumeran a continuación:

    • Google Chrome
    • explorador de Internet
    • Firefox
    • Ópera
    • Safari

    Publicación traducida automáticamente

    Artículo escrito por ManasChhabra2 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 *