What is the formenctype attribute in HTML5?

The formenctype attribute is used to specify how to encode the form data when submitting it. It is only applicable to the submit button and can override the enctype attribute of the form element. 1. It only takes effect on <input type="submit">, <input type="image"> and ; 2. When clicking the button with formctype, the data will be submitted using the specified encoding type; 3. Common values include application/x-www-form-urlencoded (default), multipart/form-data (for file upload) and text/plain (plain text); 4. For example, the same form can support both ordinary text submission and file upload, and different encoding methods can be triggered through different buttons; 5. Use formctype to achieve flexible submission behavior without relying on multiple forms or JavaScript, improving development efficiency and concise code.

The formenctype attribute in HTML5 is used to specify how the form data should be encoded when it's submitted to the server. It applies specifically to submit buttons ( <input type="submit"> , <input type="image"> , or <button type="submit"></button> ) and overrides the enctype attribute of the <form></form> element for that particular button.

This means you can have different encoding types depending on which button is used to submit the form—useful when you want different submission behaviors within the same form.

Where It Applies

The formenctype works only with:

• <input type="submit">
• <input type="image">
• <button type="submit"></button>

It overrides the form's enctype only when that specific button is clicked.

Common enctype Values

Here are the standard values you can use with formenctype :

• application/x-www-form-urlencoded
  Default encoding. Form data is sent as key/value pairs, URL-encoded.

• multipart/form-data
  Use this when uploading files. No encoding of characters; used for binary data.

• text/plain
  Sends data as plain text. Spaces are converted to , but no other encoding.

Example Usage

 <form action="/submit" method="post" enctype="application/x-www-form-urlencoded">
  <label>Name: <input type="text" name="name"></label><br>
  <label>Photo: <input type="file" name="photo"></label><br>

  <!-- Normal submit: uses default form enctype -->
  <input type="submit" value="Submit (URL-encoded)">

  <!-- This button overrides enctype to send file properly -->
  <input type="submit" formulactype="multipart/form-data" value="Submit with File">
</form>

In this example:

• Clicking the first button submits the form using application/x-www-form-urlencoded .
• Clicking the second button triggers submission using multipart/form-data , which is necessary if a file is included.

Why It's Useful

It gives flexibility. Without formenctype , you'd need multiple forms or JavaScript to handle different submission types. With it, you can support both simple text submission and file uploads from the same form using different buttons.

Basically, formenctype lets a submit button control how form data is encoded at submission time—giving you fine-grained control without extra code.

The above is the detailed content of What is the formenctype attribute in HTML5?. For more information, please follow other related articles on the PHP Chinese website!