jQuery Mobile formulierinvoerelementen

jQuery Mobile tekstinvoer

Invoervelden worden geschreven met behulp van standaard HTML-elementen, jQuery Mobile stelt voor hen speciale stijlen in voor mobiele apparaten. U kunt ook nieuwe HTML5 <input>-typen gebruiken:

Voorbeeld

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Volledige Naam:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Verjaardag:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" placeholder="Uw e-mailadres..">
  </div>
</form>

Probeer het zelf

Tip:Gebruik placeholder om een korte aanwijzing te geven die de verwachte waarde van het invoerveld beschrijft:

<input placeholder="sometext">

Tekstbalk

Gebruik <textarea> om meerdere regels tekst in te voeren.

Opmerking:De tekstbalk wordt automatisch vergroot om aan te passen aan de tekstregels die u invoert.

Voorbeeld

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

Probeer het zelf

Zoekbalk

De invoertype type="search" is een nieuwe type in HTML5, gebruikt om een tekstveld te definiëren voor het invoeren van zoekwoorden:

Voorbeeld

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

Probeer het zelf

Keuzevakje

Keuzevakjes worden gebruikt wanneer de gebruiker slechts één van een beperkt aantal opties selecteert.

Om een set van keuzevakjes te maken, voeg een input-element met type="radio" en de bijbehorende label toe. Verpak de keuzevakjes in een <fieldset>-element. U kunt ook een <legend>-element toevoegen om de titel van het <fieldset> te definiëren.

Tip:Gebruik de eigenschap data-role="controlgroup" om deze knoppen te combineren:

Voorbeeld

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Kies je geslacht:</legend>
      <label for="male">Man</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Vrouw</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Probeer het zelf

Checkbox

Checkboxen worden gebruikt wanneer de gebruiker een van de beperkte hoeveelheid opties selecteert:

Voorbeeld

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Kies zoveel favoriete kleuren als je wilt:</legend>
      <label for="red">Rood</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Groen</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Blauw</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Probeer het zelf

Meer voorbeelden

Gebruik de eigenschap data-type="horizontal" om keuzevakken of selectievakken horizontaal te groeperen:

Voorbeeld

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

Probeer het zelf

Je kunt ook een <fieldset> omwikkelen met een domeincontainer:

Voorbeeld

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Kies je geslacht:</legend>
  </fieldset>
</div>

Probeer het zelf

Als je een knop wilt "voorkeuren", gebruik dan de checked-eigenschap van de HTML <input>-tag:

Voorbeeld

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

Probeer het zelf