Đối tượng Tìm kiếm đầu vào HTML DOM được liên kết với phần tử có loại “tìm kiếm”. Chúng ta có thể tạo và truy cập một phần tử đầu vào với tính năng tìm kiếm kiểu bằng cách sử dụng phương thức createElement () và getElementById () tương ứng.
Thuộc tính
Sau đây là các thuộc tính cho đối tượng Tìm kiếm đầu vào -
| Thuộc tính | Mô tả |
|---|---|
| tự động hoàn thành | Để đặt hoặc trả về trường tìm kiếm có tự động lấy tiêu điểm khi trang tải hay không. |
| tự động lấy nét | Để đặt hoặc trả về trường tìm kiếm có tự động lấy tiêu điểm khi trang tải hay không. |
| defaultValue | Để đặt hoặc trả về giá trị mặc định của trường tìm kiếm. |
| bị vô hiệu hóa | Để đặt hoặc quay lại nếu nút đặt lại đã bị tắt hay chưa. |
| biểu mẫu | Để trả về tham chiếu của biểu mẫu có chứa trường tìm kiếm |
| danh sách | Để trả về tham chiếu đến kho dữ liệu chứa trường tìm kiếm. |
| maxLength | Để đặt hoặc trả về giá trị thuộc tính maxlength của trường tìm kiếm. |
| tên | Để đặt hoặc trả về giá trị thuộc tính tên của trường tìm kiếm |
| mẫu | Để đặt hoặc trả về giá trị thuộc tính mẫu của trường tìm kiếm. |
| trình giữ chỗ | Để đặt hoặc trả về giá trị thuộc tính trình giữ chỗ của trường tìm kiếm |
| readOnly | Để đặt hoặc trả về trường tìm kiếm có ở chế độ chỉ đọc hay không |
| bắt buộc | Để đặt hoặc trả lại nếu có bắt buộc phải điền vào trường tìm kiếm trước khi gửi biểu mẫu hay không. |
| kích thước | Để đặt hoặc trả về giá trị thuộc tính size của trường tìm kiếm. |
| loại | Đây là thuộc tính chỉ đọc trả về loại phần tử biểu mẫu mà trường tìm kiếm là. |
| giá trị | Để đặt hoặc trả về giá trị thuộc tính value của trường tìm kiếm. |
Cú pháp
Sau đây là cú pháp cho -
Tạo đối tượng tìm kiếm đầu vào -
var P = document.createElement("INPUT");
P.setAttribute("type", "search"); Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho đối tượng Tìm kiếm đầu vào -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút TẠO -
