Elementy formularza jQuery Mobile

Wejście tekstowe jQuery Mobile

Pola wejścia są napisane za pomocą standardowych elementów HTML, jQuery Mobile ustawia dla nich specjalne style estetyczne i łatwe w użyciu dla urządzeń mobilnych. Możesz również używać nowych typów <input> w HTML5:

Przykład

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Pełna nazwa:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Urodziny:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Twoj adres e-mail..">
  </div>
</form>

Spróbuj sam

Wskazówka:Użyj placeholder, aby określić krótki wskazówkę, która opisuje oczekiwane wartości pola wejścia:

<input placeholder="sometext">

Pole tekstowe

Użyj <textarea> do implementacji wielowierszowego wprowadzania tekstu.

Uwaga:Pole tekstowe automatycznie powiększa się, aby dostosować się do wprowadzonego tekstu wiersza.

Przykład

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Dodatkowe informacje:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Spróbuj sam

Pole wyszukiwania

Typ wejścia type="search" to nowy typ w HTML5, używany do zdefiniowania pola tekstowego do wprowadzania słów wyszukiwania:

Przykład

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

Spróbuj sam

Przyciski radiowe

Przyciski radiowe są używane, gdy użytkownik wybiera jeden z ograniczonej liczby dostępnych opcji.

Aby utworzyć zestaw przycisków radiowych, dodaj element input z atrybutem type="radio" oraz odpowiedni etykietę. Zawrzyj przyciski radiowe w elemencie <fieldset>. Możesz również dodać element <legend>, aby zdefiniować tytuł <fieldset>.

Wskazówka:Użyj atrybutu data-role="controlgroup", aby połączyć te przyciski:

Przykład

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Wybierz swoją płeć:</legend>
      <label for="male">Mężczyzna</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Kobieta</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Spróbuj sam

Kwadratki

Kwadratki są używane, gdy użytkownik wybiera jedną lub kilka z ograniczonej liczby opcji:

Przykład

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Wybierz tyle ulubionych kolorów, ile chcesz:</legend>
      <label for="red">Czerwony</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Zielony</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Niebieski</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Spróbuj sam

Więcej przykładów

Aby groupować poziomo przyciski radio lub checkbox, użyj atrybutu data-type="horizontal":

Przykład

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

Spróbuj sam

Możesz również użyć kontenera pola do opakowania <fieldset>:

Przykład

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Wybierz swoją płeć:</legend>
  </fieldset>
</div>

Spróbuj sam

Jeśli chcesz "zaznaczyć" jeden z przycisków, użyj atrybutu checked etykiety HTML <input>:

Przykład

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

Spróbuj sam