Các phần tử đầu vào biểu mẫu jQuery Mobile

jQuery Mobile đầu vào văn bản

Trường đầu vào được viết bằng các phần tử HTML tiêu chuẩn, jQuery Mobile sẽ đặt các phong cách đẹp và dễ sử dụng đặc biệt cho thiết bị di động. Bạn cũng có thể sử dụng các loại mới của HTML5 <input>:

Mô hình

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Họ và tên:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Ngày sinh:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" placeholder="Địa chỉ email của bạn..">
  </div>
</form>

Thử ngay

Lưu ý:Hãy sử dụng placeholder để quy định một đoạn văn ngắn làm lời nhắc, mô tả giá trị mong đợi của trường đầu vào:

<input placeholder="sometext">

Hộp văn bản

Hãy sử dụng <textarea> để thực hiện đầu vào văn bản nhiều dòng.

Chú ý:Hộp văn bản sẽ tự động mở rộng để phù hợp với dòng văn bản bạn nhập.

Mô hình

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Thông tin thêm:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Thử ngay

Hộp tìm kiếm

Loại đầu vào type="search" là một loại mới trong HTML5, được sử dụng để xác định trường văn bản để nhập từ khóa tìm kiếm:

Mô hình

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Tìm kiếm:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

Thử ngay

Nút chọn một trong nhiều

Nút chọn một trong nhiều được sử dụng khi người dùng chỉ chọn một trong số các tùy chọn có sẵn.

Nếu bạn muốn tạo một bộ nút chọn một trong nhiều, hãy thêm phần tử input với thuộc tính type="radio" và label tương ứng. Đóng gói các nút chọn trong phần tử <fieldset>. Bạn cũng có thể thêm phần tử <legend> để xác định tiêu đề của phần tử <fieldset>.

Lưu ý:Vui lòng sử dụng thuộc tính data-role="controlgroup" để tổ hợp các nút này:

Mô hình

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Chọn giới tính của bạn:</legend>
      <label for="male">Nam</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Nữ</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Thử ngay

Hộp kiểm

Hộp kiểm được sử dụng khi người dùng chọn một hoặc nhiều tùy chọn trong số các tùy chọn có số lượng hạn chế:

Mô hình

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Chọn nhiều màu sắc yêu thích bạn muốn:</legend>
      <label for="red">Red</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Green</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blue</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Thử ngay

Các ví dụ thêm

Nếu bạn muốn nhóm các hộp chọn hoặc hộp kiểm theo hướng ngang, hãy sử dụng thuộc tính data-type="horizontal":

Mô hình

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

Thử ngay

Bạn cũng có thể sử dụng div chứa để bọc <fieldset>:

Mô hình

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Chọn giới tính của bạn:</legend>
  </fieldset>
</div>

Thử ngay

Nếu bạn muốn “chọn trước” một nút nào đó, hãy sử dụng thuộc tính checked của thẻ <input> HTML:

Mô hình

<input type="radio"> checked>
<input type="checkbox"> checked>

Thử ngay