HTML DOM Input Form Search Thuộc tính

Thuộc tính biểu mẫu Tìm kiếm đầu vào HTML DOM được sử dụng để trả về tham chiếu biểu mẫu có chứa trường tìm kiếm đầu vào đã cho. Nếu trường tìm kiếm nằm ngoài biểu mẫu thì nó sẽ chỉ trả về NULL. Thuộc tính này ở chế độ chỉ đọc.

Cú pháp

Sau đây là cú pháp cho thuộc tính biểu mẫu tìm kiếm đầu vào -

searchObject.form

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho thuộc tính Biểu mẫu tìm kiếm HTML DOM Input -

<!DOCTYPE html>
<html>
<body>
<h1>Input search form Property</h1>
<form id="FORM_1">
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>Get the form id by clicking on the below button</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
   function formId() {
      var P=document.getElementById("SEARCH1").form.id;
      document.getElementById("Sample").innerHTML = "The id of the form containing the search field is: "+P ;
   }
</script>
</body>
</html>

Đầu ra

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

HTML DOM Input Form Search Thuộc tính

Khi nhấp vào nút NHẬN MẪU -

HTML DOM Input Form Search Thuộc tính

Trong ví dụ trên -

Đầu tiên, chúng tôi đã tạo một phần tử với type =”search”, id =”SEARCH1” và name =”fruit”. Trường tìm kiếm bên trong biểu mẫu có thuộc tính id được đặt thành “FORM_1” -

<form id="FORM_1">
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>

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

<button type="button" onclick="formId()">GET FORM</button>

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

function formId() {
   var P=document.getElementById("SEARCH1").form.id;
   document.getElementById("Sample").innerHTML = "The id of the form containing the search field is: "+P ;
}