Biểu mẫu di động: cách thay thế danh sách thả xuống. Hỗ trợ các biểu mẫu di động HTML5 và các loại đầu vào HTML
JQuery Mobile tự động thêm kiểu dáng vào biểu mẫu HTML, làm cho chúng hấp dẫn hơn, thân thiện hơn với người dùng khi chạm vào.
Cấu trúc biểu mẫu di động JQuery
JQuery Mobile để sử dụng CSS để tạo kiểu cho các phần tử biểu mẫu HTMLđể làm cho chúng hấp dẫn hơn và dễ sử dụng hơn.
Trong jQuery Mobile, bạn có thể sử dụng các yếu tố sau các hình thức:
- trường nhập văn bản
- Tìm kiếm trường đầu vào
- nút radio
- hộp kiểm
- Chọn thực đơn
- thanh trượt
- Công tắc lật
Khi sử dụng biểu mẫu jQuery Mobile, bạn nên biết:
- <Форма>phần tử phải có một phương thức và thuộc tính hành động
- Mỗi phần tử biểu mẫu phải có một thuộc tính "ID" duy nhất. ID phải là duy nhất trên tất cả các trang trên toàn bộ trang web. Điều này xảy ra bởi vì Jquery di động cơ chế điều hướng một trang được trình bày theo cách mà nhiều người nhiều trang khác nhauđồng thời
- Mỗi thành phần của biểu mẫu phải có nhãn. tab cài đặt Vì thuộc tính khớp với id phần tử
ví dụ
Thử nó "
Để ẩn nhãn, hãy sử dụng lớp có thể truy cập ẩn trên giao diện người dùng. Điều này thường được sử dụng khi bạn gán một phần tử làm thẻ giữ chỗ:
ví dụ
Thử nó "
Khuyên bảo: Chúng ta có thể sử dụng thuộc tính data-net-BTN="true" để thêm nút xóa nội dung của trường nhập (biểu tượng X ở bên phải trường nhập):
ví dụ
<Ярлык = "имя_файла">Tên: метка>
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">
Thử nó "
Biểu tượng Biểu mẫu di động jQuery
Mẫu mã nút HTML tiêu chuẩn <вход>phần tử (nút, đặt lại, gửi). Chúng sẽ tự động kết xuất các kiểu, tự động điều chỉnh thiêt bị di độngđến máy tính để bàn:
ví dụ
<Тип входного = "Сброс" значение = "кнопка сброса">
Thử nó "
Nếu bạn cần thêm các kiểu bổ sung vào<вход>, bạn có thể sử dụng bảng thuộc tính data-* sau:
Nút để thêm biểu tượng:
<Тип входного = "Сброс" значение = "кнопка сброса">
Thử nó "
Trường vùng chứa
Để làm cho nhãn và các thành phần của biểu mẫu trông phù hợp hơn với màn hình rộng làm ơn hoặc