in English

Έντυπα

Παραδείγματα και οδηγίες χρήσης για στυλ ελέγχου φόρμας, επιλογές διάταξης και προσαρμοσμένα στοιχεία για τη δημιουργία μεγάλης ποικιλίας φορμών.

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

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

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

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

Δεν θα μοιραστούμε ποτέ το email σας με κανέναν άλλο. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group 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>

Έλεγχοι φορμών

Τα στοιχεία ελέγχου κειμενικής φόρμας —όπως <input>s, <select>s και <textarea>s— διαμορφώνονται με την .form-controlτάξη. Περιλαμβάνονται στυλ για γενική εμφάνιση, κατάσταση εστίασης, μέγεθος και πολλά άλλα.

Φροντίστε να εξερευνήσετε τις προσαρμοσμένες φόρμες μας για να βελτιώσετε το στυλ <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Για εισόδους αρχείων, αλλάξτε το .form-controlγια .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Κόλλα

Ορίστε ύψη χρησιμοποιώντας κλάσεις όπως .form-control-lgκαι .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Μόνο για ανάγνωση

Προσθέστε το readonlyχαρακτηριστικό boolean σε μια είσοδο για να αποτρέψετε την τροποποίηση της τιμής της εισόδου. Οι είσοδοι μόνο για ανάγνωση εμφανίζονται πιο ελαφριές (όπως οι απενεργοποιημένες είσοδοι), αλλά διατηρούν τον τυπικό δρομέα.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Απλό κείμενο μόνο για ανάγνωση

Εάν θέλετε να έχετε <input readonly>στοιχεία στη φόρμα σας με στυλ απλού κειμένου, χρησιμοποιήστε την .form-control-plaintextκλάση για να αφαιρέσετε το προεπιλεγμένο στυλ του πεδίου φόρμας και να διατηρήσετε το σωστό περιθώριο και την αναπλήρωση.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Είσοδοι εύρους

Ρυθμίστε εισόδους εύρους οριζόντιας κύλισης χρησιμοποιώντας .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Πλαίσια ελέγχου και ραδιόφωνα

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

Υποστηρίζονται απενεργοποιημένα πλαίσια ελέγχου και ραδιόφωνα. Το disabledχαρακτηριστικό θα εφαρμόσει ένα πιο ανοιχτό χρώμα για να υποδείξει την κατάσταση της εισαγωγής.

Τα πλαίσια ελέγχου και τα κουμπιά επιλογής υποστηρίζουν επικύρωση φόρμας που βασίζεται σε HTML και παρέχουν συνοπτικές, προσβάσιμες ετικέτες. Ως εκ τούτου, τα <input>s και <label>τα s μας είναι αδελφικά στοιχεία σε αντίθεση με ένα <input>μέσα σε ένα <label>. Αυτό είναι ελαφρώς πιο αναλυτικό καθώς πρέπει να καθορίσετε idκαι forχαρακτηριστικά για να συσχετίσετε το <input>και <label>.

Προεπιλογή (στοιβάζονται)

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

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Στη γραμμή

Ομαδοποιήστε τα πλαίσια ελέγχου ή τα ραδιόφωνα στην ίδια οριζόντια σειρά προσθέτοντας .form-check-inlineσε οποιαδήποτε .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Χωρίς ετικέτες

Προσθήκη .position-staticσε εισόδους .form-checkπου δεν έχουν κείμενο ετικέτας. Θυμηθείτε να παρέχετε ακόμα κάποια μορφή προσβάσιμου ονόματος για υποστηρικτικές τεχνολογίες (για παράδειγμα, χρησιμοποιώντας aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Διάταξη

Εφόσον το Bootstrap ισχύει display: blockκαι width: 100%σχεδόν σε όλα τα στοιχεία ελέγχου φορμών, οι φόρμες θα στοιβάζονται από προεπιλογή κάθετα. Μπορούν να χρησιμοποιηθούν πρόσθετες τάξεις για να διαφοροποιηθεί αυτή η διάταξη ανάλογα με τη φόρμα.

Σχηματίστε ομάδες

Η .form-groupτάξη είναι ο ευκολότερος τρόπος για να προσθέσετε κάποια δομή σε φόρμες. Παρέχει μια ευέλικτη κλάση που ενθαρρύνει τη σωστή ομαδοποίηση ετικετών, στοιχείων ελέγχου, προαιρετικού κειμένου βοήθειας και μηνυμάτων επικύρωσης φόρμας. Από προεπιλογή ισχύει μόνο margin-bottom, αλλά επιλέγει πρόσθετα στυλ ανάλογα με .form-inlineτις ανάγκες. Χρησιμοποιήστε το με <fieldset>s, <div>s ή σχεδόν οποιοδήποτε άλλο στοιχείο.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Πλέγμα φόρμας

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

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Σχήμα σειράς

Μπορείτε επίσης να ανταλλάξετε .rowγια .form-row, μια παραλλαγή της τυπικής σειράς πλέγματος που υπερισχύει των προεπιλεγμένων υδρορροών στηλών για πιο σφιχτές και πιο συμπαγείς διατάξεις.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Μπορούν επίσης να δημιουργηθούν πιο σύνθετες διατάξεις με το σύστημα πλέγματος.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Οριζόντια μορφή

Δημιουργήστε οριζόντιες φόρμες με το πλέγμα προσθέτοντας την .rowκλάση για να σχηματίσετε ομάδες και χρησιμοποιώντας τις .col-*-*κλάσεις για να καθορίσετε το πλάτος των ετικετών και των στοιχείων ελέγχου σας. Φροντίστε να προσθέσετε .col-form-labelκαι στα <label>s σας, ώστε να είναι κατακόρυφα στο κέντρο με τα συσχετισμένα στοιχεία ελέγχου φόρμας.

Μερικές φορές, ίσως χρειαστεί να χρησιμοποιήσετε βοηθητικά προγράμματα περιθωρίου ή padding για να δημιουργήσετε την τέλεια ευθυγράμμιση που χρειάζεστε. Για παράδειγμα, αφαιρέσαμε την padding-topετικέτα των στοιβαγμένων εισόδων ραδιοφώνου για να ευθυγραμμίσουμε καλύτερα τη γραμμή βάσης του κειμένου.

Ραδιόφωνα 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Οριζόντια διαστασιολόγηση ετικετών

Βεβαιωθείτε ότι χρησιμοποιείτε .col-form-label-smή .col-form-label-lgστα <label>s ή <legend>s σας για να ακολουθείτε σωστά το μέγεθος του .form-control-lgκαι .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Μέγεθος στήλης

Όπως φαίνεται στα προηγούμενα παραδείγματα, το σύστημα πλέγματος μας σας επιτρέπει να τοποθετήσετε οποιονδήποτε αριθμό .cols μέσα σε ένα .rowή .form-row. Θα μοιράσουν το διαθέσιμο πλάτος εξίσου μεταξύ τους. Μπορείτε επίσης να επιλέξετε ένα υποσύνολο των στηλών σας για να καταλαμβάνει περισσότερο ή λιγότερο χώρο, ενώ οι υπόλοιπες .colμοιράζονται εξίσου τις υπόλοιπες, με συγκεκριμένες κατηγορίες στηλών όπως .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Αυτόματη ρύθμιση μεγέθους

Το παρακάτω παράδειγμα χρησιμοποιεί ένα βοηθητικό πρόγραμμα flexbox για να κεντράρει κατακόρυφα τα περιεχόμενα και αλλάζει .colέτσι .col-autoώστε οι στήλες σας να καταλαμβάνουν μόνο όσο χώρο χρειάζεται. Με άλλα λόγια, η στήλη μεγεθύνεται με βάση τα περιεχόμενα.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Στη συνέχεια, μπορείτε να το αναμίξετε ξανά με κατηγορίες στηλών για συγκεκριμένο μέγεθος.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Και φυσικά υποστηρίζονται προσαρμοσμένα στοιχεία ελέγχου φορμών .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Ενσωματωμένες φόρμες

Χρησιμοποιήστε την .form-inlineκλάση για να εμφανίσετε μια σειρά από ετικέτες, στοιχεία ελέγχου φορμών και κουμπιά σε μια ενιαία οριζόντια σειρά. Τα στοιχεία ελέγχου φορμών στις ενσωματωμένες φόρμες διαφέρουν ελαφρώς από τις προεπιλεγμένες καταστάσεις τους.

  • Τα στοιχεία ελέγχου είναι display: flex, συμπτύσσοντας οποιοδήποτε λευκό χώρο HTML και σας επιτρέπουν να παρέχετε έλεγχο στοίχισης με βοηθητικά προγράμματα διαστήματος και flexbox .
  • Τα στοιχεία ελέγχου και οι ομάδες εισόδου λαμβάνουν width: autoγια να αντικαταστήσουν την προεπιλογή του Bootstrap width: 100%.
  • Τα στοιχεία ελέγχου εμφανίζονται ενσωματωμένα μόνο σε θύρες προβολής με πλάτος τουλάχιστον 576 εικονοστοιχεία για να ληφθούν υπόψη οι στενές θύρες προβολής σε κινητές συσκευές.

Ίσως χρειαστεί να αντιμετωπίσετε μη αυτόματα το πλάτος και την ευθυγράμμιση μεμονωμένων στοιχείων ελέγχου φορμών με βοηθητικά προγράμματα διαστήματος (όπως φαίνεται παρακάτω). Τέλος, φροντίστε να συμπεριλαμβάνετε πάντα ένα <label>σε κάθε στοιχείο ελέγχου φόρμας, ακόμα κι αν χρειάζεται να το αποκρύψετε από επισκέπτες που δεν έχουν ανάγνωση οθόνης με .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Υποστηρίζονται επίσης προσαρμοσμένα στοιχεία ελέγχου και επιλογές φόρμας.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Εναλλακτικές λύσεις για κρυφές ετικέτες

Οι βοηθητικές τεχνολογίες, όπως τα προγράμματα ανάγνωσης οθόνης, θα έχουν πρόβλημα με τις φόρμες σας, εάν δεν συμπεριλάβετε μια ετικέτα για κάθε εισαγωγή. Για αυτές τις ενσωματωμένες φόρμες, μπορείτε να αποκρύψετε τις ετικέτες χρησιμοποιώντας την .sr-onlyκλάση. Υπάρχουν περαιτέρω εναλλακτικές μέθοδοι παροχής ετικέτας για υποστηρικτικές τεχνολογίες, όπως το χαρακτηριστικό aria-label, aria-labelledbyή title. Εάν δεν υπάρχει κανένα από αυτά, οι υποστηρικτικές τεχνολογίες ενδέχεται να καταφύγουν στη χρήση του placeholderχαρακτηριστικού, εάν υπάρχει, αλλά σημειώστε ότι η χρήση του placeholderως αντικατάσταση για άλλες μεθόδους επισήμανσης δεν συνιστάται.

Βοήθεια ΚΕΙΜΕΝΟΥ

Το κείμενο βοήθειας σε επίπεδο μπλοκ σε φόρμες μπορεί να δημιουργηθεί χρησιμοποιώντας .form-text(παλαιότερα γνωστό ως .help-blockστο v3). Το ενσωματωμένο κείμενο βοήθειας μπορεί να εφαρμοστεί με ευελιξία χρησιμοποιώντας οποιοδήποτε στοιχείο ενσωματωμένο HTML και κλάσεις βοηθητικού προγράμματος όπως .text-muted.

Συσχέτιση κειμένου βοήθειας με στοιχεία ελέγχου φόρμας

Το κείμενο βοήθειας θα πρέπει να συσχετίζεται ρητά με το στοιχείο ελέγχου φόρμας με το οποίο σχετίζεται χρησιμοποιώντας το aria-describedbyχαρακτηριστικό. Αυτό θα διασφαλίσει ότι οι υποστηρικτικές τεχνολογίες—όπως τα προγράμματα ανάγνωσης οθόνης—θα ανακοινώσουν αυτό το κείμενο βοήθειας όταν ο χρήστης εστιάζει ή εισέρχεται στο στοιχείο ελέγχου.

Το κείμενο βοήθειας κάτω από τις εισαγωγές μπορεί να διαμορφωθεί με .form-text. Αυτή η κλάση περιλαμβάνει display: blockκαι προσθέτει κάποιο κορυφαίο περιθώριο για εύκολη απόσταση από τις παραπάνω εισόδους.

Ο κωδικός πρόσβασής σας πρέπει να αποτελείται από 8-20 χαρακτήρες, να περιέχει γράμματα και αριθμούς και να μην περιέχει κενά, ειδικούς χαρακτήρες ή emoji. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Το ενσωματωμένο κείμενο μπορεί να χρησιμοποιήσει οποιοδήποτε τυπικό ενσωματωμένο στοιχείο HTML (είτε είναι <small>, <span>, ή κάτι άλλο) με τίποτα περισσότερο από μια τάξη βοηθητικού προγράμματος.

Πρέπει να έχει μήκος 8-20 χαρακτήρες. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

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

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

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

Προσθέστε το disabledχαρακτηριστικό στο a <fieldset>για να απενεργοποιήσετε όλα τα στοιχεία ελέγχου εντός.

Παράδειγμα απενεργοποιημένου συνόλου πεδίων 
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <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>
Προειδοποίηση με άγκυρες

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

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

Συμβατότητα μεταξύ προγραμμάτων περιήγησης

Ενώ το Bootstrap θα εφαρμόσει αυτά τα στυλ σε όλα τα προγράμματα περιήγησης, ο Internet Explorer 11 και παρακάτω δεν υποστηρίζουν πλήρως το disabledχαρακτηριστικό σε ένα <fieldset>. Χρησιμοποιήστε προσαρμοσμένη JavaScript για να απενεργοποιήσετε το σύνολο πεδίων σε αυτά τα προγράμματα περιήγησης.

Επικύρωση

Παρέχετε πολύτιμα, χρήσιμα σχόλια στους χρήστες σας με επικύρωση φόρμας HTML5 – διαθέσιμη σε όλα τα υποστηριζόμενα προγράμματα περιήγησης . Επιλέξτε από τα προεπιλεγμένα σχόλια επικύρωσης του προγράμματος περιήγησης ή εφαρμόστε προσαρμοσμένα μηνύματα με τις ενσωματωμένες κλάσεις και την JavaScript εκκίνησης.

Γνωρίζουμε ότι επί του παρόντος τα προσαρμοσμένα στυλ επικύρωσης και οι συμβουλές εργαλείων από την πλευρά του πελάτη δεν είναι προσβάσιμα, καθώς δεν εκτίθενται σε υποστηρικτικές τεχνολογίες. Ενώ εργαζόμαστε πάνω σε μια λύση, θα συνιστούσαμε είτε να χρησιμοποιήσετε την επιλογή από την πλευρά του διακομιστή είτε την προεπιλεγμένη μέθοδο επικύρωσης του προγράμματος περιήγησης.

Πως δουλεύει

Δείτε πώς λειτουργεί η επικύρωση φόρμας με το Bootstrap:

  • Η επικύρωση φόρμας HTML εφαρμόζεται μέσω των δύο ψευδοκλάσεων του CSS :invalidκαι :valid. Ισχύει για <input>, <select>, και <textarea>στοιχεία.
  • Το Bootstrap καλύπτει τα στυλ :invalidκαι :validστη γονική .was-validatedκλάση, που συνήθως εφαρμόζονται στο <form>. Διαφορετικά, οποιοδήποτε απαιτούμενο πεδίο χωρίς τιμή εμφανίζεται ως μη έγκυρο κατά τη φόρτωση της σελίδας. Με αυτόν τον τρόπο, μπορείτε να επιλέξετε πότε θα τα ενεργοποιήσετε (συνήθως μετά την απόπειρα υποβολής φόρμας).
  • Για να επαναφέρετε την εμφάνιση της φόρμας (για παράδειγμα, στην περίπτωση υποβολών δυναμικής φόρμας με χρήση AJAX), αφαιρέστε την .was-validatedκλάση από την <form>ξανά μετά την υποβολή.
  • Ως εναλλακτική λύση, .is-invalidκαι οι .is-validκλάσεις μπορούν να χρησιμοποιηθούν αντί για τις ψευδο-κλάσεις για επικύρωση από την πλευρά του διακομιστή . Δεν απαιτούν .was-validatedτάξη γονέα.
  • Λόγω περιορισμών στον τρόπο λειτουργίας του CSS, δεν μπορούμε (προς το παρόν) να εφαρμόσουμε στυλ σε ένα <label>που βρίσκεται πριν από ένα στοιχείο ελέγχου φόρμας στο DOM χωρίς τη βοήθεια προσαρμοσμένης JavaScript.
  • Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν το API επικύρωσης περιορισμών , μια σειρά μεθόδων JavaScript για την επικύρωση στοιχείων ελέγχου φορμών.
  • Τα μηνύματα σχολίων ενδέχεται να χρησιμοποιούν τις προεπιλογές του προγράμματος περιήγησης (διαφορετικές για κάθε πρόγραμμα περιήγησης και χωρίς στυλ μέσω CSS) ή τα προσαρμοσμένα στυλ σχολίων μας με επιπλέον HTML και CSS.
  • Μπορείτε να παρέχετε προσαρμοσμένα μηνύματα εγκυρότητας setCustomValidityσε JavaScript.

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

Προσαρμοσμένα στυλ

Για προσαρμοσμένα μηνύματα επικύρωσης φόρμας Bootstrap, θα πρέπει να προσθέσετε το novalidateχαρακτηριστικό boolean στο <form>. Αυτό απενεργοποιεί τις προεπιλεγμένες συμβουλές εργαλείων σχολίων του προγράμματος περιήγησης, αλλά εξακολουθεί να παρέχει πρόσβαση στα API επικύρωσης φορμών στο JavaScript. Προσπαθήστε να υποβάλετε την παρακάτω φόρμα. Η JavaScript μας θα παρεμποδίσει το κουμπί υποβολής και θα σας μεταδώσει σχόλια. Όταν προσπαθείτε να υποβάλετε, θα δείτε τα στυλ :invalidκαι που εφαρμόζονται στα στοιχεία ελέγχου της φόρμας σας.:valid

Τα προσαρμοσμένα στυλ σχολίων εφαρμόζουν προσαρμοσμένα χρώματα, περιγράμματα, στυλ εστίασης και εικονίδια φόντου για καλύτερη επικοινωνία των σχολίων. Τα εικονίδια φόντου για <select>s είναι διαθέσιμα μόνο με .custom-selectκαι όχι .form-control.

Φαίνεται καλό!
Φαίνεται καλό!
Καταχωρίστε μια έγκυρη πόλη.
Επιλέξτε μια έγκυρη κατάσταση.
Δώστε ένα έγκυρο zip.
Πρέπει να συμφωνήσετε πριν την υποβολή. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Προεπιλογές προγράμματος περιήγησης

Δεν σας ενδιαφέρει τα προσαρμοσμένα μηνύματα σχολίων επικύρωσης ή να γράψετε JavaScript για να αλλάξετε συμπεριφορές φόρμας; Όλα καλά, μπορείτε να χρησιμοποιήσετε τις προεπιλογές του προγράμματος περιήγησης. Δοκιμάστε να υποβάλετε την παρακάτω φόρμα. Ανάλογα με το πρόγραμμα περιήγησης και το λειτουργικό σύστημα που χρησιμοποιείτε, θα δείτε ένα ελαφρώς διαφορετικό στυλ σχολίων.

Ενώ αυτά τα στυλ σχολίων δεν μπορούν να διαμορφωθούν με CSS, μπορείτε ακόμα να προσαρμόσετε το κείμενο σχολίων μέσω JavaScript.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Πλευρά του διακομιστή

Συνιστούμε τη χρήση επικύρωσης από την πλευρά του πελάτη, αλλά σε περίπτωση που χρειάζεστε επικύρωση από την πλευρά του διακομιστή, μπορείτε να υποδείξετε μη έγκυρα και έγκυρα πεδία φόρμας με .is-invalidκαι .is-valid. Σημειώστε ότι .invalid-feedbackυποστηρίζεται και με αυτές τις κλάσεις.

Για μη έγκυρα πεδία, βεβαιωθείτε ότι τα μη έγκυρα σχόλια/μήνυμα σφάλματος συσχετίζονται με το σχετικό πεδίο φόρμας χρησιμοποιώντας το aria-describedby. Αυτό το χαρακτηριστικό επιτρέπει την αναφορά περισσότερων του ενός id, σε περίπτωση που το πεδίο δείχνει ήδη σε πρόσθετο κείμενο φόρμας.

Φαίνεται καλό!
Φαίνεται καλό!
Καταχωρίστε μια έγκυρη πόλη.
Επιλέξτε μια έγκυρη κατάσταση.
Δώστε ένα έγκυρο zip.
Πρέπει να συμφωνήσετε πριν την υποβολή. 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Υποστηριζόμενα στοιχεία

Τα στυλ επικύρωσης είναι διαθέσιμα για τα ακόλουθα στοιχεία ελέγχου φόρμας και στοιχεία:

  • <input>s και <textarea>s με.form-control
  • <select>s με .form-controlή.custom-select
  • .form-checkμικρό
  • .custom-checkboxs και .custom-radios
  • .custom-file
Εισαγάγετε ένα μήνυμα στην περιοχή κειμένου.
Παράδειγμα μη έγκυρου κειμένου σχολίων
Περισσότερο παράδειγμα μη έγκυρου κειμένου σχολίων
Παράδειγμα μη έγκυρης προσαρμοσμένης επιλογής σχολίων
Παράδειγμα μη έγκυρων σχολίων προσαρμοσμένου αρχείου
@
Παράδειγμα άκυρων σχολίων ομάδας εισαγωγής
Παράδειγμα άκυρων σχολίων ομάδας εισαγωγής
Παράδειγμα άκυρων σχολίων ομάδας εισαγωγής 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Συμβουλές εργαλείων

Εάν το επιτρέπει η διάταξη της φόρμας σας, μπορείτε να ανταλλάξετε τις .{valid|invalid}-feedbackκλάσεις με .{valid|invalid}-tooltipκλάσεις για να εμφανίσετε σχόλια επικύρωσης σε μια επεξήγηση εργαλείου με στυλ. Βεβαιωθείτε ότι έχετε μαζί του έναν γονέα position: relativeγια την τοποθέτηση της συμβουλής εργαλείου. Στο παρακάτω παράδειγμα, οι τάξεις στηλών μας το έχουν ήδη, αλλά το έργο σας μπορεί να απαιτεί μια εναλλακτική ρύθμιση.

Φαίνεται καλό!
Φαίνεται καλό!
Καταχωρίστε μια έγκυρη πόλη.
Επιλέξτε μια έγκυρη κατάσταση.
Δώστε ένα έγκυρο zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Προσαρμογή

Οι καταστάσεις επικύρωσης μπορούν να προσαρμοστούν μέσω Sass με τον $form-validation-statesχάρτη. Βρίσκεται στο _variables.scssαρχείο μας, αυτός ο χάρτης Sass βρίσκεται σε βρόχο για να δημιουργήσει τις προεπιλεγμένες καταστάσεις valid/ invalidκαταστάσεις επικύρωσης. Περιλαμβάνεται ένας ένθετος χάρτης για την προσαρμογή του χρώματος και του εικονιδίου κάθε κατάστασης. Αν και καμία άλλη κατάσταση δεν υποστηρίζεται από προγράμματα περιήγησης, όσοι χρησιμοποιούν προσαρμοσμένα στυλ μπορούν εύκολα να προσθέσουν σχόλια πιο περίπλοκης φόρμας.

Λάβετε υπόψη ότι δεν συνιστούμε να προσαρμόσετε αυτές τις τιμές χωρίς επίσης να τροποποιήσετε το form-validation-statemixin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Επικύρωση ομάδας εισόδου

Για να εντοπίσετε ποια στοιχεία χρειάζονται στρογγυλεμένες γωνίες μέσα σε μια ομάδα εισόδου με επικύρωση, μια ομάδα εισόδου απαιτεί μια πρόσθετη .has-validationκλάση.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Επιλέξτε ένα όνομα χρήστη.

Προσαρμοσμένες φόρμες

Για ακόμη μεγαλύτερη προσαρμογή και συνέπεια μεταξύ των προγραμμάτων περιήγησης, χρησιμοποιήστε τα εντελώς προσαρμοσμένα στοιχεία φόρμας για να αντικαταστήσετε τις προεπιλογές του προγράμματος περιήγησης. Είναι χτισμένα πάνω σε σημασιολογική και προσβάσιμη σήμανση, επομένως αποτελούν σταθερές αντικαταστάσεις για κάθε προεπιλεγμένο έλεγχο φόρμας.

Πλαίσια ελέγχου και ραδιόφωνα

Κάθε πλαίσιο ελέγχου και ραδιόφωνο <input>και <label>σύζευξη είναι τυλιγμένα σε ένα <div>για να δημιουργήσουμε το προσαρμοσμένο μας στοιχείο ελέγχου. Δομικά, αυτή είναι η ίδια προσέγγιση με την προεπιλογή μας .form-check.

Χρησιμοποιούμε τον επιλογέα αδερφού ( ~) για όλες τις <input>καταστάσεις μας—όπως—για :checkedνα διαμορφώσουμε σωστά την προσαρμοσμένη ένδειξη φόρμας. Όταν συνδυάζεται με την .custom-control-labelκλάση, μπορούμε επίσης να διαμορφώσουμε το κείμενο για κάθε στοιχείο με βάση την <input>κατάσταση '.

Κρύβουμε την προεπιλογή <input>με opacityκαι χρησιμοποιούμε το .custom-control-labelγια να δημιουργήσουμε μια νέα προσαρμοσμένη ένδειξη φόρμας στη θέση της με ::beforeκαι ::after. Δυστυχώς δεν μπορούμε να δημιουργήσουμε ένα προσαρμοσμένο μόνο από το <input>γιατί τα CSS contentδεν λειτουργούν σε αυτό το στοιχείο.

Στις επιλεγμένες καταστάσεις, χρησιμοποιούμε ενσωματωμένα εικονίδια SVG base64 από το Open Iconic . Αυτό μας παρέχει τον καλύτερο έλεγχο για το στυλ και την τοποθέτηση σε προγράμματα περιήγησης και συσκευές.

Πλαίσια ελέγχου

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Τα προσαρμοσμένα πλαίσια ελέγχου μπορούν επίσης να χρησιμοποιούν την :indeterminateψευδοκλάση όταν ορίζονται χειροκίνητα μέσω JavaScript (δεν υπάρχει διαθέσιμο χαρακτηριστικό HTML για τον καθορισμό του).

Εάν χρησιμοποιείτε jQuery, αρκεί κάτι σαν αυτό:

$('.your-checkbox').prop('indeterminate', true)

Ραδιόφωνα

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Στη γραμμή

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

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

Τα προσαρμοσμένα πλαίσια ελέγχου και τα ραδιόφωνα μπορούν επίσης να απενεργοποιηθούν. Προσθέστε το disabledχαρακτηριστικό boolean στο <input>και η προσαρμοσμένη ένδειξη και η περιγραφή της ετικέτας θα διαμορφωθούν αυτόματα.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Διακόπτες

Ένας διακόπτης έχει τη σήμανση ενός προσαρμοσμένου πλαισίου ελέγχου, αλλά χρησιμοποιεί την .custom-switchκλάση για να αποδώσει έναν διακόπτη εναλλαγής. Οι διακόπτες υποστηρίζουν επίσης το disabledχαρακτηριστικό.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Επιλογή μενού

Τα προσαρμοσμένα <select>μενού χρειάζονται μόνο μια προσαρμοσμένη κλάση, .custom-selectγια να ενεργοποιήσουν τα προσαρμοσμένα στυλ. Τα προσαρμοσμένα στυλ περιορίζονται στην <select>αρχική εμφάνιση του και δεν μπορούν να τροποποιήσουν τα <option>s λόγω περιορισμών του προγράμματος περιήγησης.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Μπορείτε επίσης να επιλέξετε από μικρές και μεγάλες προσαρμοσμένες επιλογές για να ταιριάζουν με τις εισαγωγές κειμένου παρόμοιου μεγέθους.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Το multipleχαρακτηριστικό υποστηρίζεται επίσης:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Όπως είναι το sizeχαρακτηριστικό:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Εύρος

Δημιουργήστε προσαρμοσμένα <input type="range">στοιχεία ελέγχου με .custom-range. Το κομμάτι (το φόντο) και ο αντίχειρας (η τιμή) έχουν και τα δύο στιλ ώστε να εμφανίζονται το ίδιο στα προγράμματα περιήγησης. Δεδομένου ότι μόνο ο IE και ο Firefox υποστηρίζουν το «γέμισμα» του ίχνους τους από τα αριστερά ή τα δεξιά του αντίχειρα ως μέσο για την οπτική ένδειξη της προόδου, προς το παρόν δεν το υποστηρίζουμε.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Οι είσοδοι εύρους έχουν σιωπηρές τιμές για minκαι max— 0και 100, αντίστοιχα. Μπορείτε να καθορίσετε νέες τιμές για αυτές που χρησιμοποιούν τα χαρακτηριστικά minκαι max.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

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

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Πρόγραμμα περιήγησης αρχείων

Η συνιστώμενη προσθήκη για την κίνηση της εισαγωγής προσαρμοσμένου αρχείου: bs-custom-file-input , αυτό χρησιμοποιούμε αυτήν τη στιγμή εδώ στα έγγραφά μας.

Η είσοδος του αρχείου είναι η πιο αξιοσημείωτη από τη δέσμη και απαιτεί επιπλέον JavaScript, εάν θέλετε να τα συνδέσετε με το λειτουργικό Choose file… και το επιλεγμένο κείμενο ονόματος αρχείου.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Κρύβουμε το προεπιλεγμένο αρχείο <input>μέσω opacityκαι αντ' αυτού το στυλ <label>. Το κουμπί δημιουργείται και τοποθετείται με ::after. Τέλος, δηλώνουμε ένα widthκαι heightτο <input>για σωστή απόσταση για το περιβάλλον περιεχόμενο.

Μετάφραση ή προσαρμογή των συμβολοσειρών με SCSS

Η :lang()ψευδοκλάση χρησιμοποιείται για να επιτρέπει τη μετάφραση του κειμένου «Αναζήτηση» σε άλλες γλώσσες. Αντικαταστήστε ή προσθέστε καταχωρήσεις στη $custom-file-textμεταβλητή Sass με τη σχετική ετικέτα γλώσσας και τοπικές συμβολοσειρές. Οι αγγλικές χορδές μπορούν να προσαρμοστούν με τον ίδιο τρόπο. Για παράδειγμα, ορίστε πώς μπορεί κανείς να προσθέσει μια μετάφραση στα Ισπανικά (ο κωδικός γλώσσας στα Ισπανικά είναι es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Ακολουθεί lang(es)δράση για την εισαγωγή προσαρμοσμένου αρχείου για μετάφραση στα Ισπανικά:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Θα χρειαστεί να ορίσετε σωστά τη γλώσσα του εγγράφου σας (ή του υποδέντρου αυτού) για να εμφανίζεται το σωστό κείμενο. Αυτό μπορεί να γίνει χρησιμοποιώντας το langχαρακτηριστικό στο <html>στοιχείο ή την Content-Languageκεφαλίδα HTTP , μεταξύ άλλων μεθόδων.

Μετάφραση ή προσαρμογή των συμβολοσειρών με HTML

Το Bootstrap παρέχει επίσης έναν τρόπο μετάφρασης του κειμένου "Αναζήτηση" σε HTML με το data-browseχαρακτηριστικό που μπορεί να προστεθεί στην προσαρμοσμένη ετικέτα εισαγωγής (παράδειγμα στα Ολλανδικά):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>