Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Submit formEnctype property
The HTML DOM Input Submit formEnctype property is used to set or return the formenctype attribute value of a submit button. This property specifies how form data should be encoded when submitted to the server, and it overrides the enctype attribute of the parent <form> element.
The formenctype property only works when the form method is POST. It was introduced in HTML5 for input elements with type="submit".
Syntax
Following is the syntax for setting the formEnctype property −
submitObject.formEnctype = encoding
Following is the syntax for getting the formEnctype property −
var encoding = submitObject.formEnctype
Property Values
The formEnctype property accepts the following encoding values −
| Value | Description | Use Case |
|---|---|---|
application/x-www-form-urlencoded |
Default encoding. All characters are encoded before sending. | Standard text form data |
multipart/form-data |
No characters are encoded. Used for file uploads. | Forms with file inputs |
text/plain |
Only spaces are converted to "+" symbols. Not secure. | Not recommended for production |
Example − Setting formEnctype Property
Following example demonstrates how to change the formEnctype property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Submit formEnctype Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Submit formEnctype Property Example</h2>
<form id="myForm" action="/submit.php" method="post" style="border: 2px solid green; padding: 15px; margin: 10px 0;">
<label>Username: <input type="text" name="username" value="john_doe"></label><br><br>
<label>Location: <input type="text" name="location" value="New York"></label><br><br>
<input type="submit" id="submitBtn" value="Submit" formenctype="multipart/form-data">
</form>
<button onclick="changeEncoding()" style="padding: 8px 15px; background: #007bff; color: white; border: none; cursor: pointer;">Change Encoding</button>
<button onclick="showEncoding()" style="padding: 8px 15px; background: #28a745; color: white; border: none; cursor: pointer;">Show Current Encoding</button>
<p id="result" style="margin-top: 15px; font-weight: bold; color: #333;"></p>
<script>
function changeEncoding() {
document.getElementById("submitBtn").formEnctype = "application/x-www-form-urlencoded";
document.getElementById("result").innerHTML = "Encoding changed to: application/x-www-form-urlencoded";
}
function showEncoding() {
var currentEncoding = document.getElementById("submitBtn").formEnctype;
document.getElementById("result").innerHTML = "Current encoding: " + currentEncoding;
}
</script>
</body>
</html>
Initially, the submit button has formenctype="multipart/form-data". Clicking "Change Encoding" updates it to application/x-www-form-urlencoded, and "Show Current Encoding" displays the current value.
Example − File Upload with formEnctype
Following example shows how formEnctype is essential for file uploads −
<!DOCTYPE html>
<html>
<head>
<title>File Upload with formEnctype</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>File Upload Form</h2>
<form action="/upload.php" method="post" style="border: 2px solid #007bff; padding: 20px; margin: 10px 0;">
<label>Select a file:
<input type="file" name="uploadFile" accept=".jpg,.png,.gif">
</label><br><br>
<label>Description:
<textarea name="description" rows="3" cols="30" placeholder="Enter file description"></textarea>
</label><br><br>
<input type="submit" value="Upload File" formenctype="multipart/form-data" style="padding: 8px 15px; background: #28a745; color: white; border: none; cursor: pointer;">
</form>
<p style="background: #fff3cd; padding: 10px; border-left: 4px solid #ffc107;">
<strong>Note:</strong> The formenctype="multipart/form-data" is required for file uploads to work properly.
</p>
</body>
</html>
For file uploads, formenctype="multipart/form-data" is essential. Without it, the file data cannot be properly transmitted to the server.
Example − Multiple Submit Buttons with Different Encodings
Following example demonstrates using different encoding types for different submit buttons in the same form −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Submit Buttons</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form with Multiple Submit Options</h2>
<form action="/process.php" method="post" style="border: 2px solid #6c757d; padding: 20px;">
<label>Message:
<textarea name="message" rows="4" cols="40">Hello from TutorialsPoint!</textarea>
</label><br><br>
<label>Attachment:
<input type="file" name="attachment">
</label><br><br>
<input type="submit" id="textBtn" value="Send as Text"
formenctype="application/x-www-form-urlencoded"
style="padding: 8px 15px; background: #007bff; color: white; border: none; margin: 5px; cursor: pointer;">
<input type="submit" id="fileBtn" value="Send with File"
formenctype="multipart/form-data"
style="padding: 8px 15px; background: #28a745; color: white; border: none; margin: 5px; cursor: pointer;">
</form>
<button onclick="showEncodings()" style="padding: 8px 15px; background: #ffc107; color: black; border: none; margin: 10px 0; cursor: pointer;">Show Button Encodings</button>
<div id="encodingInfo" style="background: #f8f9fa; padding: 10px; margin: 10px 0; border-radius: 4px;"></div>
<script>
function showEncodings() {
var textEncoding = document.getElementById("textBtn").formEnctype;
var fileEncoding = document.getElementById("fileBtn").formEnctype;
document.getElementById("encodingInfo").innerHTML =
"<strong>Text Button Encoding:</strong> " + textEncoding + "<br>" +
"<strong>File Button Encoding:</strong> " + fileEncoding;
}
</script>
</body>
</html>
This form has two submit buttons with different formenctype values. The "Send as Text" button uses URL encoding, while "Send with File" uses multipart encoding for file uploads.
Browser Compatibility
The formEnctype property is supported in all modern browsers that support HTML5. It works in Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. For older browsers, the form's enctype attribute should be used as a fallback.
Key Points
The
formEnctypeproperty only works withmethod="post"forms.It overrides the form's
enctypeattribute for that specific submit button.Use
multipart/form-datafor file uploads andapplication/x-www-form-urlencodedfor text data.The property can be read and modified using JavaScript.
Different submit buttons in the same form can have different encoding types.
Conclusion
The HTML DOM Input Submit formEnctype property provides flexibility in specifying how form data should be encoded when submitted. Use application/x-www-form-urlencoded for standard text forms and multipart/form-data for file uploads. The property allows different submit buttons within the same form to use different encoding methods.
167 Views
