Bootstrap 5 formulär

Staplad formulär

Alla <input> och <textarea> element som har .form-control klass får korrekt formulärstil:

Exempel

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">E-post:</label>
    <input type="email" class="form-control" id="email" placeholder="Vänligen ange e-postadress" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Lösenord：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Vänligen ange lösenord" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Kom ihåg mig
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Skicka in</button>
</form>

Prova själv

Observera också att vi har lagt till .form-label klassen för att säkerställa korrekt fyllning.

kryssrutor har olika märken. De är inställda .form-check klassens container-element omgiven. .form-check-label klassen, medan kryssrutor och radioknappar används .form-check-input。

Textarea

Exempel

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

Prova själv

formularrad / grid (inlines form)

Om du vill visa formulärelement i rad, använd .row och .col：

Exempel

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Vänligen ange e-postadress" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Vänligen ange lösenord" name="pswd">
    </div>
  </div>
</form>

Prova själv

Du kommer att Bootstrap-grid Mer om kolumner och rader lär du dig i detta kapitel.

Formularkontrollstorlek

Du kan använda .form-control-lg eller .form-control-sm Ändra .form-control Storlek på inputkontrollen:

Exempel

<input type="text" class="form-control form-control-lg" placeholder="Stor inputkontroll">
<input type="text" class="form-control" placeholder="Vanlig inputkontroll">
<input type="text" class="form-control form-control-sm" placeholder="Liten inputkontroll">

Prova själv

Inaktivera och läsbar

Använd disabled och/eller readonly-attribut för att inaktivera inputfält:

Exempel

<input type="text" class="form-control" placeholder="Vanlig inputkontroll">
<input type="text" class="form-control" placeholder="Inaktiverad inputkontroll" disabled>
<input type="text" class="form-control" placeholder="Läsbar inputkontroll" readonly>

Prova själv

ren textinput

Använd .form-control-plaintext Använd klassen för att ställa in stilen för inputfält utan ram, men behåll lämplig marginal och inramning:

Exempel

<input type="text" class="form-control-plaintext" placeholder="Ren textinput">
<input type="text" class="form-control" placeholder="Vanlig inputkontroll">

Prova själv

färgväljare

För att korrekt ställa in stilen för input med type="color", använd .form-control-color Klass:

Exempel

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

Prova själv