Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to use formenctype attribute in HTML?

HTML Web Development Front End Technology

The formenctype attribute in HTML specifies how form data should be encoded when submitting to the server. This attribute was introduced in HTML5 and is only used with input elements of type submit and image. It overrides the form's default enctype attribute for that specific submit button.

Syntax

Following is the syntax for the formenctype attribute −

<input type="submit" formenctype="encoding-type" value="Submit">

The encoding-type specifies how the form data should be encoded before sending it to the server.

Formenctype Attribute Values

The formenctype attribute accepts three possible values −

Value Description
application/x-www-form-urlencoded This is the default encoding type. All characters are encoded before being sent to the server. Spaces become + and special characters are percent-encoded.
multipart/form-data No characters are encoded. This encoding type is essential when the form contains file upload controls (<input type="file">).
text/plain Spaces are converted to + symbols, but no special characters are encoded. This is rarely used in practice.

Using Default Encoding (application/x-www-form-urlencoded)

The default encoding is suitable for most text-based forms. Here's how it works −

Example

<!DOCTYPE html>
<html>
<head>
   <title>Default Form Encoding</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>User Registration Form</h2>
   <form action="/submit" method="post">
      <label for="name">Full Name:</label><br>
      <input type="text" id="name" name="fullname" style="margin: 5px 0; padding: 5px;"><br>
      
      <label for="email">Email:</label><br>
      <input type="email" id="email" name="email" style="margin: 5px 0; padding: 5px;"><br><br>
      
      <input type="submit" formenctype="application/x-www-form-urlencoded" value="Submit (URL Encoded)" style="padding: 8px 15px;">
   </form>
</body>
</html>

When submitted, the data is sent as fullname=John+Doe&email=john%40example.com, with spaces converted to + and special characters like @ percent-encoded.

Using Multipart Encoding for File Uploads

The multipart/form-data encoding is mandatory when your form includes file upload fields −

Example

<!DOCTYPE html>
<html>
<head>
   <title>File Upload Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Upload Document</h2>
   <form action="/upload" method="post">
      <label for="username">Username:</label><br>
      <input type="text" id="username" name="username" style="margin: 5px 0; padding: 5px;"><br>
      
      <label for="file">Choose file:</label><br>
      <input type="file" id="file" name="document" style="margin: 5px 0;"><br><br>
      
      <input type="submit" formenctype="multipart/form-data" value="Upload File" style="padding: 8px 15px; background: #4CAF50; color: white; border: none;">
   </form>
</body>
</html>

This encoding allows binary file data to be transmitted without corruption. The form data is sent in multiple parts, each with its own content type.

Multiple Submit Buttons with Different Encodings

You can have multiple submit buttons in the same form, each using a different encoding type −

Example

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Submit Options</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Contact Form</h2>
   <form action="/process" method="post">
      <label for="name">Name:</label><br>
      <input type="text" id="name" name="name" value="John Doe" style="margin: 5px 0; padding: 5px; width: 200px;"><br>
      
      <label for="message">Message:</label><br>
      <textarea id="message" name="message" rows="3" style="margin: 5px 0; padding: 5px; width: 200px;">Hello World!</textarea><br><br>
      
      <input type="submit" formenctype="application/x-www-form-urlencoded" value="Submit (URL Encoded)" style="padding: 8px 12px; margin-right: 10px;">
      <input type="submit" formenctype="text/plain" value="Submit (Plain Text)" style="padding: 8px 12px;">
   </form>
</body>
</html>

The first button sends data as name=John+Doe&message=Hello+World%21 while the second button sends it as plain text with minimal encoding.

Form Encoding Types Comparison URL Encoded ? Default encoding ? All chars encoded ? Space becomes + ? @ becomes %40 ? Best for text forms Example: name=John+Doe Multipart ? No encoding ? Binary data safe ? Required for files ? Multiple parts ? Larger payload Use with file uploads Plain Text ? Minimal encoding ? Space becomes + ? No special encoding ? Human readable ? Rarely used Example: name=John+Doe

Browser Compatibility

The formenctype attribute is supported in HTML5 and works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. For older browsers that don't support this attribute, the form will fall back to using the form's enctype attribute or the default URL encoding.

Key Points

  • The formenctype attribute only works with <input type="submit"> and <input type="image"> elements.

  • It overrides the form's enctype attribute for that specific submit button only.

  • Always use multipart/form-data when your form includes file upload controls.

  • The default application/x-www-form-urlencoded is sufficient for most text-based forms.

  • The text/plain encoding is rarely used in production applications.

Conclusion

The formenctype attribute provides flexibility in how form data is encoded and submitted to the server. Use application/x-www-form-urlencoded for regular text forms, multipart/form-data for file uploads, and avoid text/plain unless specifically needed. This attribute allows different submit buttons in the same form to use different encoding methods.

Updated on: 2026-03-16T21:38:53+05:30

280 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements