Bootstrap 5 Formulier

Ge堆叠表单

Alle <input> en <textarea> elementen met de klasse .form-control krijgen de juiste formulierstijl:

Voorbeeld

<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="Voer uw e-mailadres in" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Wachtwoord：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Voer uw wachtwoord in" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Onthoud mij
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Indienen</button>
</form>

Probeer het zelf

Daarnaast moet u opmerken dat we voor elk label-element .form-label klasse om de juiste vulding te waarborgen.

selectievakjes hebben verschillende symbolen. Ze zijn ingesteld op .form-check klasse voor de container-elementen. De label instelling .form-check-label klasse, terwijl de selectievakjes en keuzerondjes worden omgeven door .form-check-input。

Textarea

Voorbeeld

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

Probeer het zelf

Formulierrij / Raster (inline formulier)

Als u de formulierelementen naast elkaar wilt weergeven, gebruik dan .row en .col：

Voorbeeld

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Voer uw e-mailadres in" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Voer uw wachtwoord in" name="pswd">
    </div>
  </div>
</form>

Probeer het zelf

U zult Bootstrap Raster Meer leren over kolommen en rijen in het hoofdstuk.

Formuliercontrolegrootte

U kunt .form-control-lg of .form-control-sm Wijzigen .form-control Grootte van invoercontrole:

Voorbeeld

<input type="text" class="form-control form-control-lg" placeholder="Grote invoercontrole">
<input type="text" class="form-control" placeholder="Algemene invoercontrole">
<input type="text" class="form-control form-control-sm" placeholder="Kleine invoercontrole">

Probeer het zelf

Uitschakelen en alleen leesbaar

Gebruik de disabled en/or readonly eigenschappen om invoervelden uit te schakelen:

Voorbeeld

<input type="text" class="form-control" placeholder="Algemene invoercontrole">
<input type="text" class="form-control" placeholder="Uitgeschakelde invoercontrole" disabled>
<input type="text" class="form-control" placeholder="Alleen leesbare invoercontrole" readonly>

Probeer het zelf

Puur tekst invoer

Gebruik .form-control-plaintext Gebruik een class om de stijl van de invoervelden zonder randen in te stellen, maar behoudt de juiste marges en inkepingen:

Voorbeeld

<input type="text" class="form-control-plaintext" placeholder="Puur tekst invoer">
<input type="text" class="form-control" placeholder="Algemene invoercontrole">

Probeer het zelf

Kleurenwiel

Gebruik een kleurenwiel om de stijl van de invoervelden met type="color" correct in te stellen: .form-control-color Class:

Voorbeeld

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

Probeer het zelf