Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Thuộc tính required của HTML DOM Input Time

Thuộc tính required của đối tượng Input Time (<input type="time">) trong HTML DOM xác định việc người dùng có bắt buộc phải chọn giờ trước khi submit form hay không.

Cú pháp

Lấy giá trị boolean

inputTimeObject.required

Thiết lập required

inputTimeObject.required = booleanValue

Các giá trị boolean

booleanValueChi tiết
trueBắt buộc phải chọn giờ để submit form.
falseMặc định: không bắt buộc chọn giờ.

Ví dụ minh họa

Form hẹn giờ với ô time bắt buộc (có thuộc tính required trong HTML). Kiểm tra khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
<title>Input Time required</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>Time-required</legend>
    <label for="TimeSelect">Giờ hẹn với Giám đốc:</label> 
    <input type="time" id="TimeSelect" required> 
    <input type="button" onclick="xacNhanHen()" value="Đặt lịch"> 
    <div id="divDisplay"></div> 
  </fieldset> 
</form> 
<script> 
  var divDisplay = document.getElementById("divDisplay"); 
  var inputTime = document.getElementById("TimeSelect"); 
  function xacNhanHen() { 
    if(inputTime.required === true && inputTime.value === '') 
      divDisplay.textContent = 'Giờ hẹn là bắt buộc'; 
    else 
      divDisplay.textContent = 'Giờ hẹn đã đặt lúc: ' + inputTime.value; 
  } 
</script> 
</body> 
</html>

Kết quả

  • Nhấn Đặt lịch khi ô trống: "Giờ hẹn là bắt buộc".
  • Chọn giờ (ví dụ 14:30) rồi nhấn nút: "Giờ hẹn đã đặt lúc: 14:30".

Lưu ý: Thuộc tính required hoạt động kết hợp với validation HTML5 tự động khi submit form (type="submit"). Ví dụ dùng type="button" cần kiểm tra thủ công như trên.