ออบเจ็กต์ HTML DOM Input Search เกี่ยวข้องกับองค์ประกอบ <input> ที่มี type “search” เราสามารถสร้างและเข้าถึงองค์ประกอบ input ที่มี type search โดยใช้เมธอด createElement() และ getElementById() ตามลำดับ
คุณสมบัติ
คุณสมบัติต่อไปนี้สำหรับออบเจ็กต์ Input Search:
| คุณสมบัติ | คำอธิบาย |
|---|---|
| autocomplete | ตั้งค่าหรือส่งคืนว่าช่องค้นหาควรได้รับโฟกัสอัตโนมัติเมื่อโหลดหน้าหรือไม่ |
| autofocus | ตั้งค่าหรือส่งคืนว่าช่องค้นหาควรได้รับโฟกัสอัตโนมัติเมื่อโหลดหน้าหรือไม่ |
| defaultValue | ตั้งค่าหรือส่งคืนค่าเริ่มต้นของช่องค้นหา |
| disabled | ตั้งค่าหรือส่งคืนว่าปุ่มรีเซ็ตถูกปิดใช้งานหรือไม่ |
| form | ส่งคืนการอ้างอิงของฟอร์มที่มีช่องค้นหา |
| list | ส่งคืนการอ้างอิงไปยัง datalist ที่มีช่องค้นหา |
| maxLength | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ maxlength ของช่องค้นหา |
| name | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ name ของช่องค้นหา |
| pattern | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ pattern ของช่องค้นหา |
| placeholder | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ placeholder ของช่องค้นหา |
| readOnly | ตั้งค่าหรือส่งคืนว่าช่องค้นหาเป็น read-only หรือไม่ |
| required | ตั้งค่าหรือส่งคืนว่าจำเป็นต้องกรอกช่องค้นหาก่อนส่งฟอร์มหรือไม่ |
| size | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ size ของช่องค้นหา |
| type | คุณสมบัติแบบอ่านอย่างเดียว ส่งคืนประเภทขององค์ประกอบฟอร์มที่ช่องค้นหาเป็น |
| value | ตั้งค่าหรือส่งคืนค่าแอตทริบิวต์ value ของช่องค้นหา |
ไวยากรณ์
ไวยากรณ์สำหรับการสร้างออบเจ็กต์ input search:
var P = document.createElement("INPUT"); P.setAttribute("type", "search");
ตัวอย่าง
มาดูตัวอย่างสำหรับออบเจ็กต์ Input Search:
<!DOCTYPE html> <html> <head> <script> function createSearch() { var S= document.createElement("INPUT"); S.setAttribute("type", "search"); document.body.appendChild(S); } </script> </head> <body> <p>สร้างช่อง input ที่มี type search โดยคลิกปุ่มด้านล่าง</p> <button onclick="createSearch()">CREATE</button> <br><br> FRUITS: </body> </html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
เมื่อคลิกปุ่ม CREATE:
