HTML - enctype Attribute

Quiz

HTML enctype attribute is used to specify how the form input data should be encoded before sending it to the server.

This attribute is used if the value of the method attribute is post and is present within the <form> element. The default value of this attribute is "application/x-www-form-urlencoded".

Syntax

<form enctype = "value"></form>

Following are values of the enctype attribute

text/plain: It is used for debugging purposes.
multipart/form-data: It is used if the form contains the <input> element with type = file.
application/x-www-form-urlencoded: It defines that all characters are encoded before being sent.

These values can be overridden by the formenctype attribute on <button>, <input type = submit>, or <input type = image> elements.

Applies On

Below listed elements allow using of the HTML content attribute

Element	Description
<form>	HTML <form> tag is used to define an application form for entering user data.

Example of HTML enctype Attribute

In the following example, we are using the HTML enctype attribute with the value "text/plain" within the <form> element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'enctype' Attribute</title>
   <style>
      form {
         width: 300px;
         padding: 10px;
         border-radius: 10px;
         background-color: rgb(9, 109, 190);
      }

      form h1 {
         font-family: sans-serif;
         letter-spacing: 2px;
         color: white;
         text-align: center;
         position: relative;
         top: -20px;
      }

      form input {
         padding: 12px;
         width: 80%;
         border: 1px solid white;
         border-radius: 5px;
         outline: none;
      }

      form label {
         font-size: 20px;
         color: white;
         padding: 5px 5px;
      }

      form button {
         padding: 12px;
         width: 100px;
         cursor: pointer;
         background-color: white;
         border: 1px solid white;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <!--HTML 'enctype' attribute-->
   <h3>Example of the HTML 'enctype' attribute</h3>
   <p>We are assigning the "text/plain" value to the enctype attribute 
   which means the data is being sent as plain text.</p>
   <form action="index.js" enctype="text/plain" method="POST">
      <h1>Login</h1>
      <label for="">Username</label>
      <br>
      <input type="text" id='uname' placeholder="Username">
      <br>
      <br>
      <label for="">Password</label>
      <br>
      <input type="password" id='psw' placeholder="Password">
      <br>
      <br>
      <button type='submit' onclick="Login()">Login</button>
   </form>
   <script src="index.js"></script>
</body>
</html>

index.js

function Login(){
   var uname = document.getElementById("uname").value;
   var password = document.getElementById("psw").value;

   document.write("Username: " + uname);
   document.write("<br>");
   document.write("Password: " + password);
}

Supported Browsers

Attribute
enctype	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm

Print Page