Στοιχεία Εισαγωγής Φόρμας του jQuery Mobile

jQuery Mobile Εισαγωγή Κειμένου

Οι πεδία εισαγωγής γραμμάτων είναι γραμμένα με τα πρότυπα των στοιχείων HTML και το jQuery Mobile τους προσθέτει ειδικά στυλ που προσαρμόζονται για τα κινητά συσκευές. Μπορείτε επίσης να χρησιμοποιήσετε τις νέες τύπους του HTML5 <input>:

Παράδειγμα

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fullname">Πλήρες Όνομα:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="bday">Γενέθλια:</label>
    <input type="date" name="bday" id="bday">
    <label for="email">Ηλεκτρονικό ταχυδρομείο:</label>
    <input type="email" name="email" id="email" placeholder="Η διεύθυνση ηλεκτρονικού ταχυδρομείου σας..">
  </div>
</form>

Δοκιμάστε το προσωπικά

Συμβουλή:Χρησιμοποιήστε το placeholder για να καθορίσετε μια σύντομη ένδειξη που περιγράφει την αναμενόμενη τιμή του πεδίου εισαγωγής:

<input placeholder="sometext">

Πλαίσιο κειμένου

Χρησιμοποιήστε το textarea για να επιτύχετε εισαγωγή πολλαπλών γραμμών κειμένου.

Σημείωση:Το πλαίσιο κειμένου επεκτείνεται αυτόματα για να προσαρμοστεί στο κείμενο που εισάγετε.

Παράδειγμα

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="info">Προσθέτουμενη Πληροφορία:</label>
    <textarea name="addinfo" id="info"></textarea>
  </div>
</form>

Δοκιμάστε το προσωπικά

Πλαίσιο αναζήτησης

Ο τύπος εισαγωγής type="search" είναι μια νέα τύπος του HTML5, ο οποίος χρησιμοποιείται για να ορίσει το πεδίο κειμένου για εισαγωγή λέξεων αναζήτησης:

Παράδειγμα

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="search">Αναζήτηση:</label>
    <input type="search" name="search" id="search">
  </div>
</form>

Δοκιμάστε το προσωπικά

Επιλογές με μονοαπάντηση

Οι επιλογές με μονοαπάντηση χρησιμοποιούνται όταν ο χρήστης επιλέγει μια από τις περιορισμένες επιλογές.

Για να δημιουργήσετε ένα σύνολο επιλογών με μονοαπάντηση, προσθέστε στο στοιχείο input τύπου "radio" και την αντίστοιχη ετικέτα label. Περιλαμβάνετε τα κουμπιά επιλογής στο στοιχείο <fieldset>. Μπορείτε επίσης να προσθέσετε στοιχείο <legend> για να ορίσετε τον τίτλο του <fieldset>.

Συμβουλή:Χρησιμοποιήστε την ιδιότητα data-role="controlgroup" για να συνδυάσετε αυτά τα κουμπιά:

Παράδειγμα

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Επιλέξτε το φύλο σας:</legend>
      <label for="male">Άνδρας</label>
      <input type="radio" name="gender" id="male" value="male">
      <label for="female">Γυναίκα</label>
      <input type="radio" name="gender" id="female" value="female"> 
  </fieldset>
</form>

Δοκιμάστε το προσωπικά

Κουτί επιλογής

Οι κουτιά επιλογής χρησιμοποιούνται όταν ο χρήστης επιλέγει μια ή περισσότερες επιλογές από ένα περιορισμένο αριθμό επιλογών:

Παράδειγμα

<form method="post" action="demoform.asp">
  <fieldset data-role="controlgroup">
    <legend>Επιλέξτε όσο πολλά αγαπημένα χρώματα θέλετε:</legend>
      <label for="red">Rosso</label>
      <input type="checkbox" name="favcolor" id="red" value="red">
      <label for="green">Verde</label>
      <input type="checkbox" name="favcolor" id="green" value="green">
      <label for="blue">Μπλε</label>
      <input type="checkbox" name="favcolor" id="blue" value="blue"> 
  </fieldset>
</form>

Δοκιμάστε το προσωπικά

Περισσότερες παραδείγματα

Για να δημιουργήσετε μια οριζόντια ομάδα κουτιών επιλογής ή κουτιών επιλογής, χρησιμοποιήστε την ιδιότητα data-type="horizontal":

Παράδειγμα

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

Δοκιμάστε το προσωπικά

Μπορείτε επίσης να χρησιμοποιήσετε το domain container για να 包装 <fieldset>：

Παράδειγμα

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Επιλέξτε το φύλο σας:</legend>
  </fieldset>
</div>

Δοκιμάστε το προσωπικά

Αν θέλετε να "προεπιλέξετε" έναν από τους κουμπίους, χρησιμοποιήστε την ιδιότητα checked του ετικέτας HTML <input>:

Παράδειγμα

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

Δοκιμάστε το προσωπικά