jQuery Mobile Formulareingabelemente

jQuery Mobile Texteingabe

Eingabefelder werden mit den standardmäßigen HTML-Elementen erstellt. jQuery Mobile setzt spezielle, ansprechende und benutzerfreundliche Stile für mobile Geräte für sie ein. Sie können auch die neuen HTML5 <input>-Typen verwenden:

Beispiel

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Vollständiger Name:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Geburtstag:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">E-Mail:</label>
    <input type="email" name="email" id="email" placeholder="Ihre E-Mail-Adresse..">
  </div>
</form>

Probieren Sie es selbst aus

Hinweis:Verwenden Sie placeholder, um kurze Hinweise zu definieren, die den erwarteten Wert des Eingabefelds beschreiben:

<input placeholder="sometext">

Textfeld

Verwenden Sie <textarea>, um mehrzeilige Texteingaben zu realisieren.

Anmerkung:Das Textfeld wird automatisch erweitert, um den Textzeilen zu entsprechen, die Sie eingeben.

Beispiel

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

Probieren Sie es selbst aus

Suchfeld

Der Eingabetyp type="search" ist eine neue Art von Eingabe in HTML5, die verwendet wird, um einen Textfeld für die Eingabe eines Suchbegriffs zu definieren:

Beispiel

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

Probieren Sie es selbst aus

Radio-Button

Radio-Buttons werden verwendet, wenn der Benutzer nur eine begrenzte Anzahl von Optionen auswählen kann.

Um eine Gruppe von Auswahlkästchen zu erstellen, fügen Sie ein Element mit dem Attribut type="radio" und dem entsprechenden label hinzu. Verwenden Sie das <fieldset>-Element, um die Auswahlkästchen zu umschließen. Sie können auch ein <legend>-Element hinzufügen, um den Titel des <fieldset> zu definieren.

Hinweis:Verwenden Sie das Attribut data-role="controlgroup", um diese Schaltflächen zu kombinieren:

Beispiel

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Wählen Sie Ihr Geschlecht:</legend>
      <label for="male">Männlich</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Weiblich</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Probieren Sie es selbst aus

Checkbox

Checkbox-Elemente werden verwendet, wenn der Benutzer eine begrenzte Anzahl von Optionen auswählen kann:

Beispiel

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Wählen Sie so viele Lieblingsfarben aus, wie Sie möchten:</legend>
      <label for="red">Rot</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">Blau</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Probieren Sie es selbst aus

Mehr Beispiele

Verwenden Sie das Attribut data-type="horizontal", um Radio- oder Checkbox-Gruppen horizontal zu gruppieren:

Beispiel

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

Probieren Sie es selbst aus

Sie können auch einen Bereichscontainer verwenden, um <fieldset> zu verpacken:

Beispiel

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Wählen Sie Ihr Geschlecht:</legend>
  </fieldset>
</div>

Probieren Sie es selbst aus

Wenn Sie einen Button "vorgewählt" haben möchten, verwenden Sie das Attribut checked des HTML <input>-Tags:

Beispiel

<input type="radio"> geprüft>
<input type="checkbox"> geprüft>

Probieren Sie es selbst aus