Formularz jQuery Mobile

jQuery Mobile automatycznie dodaje wspaniałe, łatwe do dotknięcia wyświetlanie do formularzy HTML.

Struktura formularza jQuery Mobile

jQuery Mobile używa CSS do ustawiania stylów elementów formularza HTML, aby uczynić je bardziej atrakcyjnymi i łatwymi w użyciu.

W jQuery Mobile możesz używać następujących kontrolerów formularza:

  • Pole tekstowe
  • Pole wyszukiwania
  • Pole wyboru pojedyncze
  • Pole wyboru
  • Menu wyboru
  • Przesuwnik
  • Przełącznik do odwrócenia

Kiedy pracujesz z formularzami jQuery Mobile, powinieneś znać następujące informacje:

  • Element <form> musi mieć ustawione atrybuty method i action
  • Każdy element formularza musi mieć ustawioną unikalną właściwość "id". Ten id musi być unikalny na stronie w witrynie. To dlatego, że model nawigacji na jednej stronie jQuery Mobile pozwala na jednoczesne wyświetlanie wielu różnych "stron".
  • Każdy element formularza musi mieć etykietę (label). Ustaw atrybut for etykiety, aby pasował do id elementu.

Przykład

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

Spróbuj sam

Aby ukryć etykietę, użyj klasy ui-hidden-accessible. To jest bardzo powszechne, gdy chcesz, aby atrybut placeholder elementu pełnił rolę etykiety:

Przykład

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

Spróbuj sam

Kontener pola

Jeśli chcesz, aby etykieta i elementy formularza były wyświetlane poprawnie na szerokim ekranie, użyj elementu <div> lub <fieldset> z atrybutem data-role="fieldcontain", aby opakować etykietę lub element formularza:

Przykład

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

Spróbuj sam

Wskazówka:Atrybut fieldcontain ustawia style etykiet i formularzów na podstawie szerokości strony. Kiedy szerokość strony jest większa niż 480px, etykieta i formularz są automatycznie umieszczane w tym samym wierszu. Kiedy jest mniejsza niż 480px, etykieta jest umieszczana nad elementem formularza.

Wskazówka:Aby uniknąć automatycznego ustawiania stylów przez jQuery Mobile dla klikalnych elementów, użyj atrybutu data-role="none":

Przykład

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

Spróbuj sam

Przesyłanie formularzy w jQuery Mobile

Wskazówka:jQuery Mobile automatycznie przesyła formularz za pomocą AJAX i próbuje zintegrować odpowiedź serwera z DOM aplikacji.