Embedded Files
A word about the enctype attribute of the <form> element
A word about the enctype attribute of the <form> element
The enctype attribute existed before HTML5. It is often used together with forms that contain file input fields. For sending files to a remote server, we use "multipart" forms. This special encoding of forms needs to be specified using the enctype attribute, as shown in the example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jsbin</title>
</head>
<body>
<form action="default.php" method="post" enctype="multipart/form-data">
Given name: <input type="text" name="gname"><br>
Family name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Note that when you send form content using Ajax, this attribute is not needed, as you will specify the type of data sent to the remote server in JavaScript, using the FormData object.
As an attribute of the <input type="submit" enctype=...> element
As an attribute of the <input type="submit" enctype=...> element
Since HTML5, this attribute can also be used in <input type="submit"> input fields.
If an <input type="submit"> field has this attribute, then, when submitted using method=POST, the browser will send the form content encoded with the method specified by the formenctype attribute. And this overrides the value of the enctype attribute specified in the <form enctype=...> element (or its default value, if not present).
Typical use
Typical use
<form action="defaultAction.php">
...
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
The possible values for this field are:
application/x-www-form-urlencoded: all characters are escaped/encoded before submission, for example, spaces become "+", accentuated characters are transformed into hexadecimal, etc.
multipart/form-data: encoding is not done. Usually we use this value for submitting binary data such as images, files, etc.
text/plain: some encoding is done on standard characters like space (that becomes a "+"), nothing is done for special characters.
Example
Example
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jsbin</title>
</head>
<body>
<form action="defaultAction.php" method="post"
enctype="application/x-www-form-urlencoded">
<label for="givenName">Given name:</label>
<input type="text" name="givenName" id="givenName"><br>
<label for="familyName">Family name:</label>
<input type="text" name="familyName" id="familyName"><br>
<input type="submit" value="Submit">
<input type="submit"
formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
<p><b>Note:</b> The formenctype attribute is not supported by all browsers.</p>
</body>
</html>
Explanations and how to see the difference between the two kinds of formenctype values
Explanations and how to see the difference between the two kinds of formenctype values
If you run this example in the JSBin standalone mode (click the black arrow on the top right of the output tab, in JSBin), you should see this:
Then, open the devtools and go to the "Network" tab, click on the POST request. Once done, click on the right on the "Header" tab to see the HTTP headers, and scroll down, you should see the form-data entries in the header, like in this screenshot:
And if you start again and click on the left submit button, the one without the formenctype attribute, you should see that the form content has been submitted "normally" (default value is "urlencoded", spaces are replaced by "+", etc.). Here is a screenshot of what you should see:
Page updated
Google Sites
Report abuse