datalist làm hợp chứa danh sách các nội dung tùy chọn cho người dùng
<datalist> Là thẻ được nằm bên trong thẻ form hoặc nằm ngay tiếp theo của thẻ input, được sử dụng song song với thẻ input để tạo ra một bảng danh sách có sẵn được sổ xuống cho người dùng chọn lựa, ta có thể hiểu nôm na rằng nó là một list danh sách tùy chọn mặc định cho người dùng click và chọn rồi gửi đi, tuy nhiên khi sử dụng thẻ này nó có chức năng biểu thị giống như thẻ <select> hai thẻ này có thể biểu thị cùng một chức năng giống như nhau, và thẻ datalist, là một thẻ mới mà html5 mới thêm vào ,
Ví dụ: sau đây là đoạn code được tạo ra để ví dụ cho các bạn trải nghiệm thực tế về 2 loại thẻ định dạng ra được các form danh sách tùy chọn để cho các bạn xem và thực hành lại như vậy, mình sẽ đặt một số thẻ liên quan để các bạn thêm nội dung vào các thẻ đó sau rồi,
Để tạo lên một một form chứa danh sách tùy chọn bằng thẻ <select> trước tiên các bạn dùng thẻ form lồng ra bên ngoài tiếp đó là một cặp thẻ <select> và nằm trong đó là các thẻ option được chứa các nội dung danh sách tùy chọn,
Đối với thẻ <select> mặc định thẻ đầu tiên nó sẽ hiển thị văn bản ra cho người dùng nhìn thấy, đây là một điểm khác biệt với thẻ <datalist> sẽ không hiển thị nội dung nằm bên trong thẻ option đầu tiên giống như thẻ <select> , chính vì vậy mà thẻ <datalist> ta dùng thêm thẻ label để hiển thị chú thích cho người dùng hiểu được form đó chứa danh sách nội dung gì ,
Ví dự: Form này được sử dụng thẻ <select> có thể thêm label hoặc không cần thêm label thường thì đối với các danh sách tùy được định dạng bằng thẻ <select> mình hay dùng thẻ option đầu đầu làm chỉ mục tiêu đề, bởi <select> mặc định áp dụng thẻ option đầu tiên sẽ sẽ hiển thị văn bản nằm bên trong ô chưa, còn <datalist> lại không có tính năng này <br>
Cách tạo form bằng thẻ <select> được thực hiện bằng cách đặt cặp thẻ <select> chứa các thẻ option có nội dung nằm bên trong thẻ <select> và được bao phủ bởi thẻ form như đoạn code bên dưới
Theo mình thì <datalist> rất hạn chế về các tính năng nhưng không hiểu sao nó lại được ra mắt trong phiên bản html5 , cá nhân mình thì thích sử dụng select hơn vì có nhiều thuộc tính và có thể áp dụng css một cách tiện lợi và nhanh chóng , còn <datalist> nhiều cái rất hạn chế và nhiều khi mình áp dụng css cho nó không có được , tuy nhiên mình cũng sẽ vẫn hướng dẫn cho các bạn cách sử dụng thẻ này, cùng với nhiều thuộc tính của nó,
cách thức sử dụng thẻ này cũng tương tự như thẻ select tuy nhiên để nó có thể hiển thị danh sách cho người dùng các bạn cần sử dụng địa chỉ giá trị <datalist> và giá trị của thuộc tính list nằm bên trong thẻ input có cùng một giá trị id như nhau, để nội dung danh sách nằm bên trong thẻ <datalist> có thể hiển thị ra cho người dùng sử dụng.
Trang của mình bị hạn chế nhiều các tính năng bạn có thể copy code về và chỉnh rồi xem giao diện trên trình duyệt, để có được cái nhìn trực quan và xem được hết các tính năng của thẻ <datalist> , thẻ này là một thẻ mới ra mắt của phiên bản html5, thật ra thẻ này có chưc năng tương đương với chức năng của thẻ <select> bản thân mình thì thích sử dùng thẻ select hơn là thẻ <datalist> ,
Thuộc tính contenteditable: Giá trị: true, false false contenteditable="true" Thuộc tính này xác định chức năng cho phép người dùng có thể được chỉnh sửa nội dung, hoặc không được chỉnh sửa nội dung draggable: Giá trị: false, true, auto draggable="true" Thuộc Thuộc tính này xác định người dùng có được kéo thả thành phần hay không. dropzone copy: Giá trị: move, copy, link dropzone="true" Thuộc tính này có chức năng xác định những gì xảy ra khi kéo các mục hay dữ liệu thả xuống thành phần. hidden: Giá trị: hidden hidden="hidden" Thuộc tính này có chức năng xác định không hiển thị thành phần. spellcheck: Giá trị: false, true false spellcheck="true" Thuộc tính này xác định chính tả và ngữ pháp của thành phần có có được kiểm tra hay không. Thuộc tính như HTML4.01 accesskey: Giá trị: a b c ..vv accesskey="g" Thuộc tính này xác định một phím tắt để truy cập vào thành phần class: Ví dụ: class="section" Dùng để xác định tên gọi để định dạng style Xác định tên cho thẻ để xác định, định dạng style id: Ví dụ: id="layout" Thuộc tính này có chức năng xác định tên cho thẻ để áp dụng định dạng style, Xác định tên thẻ để định dạng style dir Giá trị: ltr, rtl dir="rtl" Xác định hướng văn bản cho các nội dung trong một thành phần. lang lang="vi" Xác định mã ngôn ngữ cho nội dung trong một thành phần. style style="color: red" Xác định một định dạng cho một thành phần. title Giá trị: text Ví dụ: title="Đây là title" Thuộc tính này xác định chứa nội dung tiêu đề xml:lang Mã ngôn ngữ lang="vi" Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.
0 Nhận xét