Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính enctype HTML

Thuộc tính enctype HTML chỉ định định dạng mã hóa cho dữ liệu biểu mẫu. Khi phương thức post được sử dụng thì thuộc tính enctype có thể được chỉ định.

Ở đây, thuộc tính enctype có thể có các giá trị sau -

Giá trị
Mô tả
application / x-www-form-urlencoded
Đây là giá trị mặc định. Tất cả các ký tự được mã hóa trước khi chúng được gửi đi (dấu cách được chuyển đổi thành ký hiệu "+" và các ký tự đặc biệt được chuyển đổi thành giá trị ASCII HEX)
đa phần / biểu mẫu-dữ liệu
Nó không mã hóa các ký tự. Giá trị này là bắt buộc nếu người dùng đang sử dụng các biểu mẫu có kiểm soát tải lên tệp
văn bản / đơn giản
Với giá trị này, khoảng trắng kiểu enctype được chuyển đổi thành ký hiệu "+", nhưng không có ký tự đặc biệt nào được mã hóa

Hãy để chúng tôi xem một ví dụ về HTML enctype tài sản:

Ví dụ

<!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 = '[email protected]';
      else
         inputEmail.value = '[email protected]';
   }
   function login() {
      if(inputEmail.value !== '')
         divDisplay.textContent = 'Successful Login. Hello '+inputEmail.value.split("@")[0];
      else
         divDisplay.textContent = 'Enter Email Id';
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

1) Nhấp vào ‘Đăng nhập’ nút có trường email trống -

Thuộc tính enctype HTML

2) Sau khi nhấp vào ‘Đăng nhập’ nút có đặt trường email -

Thuộc tính enctype HTML