Φόρμες Bootstrap 5

Stacked forms

Όλα τα στοιχεία <input> και <textarea> με την κλάση .form-control μπορούν να λάβουν τη σωστή μορφή φόρμας:

Παράδειγμα

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Διεύθυνση ηλεκτρονικού ταχυδρομείου：</label>
    <input type="email" class="form-control" id="email" placeholder="καταχωρήστε τη διεύθυνση ηλεκτρονικού ταχυδρομείου" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Κωδικός πρόσβασης:</label>
    <input type="password" class="form-control" id="pwd" placeholder="Παρακαλώ εισάγετε τον κωδικό πρόσβασης" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Θυμήσου με
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Υποβολή</button>
</form>

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

Επιπλέον, παρακαλούμε σημειώστε ότι προσθέσαμε .form-label κλάση για να διασφαλιστεί η σωστή γεμίση.

οι κουμπιά επιλογής έχουν διαφορετικά σήματα. Είναι ρυθμισμένα .form-check του περιβάλλοντος στοιχείου. Η ρύθμιση label .form-check-label την κλάση .form-check-input。

Textarea

Παράδειγμα

<label for="comment">Ανατροφοδότηση:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

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

σειρά φόρμας / δίκτυο (εσωτερική φόρμα)

Αν θέλετε τα στοιχεία της φόρμας να εμφανίζονται παράλληλα, χρησιμοποιήστε .row και .col：

Παράδειγμα

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Παρακαλώ εισάγετε τη διεύθυνση ηλεκτρονικού ταχυδρομείου" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Παρακαλώ εισάγετε τον κωδικό πρόσβασης" name="pswd">
    </div>
  </div>
</form>

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

Θα βρίσκεστε Bootstrap Γραμμή Παρακμήτε στην ενότητα για να μάθετε περισσότερα για τις στήλες και τις γραμμές.

Μέγεθος ελέγχων φόρμας

Μπορείτε να χρησιμοποιήσετε .form-control-lg ή .form-control-sm Αλλαγή .form-control Το μέγεθος του πεδίου εισαγωγής:

Παράδειγμα

<input type="text" class="form-control form-control-lg" placeholder="Μεγάλος έλεγχος εισαγωγής">
<input type="text" class="form-control" placeholder="Τυπικός έλεγχος εισαγωγής">
<input type="text" class="form-control form-control-sm" placeholder="Μικρός έλεγχος εισαγωγής">

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

Απενεργοποίηση και μόνο αναγνωστικός

Χρησιμοποιήστε τις ιδιότητες disabled και/ή readonly για να απενεργοποιήσετε το πεδίο εισαγωγής:

Παράδειγμα

<input type="text" class="form-control" placeholder="Τυπικός έλεγχος εισαγωγής">
<input type="text" class="form-control" placeholder="Απενεργοποιημένος έλεγχος εισαγωγής" disabled>
<input type="text" class="form-control" placeholder="Μόνο αναγνωστικός έλεγχος εισαγωγής" readonly>

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

Προηγμένος έλεγχος εισαγωγής

Χρησιμοποιήστε .form-control-plaintext Χρησιμοποιήστε την κλάση για να ρυθμίσετε το μοτίβο του πεδίου εισαγωγής χωρίς οριογραμμές, αλλά να διατηρήσετε κατάλληλο το περιθώριο και την εσωτερική απόσταση:

Παράδειγμα

<input type="text" class="form-control-plaintext" placeholder="Προηγμένος έλεγχος εισαγωγής">
<input type="text" class="form-control" placeholder="Τυπικός έλεγχος εισαγωγής">

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

Διαδρομή επιλογής χρώματος

Για να ρυθμίσετε σωστά το μοτίβο του input με type="color", χρησιμοποιήστε .form-control-color Κλάση:

Παράδειγμα

<input type="color" class="form-control form-control-color" value="#CCCCCC">

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