Đối tượng Input Search trong HTML DOM liên quan đến phần tử <input> với type="search". Chúng ta có thể tạo và truy cập phần tử input type search bằng phương thức createElement() và getElementById().
Các thuộc tính
Dưới đây là các thuộc tính của đối tượng Input Search:
| Thuộc tính | Mô tả |
|---|---|
| autocomplete | Thiết lập hoặc trả về xem trường tìm kiếm có tự động hoàn thành hay không. |
| autofocus | Thiết lập hoặc trả về xem trường tìm kiếm có tự động focus khi trang tải hay không. |
| defaultValue | Thiết lập hoặc trả về giá trị mặc định của trường tìm kiếm. |
| disabled | Thiết lập hoặc trả về xem trường tìm kiếm có bị vô hiệu hóa hay không. |
| form | Trả về tham chiếu đến form chứa trường tìm kiếm. |
| list | Trả về tham chiếu đến datalist chứa trường tìm kiếm. |
| maxLength | Thiết lập hoặc trả về giá trị thuộc tính maxlength của trường tìm kiếm. |
| name | Thiết lập hoặc trả về giá trị thuộc tính name của trường tìm kiếm. |
| pattern | Thiết lập hoặc trả về giá trị thuộc tính pattern của trường tìm kiếm. |
| placeholder | Thiết lập hoặc trả về giá trị thuộc tính placeholder của trường tìm kiếm. |
| readOnly | Thiết lập hoặc trả về xem trường tìm kiếm có chỉ đọc hay không. |
| required | Thiết lập hoặc trả về xem có bắt buộc điền trường tìm kiếm trước khi submit hay không. |
| size | Thiết lập hoặc trả về giá trị thuộc tính size của trường tìm kiếm. |
| type | Thuộc tính chỉ đọc trả về loại phần tử form của trường tìm kiếm. |
| value | Thiết lập hoặc trả về giá trị thuộc tính value của trường tìm kiếm. |
Cú pháp
Cú pháp để tạo đối tượng input search:
var P = document.createElement("INPUT");
P.setAttribute("type", "search");
Ví dụ
Ví dụ minh họa cho đối tượng 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>Tạo trường input type search bằng cách nhấn nút dưới đây</p>
<button onclick="createSearch()">TẠO</button>
<br><br>
TRÁI CÂY: </body> </html>
Kết quả
Khi nhấn nút "TẠO", một trường input type search mới xuất hiện trên trang.
Giải thích ví dụ
Hàm createSearch() tạo phần tử INPUT, thiết lập type="search", và thêm vào body:
function createSearch() {
var S = document.createElement("INPUT");
S.setAttribute("type", "search");
document.body.appendChild(S);
}