Teach with us

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 −

Live Demo

<!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' ";
}
Updated on 19-Feb-2021 07:19:17

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements