jQuery Mobile 表单

jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观。

jQuery Mobile 表单结构

jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式，以使其更有吸引力更易用。

在 jQuery Mobile 中，您可以使用以下表单控件：

  • 文本框
  • 搜索框
  • 单选框
  • 复选框
  • 选择菜单
  • 滑动条
  • 翻转切换开关

当您与 jQuery Mobile 表单打交道时，应该了解以下信息：

  • <form> 元素必须设置 method 和 action 属性
  • 每个表单元素都必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。
  • Hver formularfelt skal have en markør (label). Indstil labels for-attribut for at matche elementets id.

Eksempel

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

Prøv det selv

Hvis du vil skjule label, skal du bruge klassen ui-hidden-accessible. Dette er meget almindeligt, når du har brug for, at elements placeholder-attribut fungerer som label:

Eksempel

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

Prøv det selv

Områdeforklaring

Hvis du vil have, at label og formularelementer vises korrekt på bredskærme, skal du bruge <div> eller <fieldset>-elementer med attributten data-role="fieldcontain" til at indpakke label eller formularelementer:

Eksempel

<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>

Prøv det selv

Tip:fieldcontain-attributten bruger sidebredden til at sætte stil til label og formularkontroller. Når sidebredden er større end 480px, placeres label og formularkontroller automatisk på samme række. Når den er mindre end 480px, placeres label oven på formularelementet.

Tip:Hvis du vil undgå, at jQuery Mobile automatisk sætter stil til klikbare elementer, skal du bruge attributten data-role="none":

Eksempel

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

Prøv det selv

Indsend formular i jQuery Mobile

Tip:jQuery Mobile vil automatisk udføre formularindsendelse via AJAX og vil forsøge at integrere serverens respons i applikationens DOM.