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

Đối tượng thời gian nhập HTML DOM

Đối tượng thời gian đầu vào HTML DOM đại diện cho một phần tử HTML đầu vào có loại Thời gian.

Cú pháp

Sau đây là cú pháp -

Tạo với loại thời gian

var timeObject = document.createElement(“input”);
timeObject.type = “time”;

Các thuộc tính

Đây, “thời gian” có thể có các thuộc tính sau -

Thuộc tính Mô tả
tự động hoàn thành Nó xác định giá trị của thuộc tính tự động hoàn thành của trường thời gian
tự động lấy nét Nó xác định xem trường thời gian có nên được tập trung vào tải trang ban đầu hay không.
defaultValue Nó đặt / trả về giá trị mặc định của trường thời gian
bị vô hiệu hóa Nó xác định nếu trường thời gian bị tắt / bật
biểu mẫu Nó trả về một tham chiếu của biểu mẫu bao có chứa trường thời gian
tối đa Nó trả về / đặt giá trị của thuộc tính max của trường thời gian
phút Nó trả về / đặt giá trị của thuộc tính min của trường thời gian
tên Nó xác định giá trị của thuộc tính name của trường thời gian
readOnly Nó xác định trường thời gian chỉ được đọc hay không
bắt buộc Nó xác định nếu trường thời gian bắt buộc phải được điền để gửi biểu mẫu
bước Nó xác định giá trị của thuộc tính bước của trường thời gian
loại Nó trả về kiểu phần tử biểu mẫu của trường thời gian
giá trị Nó xác định giá trị của thuộc tính giá trị của trường thời gian

Phương pháp

Và, các phương pháp sau -

booleanValue Chi tiết
stepDown Nó xác định số phút mà trường thời gian sẽ giảm xuống.
stepUp Nó xác định số phút mà trường thời gian sẽ tăng lên.

Ví dụ

Hãy để chúng tôi xem ví dụ về biểu mẫu Thời gian nhập liệu tài sản -

<!DOCTYPE html>
<html>
<head>
<title>Input Time form</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 id="Physics">
<fieldset>
<legend>Time-form</legend>
<label for="TimeSelect">Examination Time :
<input type="time" id="TimeSelect" value="14:00" disabled>
</label>
<input type="button" onclick="getform()" value="Which Exam?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputTime = document.getElementById("TimeSelect");
   function getform() {
      divDisplay.textContent = inputTime.form.id+' exam starts from '+inputTime.value;
   }
</script>
</body>
</html>

Đầu ra

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

Trước khi nhấp vào ‘Bài kiểm tra nào?’ nút -

Đối tượng thời gian nhập HTML DOM

Sau khi kiểm tra ‘Bài kiểm tra nào?’ nút -

Đối tượng thời gian nhập HTML DOM