Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Form enctype Property

  • Last Updated : 12 Feb, 2019

The Form enctype property in HTML DOM is used to set or return the value of the enctype attribute in a form. This attribute specifies the data that will be present in the form should be encoded when submitting to the server. This type of attribute can be used only if method = “POST”.

Syntax:

  • It is used to return the enctype property.
    formObject.enctype
  • It is used to set the enctype property.
    formObject.enctype = "application/x-www-form-urlencoded, multipart/form-data, text/plain"

    Property Values:

    • application/x-www-form-urlencoded: It is the default value. It encodes all the characters before sent to the server. It converts spaces into + symbols and special character into its hex value.
    • multipart/form-data: This value does not encode any character.
    • text/plain: This value convert spaces into + symbols but special characters are not converted.

    Return Value It returns a string value which represent the encoded type of the form data when sending it to the server.

    Example 1: This example use getElementById() method to return the enctype property.






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

    Output:
    Before Click on the Button:

    After Click on the Button:

    Example 2: This example set the enctype property.




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

    Output:
    Before Click on the Button:

    After Click on the Button:

    Supported Browsers: The browser supported by DOM Form enctype property are listed below:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari

    Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :