
- HTML Tutorial
- HTML - Home
- HTML - Overview
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Comments
- HTML - Images
- HTML - Tables
- HTML - Lists
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Frames
- HTML - Iframes
- HTML - Blocks
- HTML - Backgrounds
- HTML - Colors
- HTML - Fonts
- HTML - Forms
- HTML - Embed Multimedia
- HTML - Marquees
- HTML - Header
- HTML - Style Sheet
- HTML - Javascript
- HTML - Layouts
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- HTML - Fonts Ref
- HTML - Events Ref
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
HTML enctype Attribute
The HTML enctype attribute specifies the encode format for form data. When post method is used then the enctype attribute can be specified.
Here, enctype attribute can have the following values −
Value | Description |
---|---|
application/x-www-form-urlencoded | It is the default value. All characters are encoded before they are sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values) |
multipart/form-data | It does not encodes characters. This value is required if user is using forms that have a file upload control |
text/plain | With this value of enctype spaces are converted to "+" symbols, but no special characters are encoded |
Let us see an example of HTML enctype property:
Example
<!DOCTYPE html> <html> <head> <title>HTML enctype attribute</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form enctype="multipart/form-data" action="" method="post"> <fieldset> <legend>HTML-enctype-attribute</legend> <label for="EmailSelect">Email Id: <input type="email" id="EmailSelect"> <input type="button" onclick="getUserEmail('david')" value="David"> <input type="button" onclick="getUserEmail('shasha')" value="Shasha"><br> <input type="button" onclick="login()" value="Login"> </label> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var inputEmail = document.getElementById("EmailSelect"); function getUserEmail(userName) { if(userName === 'david') inputEmail.value = 'davidMiller@MNC.com'; else inputEmail.value = 'shashaGreen@MNC.com'; } function login() { if(inputEmail.value !== '') divDisplay.textContent = 'Successful Login. Hello '+inputEmail.value.split("@")[0]; else divDisplay.textContent = 'Enter Email Id'; } </script> </body> </html>
Output
This will produce the following output −
1) Clicking ‘Login’ button with empty email field −
2) After clicking ‘Login’ button with email field set −
- Related Articles
- HTML DOM Form enctype Property
- How to find the accept-charset and enctype attribute of a form in JavaScript?
- What does enctype='multipart/form-data' mean in HTML?
- HTML pattern Attribute
- HTML novalidate Attribute
- HTML maxlength Attribute
- HTML wrap Attribute
- HTML disabled Attribute
- HTML for Attribute
- HTML min Attribute
- HTML disabled Attribute
- HTML disabled Attribute
- HTML min Attribute
- HTML draggable Attribute
- HTML href Attribute

Advertisements