Biểu mẫu jQuery Mobile

jQuery Mobile sẽ tự động thêm một外观 dễ tiếp cận và thân thiện với cảm ứng cho biểu mẫu HTML.

Cấu trúc biểu mẫu jQuery Mobile

jQuery Mobile sử dụng CSS để thiết lập kiểu dáng của yếu tố biểu mẫu HTML, làm cho nó hấp dẫn và dễ sử dụng hơn.

Trong jQuery Mobile, bạn có thể sử dụng các bộ điều khiển biểu mẫu sau:

  • Khung văn bản
  • Khung tìm kiếm
  • Khung chọn một
  • Khung kiểm tra
  • Danh sách chọn
  • Thanh trượt
  • Cửa cuốn lật

Khi bạn làm việc với biểu mẫu jQuery Mobile, bạn nên biết thông tin sau đây:

  • Yếu tố <form> phải thiết lập thuộc tính method và action.
  • Mỗi yếu tố biểu mẫu phải thiết lập thuộc tính "id" duy nhất. ID này trong trang web của bạn phải là duy nhất. Bởi vì mô hình định hướng trang duy nhất của jQuery Mobile cho phép nhiều "trang" khác nhau hiển thị cùng một lúc.
  • Mỗi phần tử biểu mẫu phải có một dấu hiệu (label). Hãy đặt thuộc tính for của label để khớp với id của phần tử.

Mô hình

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

Thử ngay

Nếu muốn ẩn label, hãy sử dụng lớp ui-hidden-accessible. Điều này rất phổ biến, khi bạn cần thuộc tính placeholder của phần tử đóng vai trò là label:

Mô hình

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">Tên：</label>
  <input type="text" name="fname" id="fname" placeholder="Tên...">
</form>

Thử ngay

Hộp lĩnh vực

Nếu cần label và phần tử biểu mẫu hiển thị bình thường trên màn hình rộng, hãy sử dụng phần tử <div> hoặc <fieldset> có thuộc tính data-role="fieldcontain" để bao bọc label hoặc phần tử biểu mẫu:

Mô hình

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

Thử ngay

Lưu ý:Thuộc tính fieldcontain dựa trên độ rộng của trang để đặt样式 cho label và các phần tử biểu mẫu. Khi độ rộng của trang lớn hơn 480px, nó sẽ tự động đặt label và phần tử biểu mẫu trên cùng một dòng. Khi nhỏ hơn 480px, label sẽ được đặt trên phần tử biểu mẫu.

Lưu ý:Nếu muốn tránh jQuery Mobile tự động đặt样式 cho các phần tử có thể nhấn, hãy sử dụng thuộc tính data-role="none":

Mô hình

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"} data-role="none">

Thử ngay

Gửi biểu mẫu trong jQuery Mobile

Lưu ý:jQuery Mobile sẽ tự động gửi biểu mẫu qua AJAX và sẽ cố gắng tích hợp phản hồi từ máy chủ vào DOM của ứng dụng.