Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Form enctype Property
The HTML DOM Form enctype property is associated with the enctype attribute of the form element. This property sets or returns the enctype attribute value of the form. The enctype attribute is only used if the method attribute value is “POST”. The enctype property is used for specifying the data in the form to be submitted should be encoded.
Syntax
Following is the syntax for −
Setting the enctype property −
formObject.enctype = encoding
Here, encoding can be “application/x-www-form-urlencoded”, which means all characters are encoded before it is sent and this is the default encoding.
Another one is “multipart/form-data”, which specifies that no character should be encoded and is used for uploading files to the server.
The third encoding is “text/plain” and it only converts space to “+” symbol and no other encoding. The text./plain encoding shouldn’t be used as it is not secure.
Example
Let us look at an example for the Form enctype property −
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function changeEnc() {
document.getElementById("FORM1").enctype = "application/x-www-form-urlencoded";
document.getElementById("Sample").innerHTML = "The enctype attribute value is now 'application/x-www-form-urlencoded' ";
}
</script>
</head>
<body>
<h1>Form enctype property example</h1>
<form id="FORM1" method="post" enctype="multipart/form-data">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeEnc()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output −
On clicking the CHANGE button −
In the above example −
We have created a form with id=“Form1”, method=“post” and enctype set to “multipart/form-data”. The enctype specifies the encoding type for the form data and in our case is set to “multipart/form-data”. This encoding is useful for file uploads to server. The form contains a text field and a password field too.
<form id="FORM1" method="post" enctype="multipart/form-data"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Password <input type="password" name="pass"></label> </form>
We have then created a button CHANGE that will execute the changeEnc() method when clicked by the user −
<button onclick="changeEnc()">CHANGE</button>
The changeEnc() method gets the form element using the getElementById() method and sets it enctype property to “application/x-www-form-urlencoded”. This makes all of our characters being encoded and is the default enctype encoding. Using the innerHTML property of a paragraph with id “Sample” we show this change by displaying text to the user −
function changeEnc() {
document.getElementById("FORM1").enctype = "application/x-www-form-urlencoded";
document.getElementById("Sample").innerHTML = "The enctype attribute value is now 'application/x-www-form-urlencoded' ";
}
102 Views
