ออบเจ็กต์การค้นหาอินพุต HTML DOM เชื่อมโยงกับองค์ประกอบ ที่มีประเภท "ค้นหา" เราสามารถสร้างและเข้าถึงองค์ประกอบอินพุตด้วยการค้นหาประเภทโดยใช้เมธอด createElement() และ getElementById() ตามลำดับ
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของวัตถุ 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>Create an input field with type search by clicking the below button</p>
<button onclick="createSearch()">CREATE</button>
<br><br>
FRUITS:
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่มสร้าง -
