Formularze Bootstrap 5

Skałkowane formularze

Wszystkie elementy <input> i <textarea> z klasą .form-control otrzymują poprawny styl formularza:

Przykład

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Adres e-mail：</label>
    <input type="email" class="form-control" id="email" placeholder="Proszę wprowadzić adres e-mail" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Hasło：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Proszę, wprowadź hasło" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Zapamiętaj mnie
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Wyślij</button>
</form>

Spróbuj sam

Proszę, zauważ również, że dla każdego elementu label dodaliśmy .form-label klasą, aby zapewnić odpowiednie wypełnienie.

pola wyboru mają różne znaczniki. Są one oznaczone .form-check klasy kontenera. Ustawienia label .form-check-label klasy, podczas gdy pola wyboru i przyciski radiowe są otoczone przez elementy .form-check-input。

Textarea

Przykład

<label for="comment">Komentarz：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

Spróbuj sam

wiersz formularza / siatka (formularz wierszowy)

Jeśli chcesz, aby elementy formularza były wyświetlane równolegle, użyj .row i .col：

Przykład

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Proszę, wprowadź adres e-mail" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Proszę, wprowadź hasło" name="pswd">
    </div>
  </div>
</form>

Spróbuj sam

Będziesz musiał Siatka Bootstrap Dowiedzieć się więcej o kolumnach i wierszach w rozdziale.

Rozmiar formularza

Możesz .form-control-lg lub .form-control-sm Zmień .form-control Rozmiar kontrolki wejściowej:

Przykład

<input type="text" class="form-control form-control-lg" placeholder="Duży kontrolka wejścia">
<input type="text" class="form-control" placeholder="Zwykły kontrolka wejścia">
<input type="text" class="form-control form-control-sm" placeholder="Mały kontrolka wejścia">

Spróbuj sam

Wyłączony i tylko do odczytu

Użyj atrybutów disabled i/lub readonly, aby wyłączyć pole wejściowe:

Przykład

<input type="text" class="form-control" placeholder="Zwykły kontrolka wejścia">
<input type="text" class="form-control" placeholder="Wyłączony kontrolka wejścia" disabled>
<input type="text" class="form-control" placeholder="Tylko do odczytu kontrolka wejścia" readonly>

Spróbuj sam

pustego tekstu wejścia

Użyj .form-control-plaintext Użyj klasy, aby ustawić styl pól wejściowych bez ramki, ale z odpowiednimi marginesami zewnętrznymi i wewnętrznymi:

Przykład

<input type="text" class="form-control-plaintext" placeholder="Pusty tekst wejścia">
<input type="text" class="form-control" placeholder="Zwykły kontrolka wejścia">

Spróbuj sam

wybieraka kolorów

Aby poprawnie ustawić styl wejścia type="color", użyj .form-control-color Klasa:

Przykład

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

Spróbuj sam