jQuery Mobile formularindgangselementer

jQuery Mobile tekstinput

Inputfelterne er skrevet med standard HTML-elementer, og jQuery Mobile sætter specielle, smukke og brugervenlige stiler til dem. Du kan også bruge nye HTML5 <input>-typer:

Eksempel

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Full Name:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Birthday:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Din e-mailadresse..">
  </div>
</form>

Prøv det selv

Tip:Brug placeholder til at specificere en kort advarsel, der beskriver det forventede værdi for inputfeltet:

<input placeholder="sometext">

Tekstfelt

Brug <textarea> til at implementere multiline tekstindtastning.

Bemærk:Tekstfeltet udvider sig automatisk for at tilpasse sig dine indtastede tekstlinjer.

Eksempel

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

Prøv det selv

Søgefelt

Input-typen type="search" er en ny type i HTML5, der bruges til at definere en tekstfelt, der er beregnet til at indtaste søgeord:

Eksempel

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

Prøv det selv

Radioafkrydsningsfelt

Radioafkrydsningsfelter bruges, når brugeren kun vælger én af et begrænset antal muligheder.

For at oprette et sæt af afkrydsningsfelter, tilføj et element med type="radio" og den tilsvarende label. Indpakke afkrydsningsfelterne i et <fieldset>-element. Du kan også tilføje et <legend>-element for at definere titlen på <fieldset>.

Tip:Brug data-role="controlgroup"-egenskaben til at kombinere disse knapper:

Eksempel

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Vælg dit køn:</legend>
      <label for="male">Mand</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Kvinde</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Prøv det selv

Krydsfelt

Krydsfelt bruges, når brugeren vælger en eller flere af et begrænset antal valgmuligheder:

Eksempel

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Vælg så mange favoritfarver, du vil:</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>

Prøv det selv

Flere eksempler

Hvis du vil gruppere radio- eller afkrydsningsfelter horisontalt, skal du bruge data-type="horizontal"-egenskaben:

Eksempel

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

Prøv det selv

Du kan også bruge et områdecontainer til at indpakke <fieldset>:

Eksempel

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Vælg dit køn:</legend>
  </fieldset>
</div>

Prøv det selv

Hvis du ønsker at "forudvælge" en af knapperne, skal du bruge HTML <input>-etiketets checked-egenskab:

Eksempel

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

Prøv det selv