Bootstrap 5 lomakkeet

Rivitetty lomake

Kaikki <input> ja <textarea> -elementit, joissa on .form-control-luokka, saavat oikeanlaisen lomakkeen tyylit:

Esimerkki

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">Sähköposti：</label>
    <input type="email" class="form-control" id="email" placeholder="Anna sähköpostiosoite" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Salasana：</label>
    <input type="password" class="form-control" id="pwd" placeholder="Syötä salasana" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Muista minä
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Lähetä</button>
</form>

Kokeile itse

Lisäksi kiinnitä huomiota, että olemme lisänneet jokaiselle label-elementille .form-label luokkaan varmistaakseen oikean täyttämisen.

valintapainikkeilla on erilaiset merkinnät. Ne on asetettu .form-check luokan sisältämiä elementtejä. Label-asetuksissa .form-check-label luokkaa, ja valintapainikkeet ja valintapainikkeet käyttävät .form-check-input。

Tekstialue

Esimerkki

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

Kokeile itse

muotoilurivi / ruudukko (rivimuotoilu)

Jos haluat muotoilutekstien näkyvän rinnakkain, käytä .row ja .col：

Esimerkki

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="Syötä sähköpostiosoite" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="Syötä salasana" name="pswd">
    </div>
  </div>
</form>

Kokeile itse

Sinä pääset Bootstrap-rakennus Lisätietoja taulukoista ja riveistä tässä luvussa.

lomakkeen valitsinkooot

Voit käyttää .form-control-lg tai .form-control-sm Muuta .form-control Syötevalitsimen koko:

Esimerkki

<input type="text" class="form-control form-control-lg" placeholder="Suuri syötevalitsin">
<input type="text" class="form-control" placeholder="Tavallinen syötevalitsin">
<input type="text" class="form-control form-control-sm" placeholder="Pieni syötevalitsin">

Kokeile itse

Poistettu käytöstä ja lukkoontuotettu

Käytä disabled ja/tai readonly-ominaisuuksia poistaa syötekentät käytöstä:

Esimerkki

<input type="text" class="form-control" placeholder="Tavallinen syötevalitsin">
<input type="text" class="form-control" placeholder="Poistettu käytöstä syötevalitsin" disabled>
<input type="text" class="form-control" placeholder="Lukkoontuotettu syötevalitsin" readonly>

Kokeile itse

puhtaita tekstejä

Käytä .form-control-plaintext Luo tyylejä ilman reunuksia syötteen kentille, mutta säilytä sopivat ulkoiset ja sisäiset marginaalit:

Esimerkki

<input type="text" class="form-control-plaintext" placeholder="Puhtaiden tekstit">
<input type="text" class="form-control" placeholder="Tavallinen syötevalitsin">

Kokeile itse

värimallinvalitsinta

Jos haluat asettaa oikein type="color" -syötteen tyylin, käytä .form-control-color Luokka:

Esimerkki

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

Kokeile itse