Open In App

HTML | DOM Form enctype Property

Last Updated : 31 Aug, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report
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. html
    <!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. html
    <!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 1
    • Edge 12
    • Firefox 1
    • Opera 12.1
    • Safari 3

    Practice Tags :

Similar Reads