jQuery Mobile lomakkeen syöttöelementit

jQuery Mobile tekstisyöttö

Syöttökentät on kirjoitettu standardeilla HTML-elementteillä, ja jQuery Mobile asettaa niille erityisiä, mobiililaitteille sopivia ulkoasuja ja käyttöliittymätyylejä. Voit myös käyttää uusia HTML5 <input>-tyyppejä:

Esimerkki

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Koko nimi:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Syntymäpäivä:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Sähköposti:</label>
    <input type="email" name="email" id="email" placeholder="Sähköpostiosoitteesi..">
  </div>
</form>

Kokeile itse

Vinkki:Käytä placeholder-attributea määrittääksesi lyhyen ohjeen, joka kuvaa odotettua arvoa syöttökentälle:

<input placeholder="sometext">

Tekstikenttä

Käytä <textarea>-elementtiä monirivisen tekstin syöttämiseen.

Huomautus:Tekstikenttä laajenee automaattisesti, jotta se sopii syöttämäsi tekstiriville.

Esimerkki

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

Kokeile itse

Hakupalkki

Input-tyyppi type="search" on uusi tyyppi HTML5:ssä, joka määrittää tekstikentän, jota käytetään hakusanojen syöttämiseen:

Esimerkki

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

Kokeile itse

Valintapainikkeet

Valintapainikkeita käytetään, kun käyttäjä valitsee vain rajallisen määrän vaihtoehtoja.

Jos haluat luoda valintapainikkeet, lisää input-elementti, jossa on attribute type="radio", sekä vastaava label. Päivitä valintapainikkeet <fieldset>-elementin sisälle. Voit myös lisätä <legend>-elementin määrittääksesi <fieldset>-elementin otsikon.

Vinkki:Käytä data-role="controlgroup" -ominaisuutta näiden painikkeiden yhdistämiseen:

Esimerkki

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend Valitse sukupuolesi:</legend>
      <label for="male">Mies</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Nainen</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Kokeile itse

Valintaruudut

Valintaruutuja käytetään, kun käyttäjä valitsee rajoitetusta valikoimasta yhden tai useamman vaihtoehdon:

Esimerkki

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend Valitse yhtä monta suosikkiväriä kuin haluat:</legend>
      <label for="red">Punainen</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Vihreä</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Sininen</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Kokeile itse

Lisää esimerkkejä

Jos haluat ryhmitellä valintaruudut tai valintapudotukset horisontaalisesti, käytä data-type="horizontal" -ominaisuutta:

Esimerkki

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

Kokeile itse

Voit myös käyttää alue容器iä <fieldset>:n sisälle:

Esimerkki

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend Valitse sukupuolesi:</legend>
  </fieldset>
</div>

Kokeile itse

Jos haluat "valita" yhden painikkeen, käytä HTML <input>-tagin checked-ominaisuutta:

Esimerkki

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

Kokeile itse