Bootstrap 5 formulær

Stablede formulær

Alle <input> og <textarea> elementer med klassen .form-control får korrekt formularstil:

Eksempel

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">E-mail:</label>
    <input type="email" class="form-control" id="email" placeholder="Indtast e-mail-adresse" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Adgangskode：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Indtast adgangskode" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Husk mig
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Indsend</button>
</form>

Prøv det selv

Desuden skal du bemærke, at vi har tilføjet .form-label klassen for at sikre korrekt fyldning.

kontroller har forskellige mærker. De er sat til .form-check klassens containerelementer omgiver. Label indstiller .form-check-label klassen, mens kontroller og afkrydsningsfelter bruger .form-check-input。

Textarea

Eksempel

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

Prøv det selv

formularrække / gitter (in-line formular)

Hvis du ønsker at formularelementer vises parallelt, brug .row og .col：

Eksempel

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Indtast e-mail-adresse" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Indtast adgangskode" name="pswd">
    </div>
  </div>
</form>

Prøv det selv

Du vil blive Bootstrap-gitter Lær mere om kolonner og rækker i kapitlerne.

Formularkontrolstørrelser

Du kan bruge .form-control-lg eller .form-control-sm Ændre .form-control Størrelsen på input-kontrolelementer:

Eksempel

<input type="text" class="form-control form-control-lg" placeholder="Stor input-kontrol">
<input type="text" class="form-control" placeholder="Almindelig input-kontrol">
<input type="text" class="form-control form-control-sm" placeholder="Lille input-kontrol">

Prøv det selv

Deaktiveret og læsebeskyttet

Brug disabled og/eller readonly-attributter til at deaktivere inputfelter:

Eksempel

<input type="text" class="form-control" placeholder="Almindelig input-kontrol">
<input type="text" class="form-control" placeholder="Deaktiveret input-kontrol" disabled>
<input type="text" class="form-control" placeholder="Læsebeskyttet input-kontrol" readonly>

Prøv det selv

Ren tekstinput

Brug .form-control-plaintext Brug klassen til at indstille stilen på inputfelter uden kanter, men med passende marginer og indrykning:

Eksempel

<input type="text" class="form-control-plaintext" placeholder="Ren tekstinput">
<input type="text" class="form-control" placeholder="Almindelig input-kontrol">

Prøv det selv

Farvevælger

For at korrekt indstille type="color" input-stilen, brug .form-control-color Klasse:

Eksempel

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

Prøv det selv