Έντυπα

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Τα στοιχεία ελέγχου φόρμας του Bootstrap επεκτείνονται στα στυλ φόρμας Επανεκκίνησης με κλάσεις. Χρησιμοποιήστε αυτές τις κλάσεις για να επιλέξετε τις προσαρμοσμένες οθόνες τους για πιο συνεπή απόδοση σε προγράμματα περιήγησης και συσκευές.

Βεβαιωθείτε ότι χρησιμοποιείτε ένα κατάλληλο typeχαρακτηριστικό σε όλες τις εισόδους (π.χ. emailγια διεύθυνση email ή numberγια αριθμητικές πληροφορίες) για να επωφεληθείτε από νεότερα στοιχεία ελέγχου εισαγωγής, όπως επαλήθευση email, επιλογή αριθμού και άλλα.

Ακολουθεί ένα γρήγορο παράδειγμα για την επίδειξη των στυλ φόρμας του Bootstrap. Συνεχίστε να διαβάζετε για τεκμηρίωση σχετικά με τις απαιτούμενες τάξεις, τη διάταξη της φόρμας και άλλα.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Κείμενο φόρμας

Μπορεί να δημιουργηθεί κείμενο φόρμας σε επίπεδο μπλοκ ή ενσωματωμένου επιπέδου χρησιμοποιώντας .form-text.

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

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Το ενσωματωμένο κείμενο μπορεί να χρησιμοποιήσει οποιοδήποτε τυπικό ενσωματωμένο στοιχείο HTML (είτε είναι <span>, <small>, ή κάτι άλλο) με τίποτα περισσότερο από την .form-textκλάση.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

Φόρμες για άτομα με ειδικές ανάγκες

Προσθέστε το disabledχαρακτηριστικό boolean σε μια είσοδο για να αποτρέψετε τις αλληλεπιδράσεις των χρηστών και να το κάνετε να φαίνεται πιο ελαφρύ.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Προσθέστε το disabledχαρακτηριστικό στο a <fieldset>για να απενεργοποιήσετε όλα τα στοιχεία ελέγχου εντός. Τα προγράμματα περιήγησης αντιμετωπίζουν όλα τα εγγενή στοιχεία ελέγχου φόρμας ( <input>, <select>, και <button>στοιχεία) μέσα σε ένα <fieldset disabled>ως απενεργοποιημένα, αποτρέποντας τις αλληλεπιδράσεις τόσο του πληκτρολογίου όσο και του ποντικιού σε αυτά.

Ωστόσο, εάν η φόρμα σας περιλαμβάνει επίσης προσαρμοσμένα στοιχεία που μοιάζουν με κουμπιά, όπως <a class="btn btn-*">...</a>, θα τους δοθεί μόνο ένα στυλ pointer-events: none, που σημαίνει ότι εξακολουθούν να είναι εστιάσιμα και λειτουργικά χρησιμοποιώντας το πληκτρολόγιο. Σε αυτήν την περίπτωση, πρέπει να τροποποιήσετε με μη αυτόματο τρόπο αυτά τα στοιχεία ελέγχου προσθέτοντας tabindex="-1"για να αποτρέψετε την εστίασή τους και aria-disabled="disabled"για να σηματοδοτήσετε την κατάστασή τους σε υποστηρικτικές τεχνολογίες.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Προσιτότητα

Βεβαιωθείτε ότι όλα τα στοιχεία ελέγχου φορμών έχουν ένα κατάλληλο προσβάσιμο όνομα, ώστε ο σκοπός τους να μπορεί να μεταδοθεί στους χρήστες υποστηρικτικών τεχνολογιών. Ο απλούστερος τρόπος για να επιτευχθεί αυτό είναι να χρησιμοποιήσετε ένα <label>στοιχείο ή —στην περίπτωση των κουμπιών— να συμπεριλάβετε επαρκώς περιγραφικό κείμενο ως μέρος του <button>...</button>περιεχομένου.

Για περιπτώσεις όπου δεν είναι δυνατό να συμπεριληφθεί ένα ορατό <label>ή κατάλληλο περιεχόμενο κειμένου, υπάρχουν εναλλακτικοί τρόποι παρέχοντας ένα προσβάσιμο όνομα, όπως:

• <label>κρυφά στοιχεία χρησιμοποιώντας την .visually-hiddenκλάση
• Δείχνοντας ένα υπάρχον στοιχείο που μπορεί να λειτουργήσει ως ετικέτα χρησιμοποιώνταςaria-labelledby
• Παροχή titleχαρακτηριστικού
• Ρυθμίστε ρητά το προσβάσιμο όνομα σε ένα στοιχείο χρησιμοποιώνταςaria-label

Εάν δεν υπάρχει κανένα από αυτά, οι υποστηρικτικές τεχνολογίες ενδέχεται να καταφύγουν στη χρήση του placeholderχαρακτηριστικού ως εναλλακτικού για το προσβάσιμο όνομα <input>και <textarea>στοιχεία. Τα παραδείγματα σε αυτήν την ενότητα παρέχουν μερικές προτεινόμενες προσεγγίσεις για συγκεκριμένες περιπτώσεις.

Ενώ η χρήση οπτικά κρυφού περιεχομένου ( .visually-hidden, aria-label, και ακόμη και placeholderπεριεχόμενο, το οποίο εξαφανίζεται όταν ένα πεδίο φόρμας έχει περιεχόμενο) θα ωφελήσει τους χρήστες υποστηρικτικής τεχνολογίας, η έλλειψη ορατού κειμένου ετικέτας μπορεί να εξακολουθεί να είναι προβληματική για ορισμένους χρήστες. Κάποια μορφή ορατής ετικέτας είναι γενικά η καλύτερη προσέγγιση, τόσο για προσβασιμότητα όσο και για χρηστικότητα.

Sass

Πολλές μεταβλητές φόρμας ορίζονται σε γενικό επίπεδο για να επαναχρησιμοποιηθούν και να επεκταθούν από μεμονωμένα στοιχεία φόρμας. Θα τα βλέπετε πιο συχνά ως $input-btn-*και $input-*μεταβλητές.

Μεταβλητές

$input-btn-*Οι μεταβλητές είναι κοινές καθολικές μεταβλητές μεταξύ των κουμπιών μας και των στοιχείων της φόρμας μας. Θα βρείτε αυτές τις συχνά εκ νέου εκχωρήσεις ως τιμές σε άλλες μεταβλητές για συγκεκριμένα στοιχεία.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;