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

Thuộc tính loại Đặt lại đầu vào HTML DOM

Thuộc tính kiểu Đặt lại đầu vào HTML DOM được liên kết với phần tử đầu vào có kiểu =”đặt lại”. Nó sẽ luôn trả về đặt lại cho phần tử đặt lại đầu vào.

Cú pháp

Sau đây là cú pháp cho thuộc tính loại đặt lại -

resetObject.type

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính loại đặt lại -

<!DOCTYPE html>
<html>
<body>
<h1>Input reset type Property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>
<p>Get the above input element type by clicking the below button</p>
<button type="button" onclick="resetType()">GET Type</button>
<p id="Sample"></p>
<script>
   function resetType() {
      var P=document.getElementById("RESET1").type;
      document.getElementById("Sample").innerHTML = "The type for the input field is: "+P ;
   }
</script>
</body>
</html>

Đầu ra

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

Thuộc tính loại Đặt lại đầu vào HTML DOM

Khi nhấp vào thuộc tính GET Type -

Thuộc tính loại Đặt lại đầu vào HTML DOM

Trong ví dụ trên -

Chúng tôi đã tạo một phần tử với type =”reset”, id =”RESET1”. Nhấp vào nút này sẽ đặt lại dữ liệu biểu mẫu. Nút này nằm bên trong biểu mẫu có chứa hai trường văn bản và biểu mẫu cũng có kiểu nội tuyến được áp dụng cho nó -

<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>

Sau đó, chúng tôi tạo một nút “GET Type” sẽ thực thi phương thức resetType () khi người dùng nhấp vào -

<button type="button" onclick="resetType()">GET Type</button>

Phương thức resetType () nhận phần tử đầu vào bằng cách sử dụng phương thức getElementById () và gán giá trị thuộc tính kiểu của nó cho biến P. Sau đó, biến này được hiển thị trong đoạn có id “Sample” bằng cách sử dụng thuộc tính innerHTML -

function getType() {
   var P = document.getElementById("RESET1").type;
   document.getElementById("Sample").innerHTML = "The type for the input field is : "+P;
}