Φόρμας της jQuery Mobile

Η jQuery Mobile προσθέτει αυτόματα εξαιρετικά εύχρηστα και ελκυστικά στοιχεία ελέγχου για τις φόρμες HTML.

Δομή φόρμας της jQuery Mobile

Η jQuery Mobile χρησιμοποιεί το CSS για να ρυθμίζει το στυλ των στοιχείων φόρμας HTML, ώστε να είναι πιο ελκυστικά και εύχρηστα.

Στη jQuery Mobile μπορείτε να χρησιμοποιήσετε τα παρακάτω στοιχεία φόρμας:

  • Πεδίο κειμένου
  • Πεδίο αναζήτησης
  • Κουμπί επιλογής
  • Κουμπί επιλογής
  • Μενού επιλογής
  • Σκαλί
  • Κουμπί εναλλαγής αναστροφής

Όταν εργάζεστε με φόρμες της jQuery Mobile, πρέπει να γνωρίζετε τις παρακάτω πληροφορίες:

  • Το στοιχείο <form> πρέπει να έχει τις ιδιότητες method και action.
  • Κάθε στοιχείο φόρμας πρέπει να έχει μοναδικό χαρακτηριστικό "id" το οποίο πρέπει να είναι μοναδικό σε όλη τη σελίδα του ιστότοπου. Αυτό οφείλεται στο μοντέλο ενότητας της jQuery Mobile που επιτρέπει την παράσταση πολλαπλών "σελίδων" ταυτόχρονα.
  • Κάθε στοιχείο φόρμας πρέπει να έχει ένα σήμα (label). Ρυθμίστε την ιδιότητα for του label για να ταιριάζει με το id του στοιχείου.

Παράδειγμα

<form method="post" action="demoform.asp">
  <label for="fname">Onoma:</label>
  <input type="text" name="fname" id="fname">
</form>

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

Για να κρύψετε το label, χρησιμοποιήστε την κλάση ui-hidden-accessible. Αυτό είναι συχνό, όταν το attribute placeholder του στοιχείου παίζει τον ρόλο του label:

Παράδειγμα

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">Όνομα：</label>
  <input type="text" name="fname" id="fname" placeholder="Όνομα...">
</form>

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

Άλμα Κάθετας

Για να εμφανιστούν τα labels και τα form elements σωστά σε ευρύ οθόνη, χρησιμοποιήστε το element <div> ή <fieldset> με την ιδιότητα data-role="fieldcontain" για να περιλαμβάνετε το label ή το form element:

Παράδειγμα

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">Onoma:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Eponymo:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

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

Συμβουλή:Η ιδιότητα fieldcontain ρυθμίζει το στυλ του label και του form control με βάση το πλάτος της σελίδας. Όταν το πλάτος της σελίδας είναι μεγαλύτερο από 480px, το label τοποθετείται αυτόματα στην ίδια γραμμή με το form control. Όταν είναι μικρότερο από 480px, το label τοποθετείται πάνω από το form element.

Συμβουλή:Για να αποφύγετε την αυτόματη εφαρμογή στυλ από το jQuery Mobile σε klikables, χρησιμοποιήστε την ιδιότητα data-role="none":

Παράδειγμα

<label for="fname">Onoma:</label>
<input type="text" name="fname" id="fname"} data-role="none">

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

Υποβολή Φόρμας στο jQuery Mobile

Συμβουλή:Το jQuery Mobile θα υποβάλει τη φόρμα αυτόματα μέσω AJAX και θα προσπαθήσει να ενσωματώσει την απάντηση του διακομιστή στο DOM της εφαρμογής.