Form là thành phần không thể thiếu đối với một website. jQuery Mobile cung cấp hai cải tiến quan trọng cho các HTML Form:

  • Thứ nhất, tất cả các form sẽ submit dữ liệu qua Ajax. Điều này có nghĩa form sẽ gửi dữ liệu trực tiếp đến form và kết quả sẽ mang trở lại người dùng và đặt trong trang chứa form. Việc này tránh phải tải lại toàn bộ trang.
  • Thứ hai, các điều khiển trên form như button, checkbox, radio, v.v. đều có những thay đổi sao cho tương thích với các thiết bị di động.

Ví dụ đầu tiên về Form

Để có cái nhìn tổng quan về việc jQuery Mobile đã thay đổi Form như thế nào, chúng ta sẽ tạo một tập tin tên Test_Form.html có nội dung như sau (ở đây chỉ có phần body, nếu bạn quên cách dùng thư viện jQuery Mobile thì có thể xem lại bài https://ngocminhtran.com/2019/01/07/jquery-mobile/ ):


<div data-role="page">

   <div data-role="header">

      <h1>Form Demo</h1>

   </div>

   <div data-role="content">

      <form action="…" method="post">

        <div data-role="fieldcontain">

           <label for="name">Name:</label>

           <input type="text" name="name" id="name" value="" />

       </div>

       <div data-role="fieldcontain">

           <label for="email">Email:</label>

           <input type="text" name="email" id="email" value="" />

       </div>

       <div data-role="fieldcontain">

          <input type="submit" name="submit" value="Send" />

       </div>

     </form>

   </div>

</div>

Kết quả khi thực thi Test_Form.html trên thiết bị di động:

Trên thiết bị có màn hình lớn hơn, giao diện trông như sau:

Ở đây, form chúng ta có hai label tương ứng hai textbox và một button. Để quy định label nào sẽ tương ứng với textbox nào, chúng ta dùng:


<div data-role="fieldcontain">

</div>

Chúng ta để ý sự thay đổi vị trí của hai label trên hai màn hình kích cỡ khác nhau và button có kích thước lớn giúp việc tương tác trên thiết bị di động dễ dàng hơn. Tất cả điều này có được là nhờ jQuery Mobile.

Một điều khiển khác rất phổ biến trên form là textarea. Những ứng xử mặc định của điều khiển này rất khó sử dụng trên các thiết bị di động ví dụ như khi nội dung văn bản trong textarea tăng vượt quá kích cỡ của nó thì một thanh cuộn sẽ xuất hiện. Hãy xem jQuery Mobile thay đổi như thế nào đến cách ứng xử của jQuery Mobile bằng cách thêm một label và textarea đến nội dung Test_Form.html:


…

<div data-role="fieldcontain">

   <label for="email">Email:</label>

   <input type="text" name="email" id="email" value="" />

</div>

<div data-role="fieldcontain">

   <label for="bio">Bio:</label>

   <textarea name="bio" id="bio"></textarea>

</div>

<div data-role="fieldcontain">

   <input type="submit" name="submit" value="Send" />

</div>

Thực thi trên thiết bị di động

Gõ một vài nội dung vào textarea và textarea sẽ tự động mở rộng kích cỡ phù hợp

Chúng ta đã có một cái nhìn tổng quan về vai trò của jQuery Mobile với form và các điều khiển của nó. Các phần tiếp theo chúng ta sẽ làm việc chi tiết hơn với các điều khiển trong form.

Radio và checkbox

Giống như các điều khiển chúng ta đã tìm hiểu ở trên như textbox, textarea, button, label, radio và checkbox cũng được đặt trong cặp div với thuộc tính data-role = “fieldcontain”. Nhưng có một khác biệt là radio và checkbox cũng được nhóm trong thẻ fieldset như sau:


<fieldset data-role="controlgroup"> </fieldset>

Để hiểu rõ hơn, chúng ta thay đổi nội dung trong form từ tập tin Test_Form.html như sau:


<div data-role="fieldcontain">

<fieldset data-role="controlgroup">

   <legend>Favorite Movie:</legend>

   <input type="radio" name="favoritemovie"

          id="favoritemovie1" value="Star Wars">

   <label for="favoritemovie1">Star Wars</label>

   <input type="radio" name="favoritemovie"

         id="favoritemovie2" value="Vanilla Sky">

   <label for="favoritemovie2">Vanilla Sky</label>

   <input type="radio" name="favoritemovie"

        id="favoritemovie3" value="Inception">

   <label for="favoritemovie3">Inception</label>

  </fieldset>

</div>

<div data-role="fieldcontain">

   <fieldset data-role="controlgroup">

      <legend>Favorite Colors:</legend>

      <input type="checkbox" name="favoritecolor"

        id="favoritecolor1" value="Green">

      <label for="favoritecolor1">Green</label>

      <input type="checkbox" name="favoritecolor"

        id="favoritecolor2" value="Red">

      <label for="favoritecolor2">Red</label>

      <input type="checkbox" name="favoritecolor"

        id="favoritecolor3" value="Yellow">

      <label for="favoritecolor3">Yellow</label>

   </fieldset>

</div>

<div data-role="fieldcontain"> 
   <input type="submit" name="submit" value="Send" />

</div>

Kết quả:

Một đặc trưng thú vị khác được hỗ trợ bởi jQuery Mobile là radio và  checkbox có thể chuyển sang thanh các button nằm ngang bằng cách bổ sung thuộc tính data-type=”horizontal” đến fieldset:


<div data-role="fieldcontain">

   <fieldset data-role="controlgroup" data-type="horizontal">

   ...

  </fieldset>

</div>

<div data-role="fieldcontain">

   <fieldset data-role="controlgroup" data-type="horizontal">

  ...

   </fieldset>

</div>
<div data-role="fieldcontain"> 
   <input type="submit" name="submit" value="Send" />

</div>

Kết quả trên hai màn hình kích thước khác nhau:

select

Điều khiển select trong HTML Form tương tự combobox trong cửa sổ ứng dụng Windows. Chúng ta cũng đặt các select trong các fieldcontain như minh họa sau:


<div data-role="fieldcontain">

   <label for="favmovie">Favorite Movie:</label>

   <select name="favmovie" id="favmovie">

     <option value="Star Wars">Star Wars</option>

     <option value="Revenge of the Sith">Revenge of the Sith</option>

     <option value="Tron">Tron</option>

     <option value="Tron Legacy">Tron Legacy</option>

  </select>

</div>

Thực thi với kết quả:

Nhấn vào biểu tượng mũi tên hướng xuống bên phải:

Tương tự radio và checkbox, chúng ta có thể nhóm các select trong fieldset và cho phép chúng chuyển sang thanh button ngang dùng data-type=”horizontal”. Xét ví dụ cách dùng select như sau:


<fieldset data-role="controlgroup" data-type="horizontal">

   <legend>Trip Setup:</legend>

   <label for="location">Location</label>

   <select name="location" id="location">

     <option value="Home">Home</option>

     <option value="Work">Work</option>

     <option value="Moon">Moon</option>

     <option value="Airport">Airport</option>

  </select>

  <label for="time">Time</label>

  <select name="time" id="time">

    <option value="Morning">Morning</option>

    <option value="Afternoon">Afternoon</option>

    <option value="Evening">Evening</option>

  </select>

  <label for="meal">Meal</label>

  <select name="meal" id="meal">

    <option value="Meat">Meat</option>

    <option value="Vegan">Vegan</option>

    <option value="Kosher">Kosher</option>

  </select>

</fieldset>

Kết quả trên hai màn hình kích cỡ khác nhau:

Ô tìm kiếm (Search field)

Chỉ việc thay đổi điều khiển từ text (textbox) sang search. Giống với text nhưng khi người dùng gõ nội dung vào ô tìm kiếm, một biểu tượng dấu X (Delete) để xóa nội dung chúng ta gõ vào ô tìm kiếm sẽ xuất hiện bên phải ô tìm kiếm. Một đặc điểm phổ biến khác để phân biệt một ô tìm kiếm và một text thông thường là bên trái ô tìm kiếm thường có một biểu tượng giống kính lúp phía bên trái. Thêm một ô tìm kiếm được nhóm trong fieldcontain như sau:


<div data-role="fieldcontain">

  <label for="name">Name:</label>

  <input type="search" name="name" id="name" value="" />

</div>

Kết quả:

Gõ một vài từ vào ô tìm kiếm:

Nhấn vào biểu tượng dấu X bên phải sẽ xóa nội dung trong ô tìm kiếm vừa gõ.

Một cách dùng khác của select

Chúng ta đã tìm hiểu cách jQuery Mobile hỗ trợ select ở phần trên, tuy nhiên, trong một số trường hợp khi các tùy chọn cho select chỉ là một trong hai trạng thái đối lập như 0 và 1, Nam và Nữ, v.v. chúng ta có thể biến select thành một điều khiển chuyển trạng thái (Flip toggle) (tương tự như slider trong các giao diện di động). Xét đoạn mã minh họa select sau đây:


<div data-role="fieldcontain">

  <label for="gender">Gender:</label>

  <select name="gender" id="gender">

   <option value="0">Male</option>

   <option value="1">Female</option>

  </select>

</div>

Kết quả

Chuyển vai trò của select sang điều khiển chuyển trạng thái (flip toggle hay slider) bằng cách thêm thuộc tính data-role=”slider” đến thẻ select:


<select name="gender" id="gender" data-role="slider">

  <option value="0">Male</option>

  <option value="1">Female</option>

</select>

Kết quả:

range

Là một thanh trượt (slider) cho phép chúng ta chọn các giá trị giữa hai giá trị nào đó (tạm gọi là min và max). Range xuất hiện từ HTML5 và có thể không hỗ trợ trong một số trình duyệt, jQuery Mobile sẽ giúp range làm việc trên mọi trình duyệt. Đoạn mã dùng range như ví dụ sau:


<div data-role="fieldcontain">

  <label for="coolness">Coolness:</label>

  <input type="range" name="coolness" id="coolness" 

         min="0" max="100" value="22" data-highlight="true">

</div>

Kết quả:

Giá trị hiện tại là 22 và chúng ta có thể tăng hay giảm giữa 0 và 100 bằng cách điều chỉnh nút trên thanh trượt

Chúng ta có thể thêm màu đến range bằng cách thêm thuộc tính data-highlight=”true”:


<div data-role="fieldcontain">

  <label for="coolness">Coolness:</label>

  <input type="range" name="coolness" id="coolness" min="0" max="100"

     value="22" data-highlight="true">

</div>

Kết quả:

Phiên bản mini cho các điều khiển của form

jQuery Mobile cho phép chúng ta tạo ra phiên bản gọn hơn (mini) của các điều khiển trên form bằng cách dùng thuộc tính data-mini=”true”. Để dễ hình dung, chúng ta sẽ tạo hai phiên bản của ô tìm kiếm như đoạn mã sau:


<div data-role="fieldcontain">

  <label for="name">Name:</label>

  <input type="search" name="name" id="name" value="" />

</div>

<div data-role="fieldcontain">

  <label for="name">Name (Mini version):</label>

  <input type="search" name="name" id="name" value="" datamini="true" />

</div>

Ô tìm kiếm bên trên là phiên bản bình thường, ô tìm kiếm dưới là phiên bản mini (Mini version). Kết quả:

Lời kết

Trong bài này chúng ta đã tìm hiểu cách jQuery Mobile ảnh hưởng như thế nào đến form và các điều khiển trong nó. Nhờ jQuery Mobile, các form HTML sẽ trở nên đẹp hơn, mềm dẻo hơn, nhiều đặc trưng mới hơn khi dùng trên các thiết bị di động.