jQuery Mobile formulärinmatningselement

jQuery Mobile textinmatning

Inmatningsfält är skrivna med hjälp av standard HTML-element, jQuery Mobile sätter in specialdesignade och användarvänliga stilar för mobila enheter. Du kan också använda nya HTML5 <input>-typer:

Exempel

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Fullständigt namn:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Födelsedag:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">E-post:</label>
    <input type="email" name="email" id="email" placeholder="Din e-postadress..">
  </div>
</form>

Prova själv

Tips:Använd placeholder för att specificera en kort ledtråd som beskriver förväntat värde för inmatningsfältet:

<input placeholder="sometext">

Textfält

Använd <textarea> för att implementera flerradig textinmatning.

Kommentar:Textfältet utökas automatiskt för att anpassa sig till de textrader du skriver in.

Exempel

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

Prova själv

Sökfält

Input-typen type="search" är en ny typ i HTML5 som används för att definiera en textfält för att mata in sökord:

Exempel

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

Prova själv

Radio knappar

Radio knappar används när användaren endast väljer en av ett begränsat antal alternativ.

För att skapa ett satsrad, lägg till en input-element med type="radio" och den tillhörande label. Förpacka radioknapparna i ett <fieldset>-element. Du kan också lägga till ett <legend>-element för att definiera rubriken för <fieldset>.

Tips:Använd egenskapen data-role="controlgroup" för att gruppera dessa knappar:

Exempel

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Välj kön:</legend>
      <label for="male">Man</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Kvinna</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Prova själv

Kryssruta

Kryssrutor används när användaren väljer en eller flera alternativ från ett begränsat antal alternativ:

Exempel

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Välj så många favoritfärger som du vill:</legend>
      <label for="red">Röd</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Grön</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blå</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Prova själv

Mer exempel

Om du vill gruppera radioknappar eller kryssrutor horisontellt, använd egenskapen data-type="horizontal":

Exempel

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

Prova själv

Du kan också använda ett område för att innesluta <fieldset>:

Exempel

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Välj kön:</legend>
  </fieldset>
</div>

Prova själv

Om du vill "förhandsmarkera" en av knapparna, använd HTML <input>-taggets checked-attribut:

Exempel

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

Prova själv