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

Đối tượng Đặt lại đầu vào HTML DOM

Đối tượng Thiết lập lại đầu vào HTML DOM được liên kết với phần tử có loại “đặt lại”. Chúng ta có thể tạo và truy cập một phần tử đầu vào có đặt lại kiểu bằng cách sử dụng phương thức createElement () và getElementById () tương ứng.

Thuộc tính

Sau đây là các thuộc tính cho đối tượng Đặt lại đầu vào -

Thuộc tính Mô tả
tự động lấy nét Để đặt hoặc quay lại xem nút đặt lại có tự động lấy tiêu điểm khi trang tải hay không.
defaultValue Để đặt hoặc trả lại giá trị mặc định của nút đặt lại.
bị vô hiệu hóa Để đặt hoặc quay lại nếu nút đặt lại đã bị tắt hay chưa.
biểu mẫu Để trả về tham chiếu của biểu mẫu có chứa nút đặt lại.
tên Để đặt hoặc trả về giá trị thuộc tính tên của nút đặt lại.
loại Để trả về loại phần tử biểu mẫu cho nút đặt lại.
giá trị Để đặt hoặc trả về giá trị thuộc tính value của điều khiển thanh trượt.

Ví dụ

Chúng ta hãy xem một ví dụ cho đối tượng Đặt lại đầu vào -

<!DOCTYPE html>
<html>
<head>
<script>
   function resetCreate() {
      var Res = document.createElement("INPUT");
      Res.setAttribute("type", "reset");
      document.body.appendChild(Res);
   }
</script>
</head>
<body>
<h1>Input Reset object</h1>
<p>Create an input field with type reset by clicking the below button</p>
<button onclick="resetCreate()">CREATE</button>
<br><br>
</body>
</html>

Đầu ra

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

Đối tượng Đặt lại đầu vào HTML DOM

Khi nhấp vào nút TẠO -

Đối tượng Đặt lại đầu vào HTML DOM

Trong ví dụ trên -

Chúng tôi đã tạo một nút CREATE sẽ thực thi phương thức resetCreate () khi người dùng nhấp vào -

<button onclick="resetCreate()">CREATE</button>

Phương thức resetCreate () sử dụng phương thức createElement () của đối tượng tài liệu để tạo phần tử bằng cách chuyển “INPUT” làm tham số. Phần tử đầu vào mới tạo được gán cho biến Res và sử dụng phương thức setAttribute (), chúng tôi tạo thuộc tính type với giá trị đặt lại.

Hãy nhớ rằng setAttribute () tạo thuộc tính và sau đó chỉ định giá trị nếu thuộc tính đó không tồn tại trước đó. Cuối cùng, sử dụng phương thức appendChild () trên phần thân tài liệu, chúng tôi nối phần tử đầu vào với kiểu đặt lại là phần tử con của phần thân -

function resetCreate() {
   var Res = document.createElement("INPUT");
   Res.setAttribute("type", "reset");
   document.body.appendChild(Res);
}