HTML enctype Attribute

HTML Web Development Front End Technology

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

Live Demo

<!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 −

AmitDiwan

Published on 19-Sep-2019 11:35:27

Previous Page Print Page