Thuộc tính value của HTML DOM Input Email

Thuộc tính value của đối tượng Input Email trong HTML DOM trả về hoặc thiết lập giá trị chuỗi của ô nhập email (<input type="email">). Trình duyệt thường tự động validate định dạng email khi submit form.

Cú pháp

Lấy giá trị chuỗi

inputEmailObject.value

Thiết lập giá trị chuỗi

inputEmailObject.value = 'Chuỗi_mới'

Ví dụ minh họa

Ví dụ form đăng nhập với email: điền tự động email khi chọn tài khoản, kiểm tra rỗng khi login.

<!DOCTYPE html>
<html>
<head>
<title>Input Email value</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>
  <fieldset>
    <legend>Email-value</legend>
    <label for="EmailSelect">Email: <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>

Kết quả

• Nhấn Login khi ô trống: "Enter Email Id".
• Nhấn David hoặc Shasha: email được điền tự động.
• Nhấn Login sau khi có email: "Successful Login. Hello davidMiller".

Ưu điểm type="email": Trình duyệt hiển thị bàn phím có @ trên mobile, tự validate định dạng email khi submit form (nếu không dùng novalidate).