Source

Έντυπα

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

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

Τα στοιχεία ελέγχου φόρμας του 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" placeholder="Enter email">
    <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" placeholder="Password">
  </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" placeholder="Password">
    </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 τους . Τα πλαίσια ελέγχου είναι για την επιλογή μιας ή περισσότερων επιλογών σε μια λίστα, ενώ τα ραδιόφωνα είναι για την επιλογή μιας επιλογής από πολλές.

Υποστηρίζονται απενεργοποιημένα πλαίσια ελέγχου και ραδιόφωνα, αλλά για να παρέχετε έναν not-allowedδρομέα στον δείκτη του ποντικιού του γονέα <label>, θα πρέπει να προσθέσετε το disabledχαρακτηριστικό στο .form-check-input. Το χαρακτηριστικό απενεργοποιημένο θα εφαρμόσει ένα πιο ανοιχτό χρώμα για να υποδείξει την κατάσταση της εισόδου.

Τα πλαίσια ελέγχου και η χρήση ραδιοφώνου έχουν δημιουργηθεί για να υποστηρίζουν την επικύρωση φόρμας που βασίζεται σε 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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </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" placeholder="Email">
    </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" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 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>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <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>
    <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-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </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 και δεν εμποδίζει τους χρήστες πληκτρολογίου να μπορεί να εστιάσει ή να ενεργοποιήσει αυτούς τους συνδέσμους. Για να είστε ασφαλείς, χρησιμοποιήστε προσαρμοσμένη JavaScript για να απενεργοποιήσετε τέτοιους συνδέσμους.

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

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

Επικύρωση

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

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

Πως δουλεύει

Δείτε πώς λειτουργεί η επικύρωση φόρμας με το 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

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </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" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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υποστηρίζεται και με αυτές τις κλάσεις.

Φαίνεται καλό!
Φαίνεται καλό!
@
Επιλέξτε ένα όνομα χρήστη.
Καταχωρίστε μια έγκυρη πόλη.
Καταχωρίστε μια έγκυρη κατάσταση.
Δώστε ένα έγκυρο zip.
Πρέπει να συμφωνήσετε πριν την υποβολή. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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 is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        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>

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

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

Παράδειγμα μη έγκυρου κειμένου σχολίων
Περισσότερο παράδειγμα μη έγκυρου κειμένου σχολίων
Παράδειγμα μη έγκυρης προσαρμοσμένης επιλογής σχολίων
Παράδειγμα μη έγκυρων σχολίων προσαρμοσμένου αρχείου 
<form class="was-validated">
  <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="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</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">
    <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>
</form>

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

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

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </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" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide 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" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

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

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

Κάθε πλαίσιο ελέγχου και ραδιόφωνο είναι τυλιγμένα σε ένα <div>με έναν αδελφό <span>για να δημιουργήσουμε το προσαρμοσμένο μας στοιχείο ελέγχου και ένα <label>για το συνοδευτικό κείμενο. Δομικά, αυτή είναι η ίδια προσέγγιση με την προεπιλογή μας .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="customRadioInline1" 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="customRadioInline1" 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="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</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">

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

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

<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>για σωστή απόσταση για το περιβάλλον περιεχόμενο.

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

Η :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 , μεταξύ άλλων μεθόδων.