HTML | DOM Form enctype Property
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
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 1
- Edge 12
- Firefox 1
- Opera 12.1
- Safari 3
Please Login to comment...