คุณสมบัติ form ของ HTML DOM Input Search

คุณสมบัติ form ของ HTML DOM Input Search ใช้สำหรับส่งคืนการอ้างอิงของฟอร์มที่มีช่องค้นหา input ที่กำหนด หากช่องค้นหาอยู่นอกฟอร์มจะส่งคืน NULL คุณสมบัตินี้เป็น read-only

ไวยากรณ์

ไวยากรณ์สำหรับคุณสมบัติ form ของ input search:

searchObject.form

ตัวอย่าง

มาดูตัวอย่างสำหรับคุณสมบัติ form ของ HTML DOM Input search:

<!DOCTYPE html> <html> <body> <h1>Input search form Property</h1> <form id="FORM_1"> FRUITS: <input type="search" id="SEARCH1" name="fruits"> </form> <p>ดึง id ของฟอร์มโดยคลิกปุ่มด้านล่าง</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>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

เมื่อคลิกปุ่ม GET FORM:

ในตัวอย่างข้างต้น:

เราสร้างองค์ประกอบ <input> ที่มี type=”search” id=”SEARCH1” และ name=”fruits” ช่องค้นหาอยู่ในฟอร์มที่มีแอตทริบิวต์ id ตั้งเป็น “FORM_1”:

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

เราสร้างปุ่ม GET FORM ที่จะเรียกใช้เมธอด formId() เมื่อผู้ใช้คลิก:

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

เมธอด formId() ใช้ getElementById() เพื่อดึงช่อง input type search และดึงคุณสมบัติ id ของออบเจ็กต์ form ที่มีช่องค้นหา กำหนดค่าให้ตัวแปร P และแสดงในย่อหน้าที่มี id “Sample” โดยใช้ 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 ; }