Formularze w jQuery Mobile

jQuery mobile

Poziom średnio-zaawansowany

Kontynuujemy opanowywanie jQuery Mobile poprzez realizację przykładów. Dziś zajmiemy się tematem formularzy.

Formularze w jQuery Mobile

Sprawa wygląda zwyczajnie. Tworzymy normalny formularz, dodajemy elementy i atrybuty HTML5.

Poniższy przykład prezentuje prosty formularz elementami (input) różnego typu:

...
    <div data-role="page">
        <div data-role="header">
            <h1>Forms - demo</h1>
        </div>
            
        <div data-role="content">
            <form action="" method="post">
                <div data-role="fieldcontain">
                    <label for="mypassword">Podaj hasło</label>
                    <input type="password" id="mypassword" />
                </div>
                  
                <div data-role="fieldcontain">
                    <label for="mycolor">Wybierz kolor</label>
                    <input type="color" id="mycolor" />
                </div>
                    
                <div data-role="fieldcontain">
                    <label for="mysearch">Szukaj</label>
                    <input type="search" id="mysearch" />
                </div>
                    
            </form>
        </div>
    </div>
...

Przykładowy widok na Opera Mobile Emulator:

Formularze jQuery Mobile - prosty przykład

Formularze jQuery Mobile – prosty przykład

Pełny przykład dostępny tutaj.

Chcąc uzyskać dany rodzaj pola, definiujemy wartość atrybuty type, na przykład type=”color”.

Kolejny przykład to dobrze znane pola wyboru i opcji (checkbox i radio).

Pola checkbox i radio w jQuery Mobile

Pierwszy przykład to wybór jednej opcji, czyli pola typu radio:

...
<div data-role="content">
  <form action="" method="post">
    <div data-role="fieldcontain">
      <fieldset data-role="controlgroup">
        <legend>Wybierz:</legend>

        <input type="radio" name="myradio" id="myradio1"
        value="1" checked="checked" />
        <label for="myradio1">Jeden</label>

        <input type="radio" name="myradio" id="myradio2"
        value="2" />
        <label for="myradio2">Dwa</label>

        <input type="radio" name="myradio" id="myradio3"
        value="3" />
        <label for="myradio3">Trzy</label>

      </fieldset>

      <br />

      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Opcje w poziomie:</legend>
        <input type="radio" name="my_radio_h" id="my_radio_h1"
        value="1" checked="checked" />
        <label for="my_radio_h1">Jeden</label>

        <input type="radio" name="my_radio_h" id="my_radio_h2"
        value="2" />
        <label for="my_radio_h2">Dwa</label>

        <input type="radio" name="my_radio_h" id="my_radio_h3"
        value="3" />
        <label for="my_radio_h3">Trzy</label>
      </fieldset>
    </div>
  </form>
</div>
...

Przykładowy widok:

Formularze jQuery Mobile - radio

Formularze jQuery Mobile – radio

Pełny przykład dostępny tutaj.

Analogicznie – wybór wielu opcji, czyli pola typu checkbox:

...
<div data-role="content">
  <form action="" method="post">
    <div data-role="fieldcontain">
      <fieldset data-role="controlgroup">
        <legend>Zaznacz pola:</legend>

        <input type="checkbox" name="mycheck" id="mycheck1"
        value="1" checked="checked" />
        <label for="mycheck1">Jeden</label>

        <input type="checkbox" name="mycheck" id="mycheck2"
        value="2" />
        <label for="mycheck2">Dwa</label>

        <input type="checkbox" name="mycheck" id="mycheck3"
        value="3" />
        <label for="mycheck3">Trzy</label>

      </fieldset>

      <br />

      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Pola - poziomo:</legend>

        <input type="checkbox" name="my_radio_h" id="my_radio_h1"
        value="1" checked="checked" />
        <label for="my_radio_h1">pierwsze</label>

        <input type="checkbox" name="my_radio_h" id="my_radio_h2"
        value="2" />
        <label for="my_radio_h2">drugie</label>

        <input type="checkbox" name="my_radio_h" id="my_radio_h3"
        value="3" />
        <label for="my_radio_h3">trzecie</label>
      </fieldset>
    </div>
  </form>
</div>
...

Przykładowy widok:

Formularze jQuery Mobile - checkbox

Formularze jQuery Mobile – checkbox

Pełny przykład dostępny tutaj.


Zasoby

Poniżej zasoby powiązane tematycznie z formularzami w jQuery Mobile.

Znakomite przykłady na W3Schools:

http://www.w3schools.com/jquerymobile/jquerymobile_form_basic.asp

http://www.w3schools.com/jquerymobile/jquerymobile_form_inputs.asp

http://www.w3schools.com/jquerymobile/jquerymobile_form_select.asp

http://www.w3schools.com/jquerymobile/jquerymobile_form_sliders.asp

Dokumentacja jQuery Mobile na temat formularzy:

http://demos.jquerymobile.com/1.2.1/docs/forms/docs-forms.html

Przykład realizacji walidacji formularza – w tym przypadku również bazujemy na atrybutach (required):

http://www.raymondcamden.com/index.cfm/2012/7/30/Example-of-form-validation-in-a-jQuery-Mobile-Application

Formularze w jQuery Mobile – podsumowanie

Na dziś to wszystko na temat formularzy w jQuery Mobile. Widzimy jak framework wpływa na wygląd formularzy. Ich obsługa nie odbiega zbytnio od obsługi zwykłych formularzy w JavaScript / jQuery.

W kolejnym artykule poruszymy temat m.in. okienek dialogowych i list, oraz podsumujemy podstawy jQuery Mobile.

Dziękuję za uwagę.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+1Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.