Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
Check
in English

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

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

Σε αυτήν την σελίδα

Παράδειγμα

html 
<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

Κόλλα

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

html 
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

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

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

html 
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

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

Προσθέστε το readonlyχαρακτηριστικό boolean σε μια είσοδο για να αποτρέψετε την τροποποίηση της τιμής της εισόδου. readonlyΟι είσοδοι μπορούν ακόμα να εστιαστούν και να επιλεγούν, ενώ οι disabledείσοδοι όχι.

html 
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>

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

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

html 
  <div class="mb-3 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="mb-3 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>
html 
<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
  </div>
</form>

Εισαγωγή αρχείου

html 
<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Χρώμα

Ρυθμίστε το type="color"και προσθέστε .form-control-colorστο <input>. Χρησιμοποιούμε την κλάση τροποποιητή για να ορίσουμε σταθερά heights και να παρακάμψουμε ορισμένες ασυνέπειες μεταξύ των προγραμμάτων περιήγησης.

html 
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

Λίστες δεδομένων

Οι λίστες δεδομένων σάς επιτρέπουν να δημιουργήσετε μια ομάδα <option>s στα οποία μπορείτε να έχετε πρόσβαση (και να συμπληρωθεί αυτόματα) μέσα από ένα <input>. Αυτά είναι παρόμοια με <select>τα στοιχεία, αλλά συνοδεύονται από περισσότερους περιορισμούς και διαφορές στο στυλ του μενού. Ενώ τα περισσότερα προγράμματα περιήγησης και λειτουργικά συστήματα περιλαμβάνουν κάποια υποστήριξη για <datalist>στοιχεία, το στυλ τους είναι ασυνεπές στην καλύτερη περίπτωση.

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

html 
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

Sass

Μεταβλητές

$input-*είναι κοινόχρηστα στα περισσότερα από τα στοιχεία ελέγχου φόρμας (και όχι στα κουμπιά).

$input-padding-y:                       $input-btn-padding-y;
$input-padding-x:                       $input-btn-padding-x;
$input-font-family:                     $input-btn-font-family;
$input-font-size:                       $input-btn-font-size;
$input-font-weight:                     $font-weight-base;
$input-line-height:                     $input-btn-line-height;

$input-padding-y-sm:                    $input-btn-padding-y-sm;
$input-padding-x-sm:                    $input-btn-padding-x-sm;
$input-font-size-sm:                    $input-btn-font-size-sm;

$input-padding-y-lg:                    $input-btn-padding-y-lg;
$input-padding-x-lg:                    $input-btn-padding-x-lg;
$input-font-size-lg:                    $input-btn-font-size-lg;

$input-bg:                              $body-bg;
$input-disabled-color:                  null;
$input-disabled-bg:                     $gray-200;
$input-disabled-border-color:           null;

$input-color:                           $body-color;
$input-border-color:                    $gray-400;
$input-border-width:                    $input-btn-border-width;
$input-box-shadow:                      $box-shadow-inset;

$input-border-radius:                   $border-radius;
$input-border-radius-sm:                $border-radius-sm;
$input-border-radius-lg:                $border-radius-lg;

$input-focus-bg:                        $input-bg;
$input-focus-border-color:              tint-color($component-active-bg, 50%);
$input-focus-color:                     $input-color;
$input-focus-width:                     $input-btn-focus-width;
$input-focus-box-shadow:                $input-btn-focus-box-shadow;

$input-placeholder-color:               $gray-600;
$input-plaintext-color:                 $body-color;

$input-height-border:                   $input-border-width * 2;

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2);
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y);
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5);

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false));

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$form-color-width:                      3rem;

$form-label-*και $form-text-*είναι για το <label>s και το .form-textεξάρτημά μας.

$form-label-margin-bottom:              .5rem;
$form-label-font-size:                  null;
$form-label-font-style:                 null;
$form-label-font-weight:                null;
$form-label-color:                      null;

$form-text-margin-top:                  .25rem;
$form-text-font-size:                   $small-font-size;
$form-text-font-style:                  null;
$form-text-font-weight:                 null;
$form-text-color:                       $text-muted;

$form-file-*είναι για εισαγωγή αρχείου.

$form-file-button-color:          $input-color;
$form-file-button-bg:             $input-group-addon-bg;
$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%);