Kuinka luoda Bootstrap 5 -lomakkeita?
Sisältö
Lomakkeet ovat tärkeä ja väistämätön osa mitä tahansa verkkosivustoa. Bootstrap 4 lisää vakiomuotoisia HTML5 -lomakeelementtejä lomakkeeseen. Tässä artikkelissa tarkastellaan, kuinka luoda erilaisia tyylejä lomakkeisiin Bootstrap 5. Muista, että Bootstrap on käyttöliittymä. Sen avulla voit luoda valmiita komponentteja vain esipakatuista CSS -tiedostoista ja komentosarjoista. Sinun pitäisi löytää tapa käsitellä palvelimellesi vastaanotetut lomaketulot.
Bootstrap 5 Forms -opetusohjelma
Tämä opetusohjelma kattaa seuraavat aiheet:
- Bootstrap 5 lomakkeita
- Keittiön synkronointilomake
- Upotetut lomakkeet
- Lomakeryhmän käyttäminen
- Lomake ruudukon asettelun avulla
- Ohjetekstin koon lisääminen ja lisääminen
- Muut muunnelmat
- Lomakkeen tarkistukset
1 Bootstrap -lomakkeen CSS -luokat
Lomake on suurempi osa verrattuna moniin muihin osiin, kuten painikkeisiin, merkkeihin ja hälytyksiin. Se sisältää seuraavat CSS -perusluokat:
| CSS -luokka | Kuvaus | Huomautukset |
| .form-ryhmä | Käytetään lomakkeen ohjausobjektien ryhmittelyyn | |
| .muoto-ohjaus | Tekstinsyötteet | Se voi olla teksti, salasana, päivämäärä, aika jne. |
| .form-control-tiedosto | Tiedoston lataus | |
| .muoto-tarkistus | Valintaruutu ja valintanappi | |
| .form-check-input | Syöttöelementtiluokka | Valintaruutu ja valintanappi |
| .form-check-label | Tekstimerkkiluokka | Valintaruutu ja valintanappi |
| .form-control-lg | Suuremmat muotoelementit | |
| .form-control-sm | Pienemmät muotoelementit | |
| .form-control-selkeä teksti | Pelkkä tekstinsyöttö | Käytetään vain luku -syöttöelementteihin |
2 Keittiön synkronointilomake käyttämällä erilaisia elementtejä
Lomakkeet voivat sisältää erityyppisiä elementtejä, kuten tekstinsyöttöä, salasanaa, yksittäistä valintaa, useita valintoja, tekstialue, tiedoston lataaminen, valintaruutu, valintanapit ja lähetyspainike. Jokainen elementti on ryhmitelty a: n sisään
".form-group" -luokalla. Voit myös käyttää
ryhmitellä samankaltaisia elementtejä, kuten valintanapit ja valintaruudut. Luomme keittiön synkronointilomakkeen eri elementeillä ymmärtääksemme paremmin.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Form -->
<form>
<!-- 1. Text Input -->
<div class="form-group">
<label for="username">Enter Username</label>
<input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username">
<small id="Username" class="form-text text-muted">Enter username to login.</small>
</div>
<!-- 2. Password -->
<div class="form-group">
<label for="password">Enter Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<!-- 3. Single Select -->
<div class="form-group">
<label for="singleselect">Single Select from the Dropdown</label>
<select class="form-control" id="singleselect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<!-- 4. Multiple Select -->
<div class="form-group">
<label for="multipleselect">Multiple Select from List</label>
<select multiple class="form-control" id="multipleselect">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<!-- 5. Textarea -->
<div class="form-group">
<label for="textarea">Textarea Input</label>
<textarea class="form-control" id="textarea" rows="5"></textarea>
</div>
<!-- 6. File Upload -->
<div class="form-group">
<label for="fileupload">Upload File</label>
<input type="file" class="form-control-file" id="fileupload" aria-describedby="fileupload">
<small id="fileupload" class="form-text text-muted">Choose the file from your computer and the browse screen depends on your operating system.</small>
</div>
<!-- 7. Radio Buttons -->
<fieldset class="form-group">
<legend>Radio Buttons</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio" id="radio1" value="Option 1" checked>
Option 1</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio" id="radio2" value="Option 2">
Option 2 </label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="radio" id="radio3" value="Option 3" disabled>
Option 3</label>
</div>
</fieldset>
<!-- 8. Checkbox -->
<fieldset class="form-group">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
This is a checkbox 1.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
This is a checkbox 2.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
This is a checkbox 3.
</label>
</div>
</fieldset>
<!-- 9. Submit Button -->
<button type="submit" class="btn btn-success">Submit</button>
</form>
<!-- End of Form -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>Tulos näyttää seuraavalta selaimessa:
Lomakkeen elementit on merkitty numeroilla ja vastaava koodi on merkitty kommenttiosalla ymmärtämisen vuoksi. Yllä olevassa keittiön synkronointilomakkeessa on täydellinen koodi, mukaan lukien Bootstrap CSS ja komentosarjat. Kaikissa alla olevissa esimerkeissä olemme antaneet vain lomakekomponentin koodilohkon. Voit korvata lomakkeen alun ja lopun välisen koodilohkon seuraavilla koodeilla luodaksesi erilaisia lomaketyylejä.
3 Lomakkeet
Jos olet huomannut yllä olevassa esimerkissä, kaikki elementit on kohdistettu tarran tai selitteen alle. Voit myös kohdistaa elementit riviin käyttämällä ".form-inline" -luokkaa, kuten alla:
<form class="form-inline">
<label class="sr-only" for="inlineforminput">Username</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">@</div>
<input type="text" class="form-control" id="inlineforminput" placeholder="Username">
</div>
<label class="sr-only" for="inlineform">Password</label>
<input type="password" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineform" placeholder="Enter Password">
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">Remember
</label>
</div>
<button type="submit" class="btn btn-info">Login</button>
</form>Ja tulos näytetään kuten alla, kun kaikki kolme elementtiä on kohdistettu vaakasuoraan yhdelle riville.
4 Lomakkeen elementtien ryhmittely lomakeryhmän kanssa
Voit helposti ryhmitellä samankaltaisia elementtejä lomakkeeseen käyttämällä ".form-group" -luokkaa, kuten alla:
<form>
<div class="form-group">
<label class="form-control-label" for="formGroup1">First Name</label>
<input type="text" class="form-control" id="formGroup1" placeholder="First Name">
</div>
<div class="form-group">
<label class="form-control-label" for="formGroup2">Last Name</label>
<input type="text" class="form-control" id="formGroup2" placeholder="Last Name">
</div>
</form>Ryhmittely lisää reunan alaosan alla esitetyllä tavalla. Et näe muita näkyviä muutoksia ".form-group" -luokassa.
Elementtien ryhmittely lomakkeeseen
5 Lomake ruudukkojärjestelmällä
Kun tarvitset eri sarakkeita ja leveys eri muodossa elementtien sitten käyttää oletuksena verkkoon yhdenmukaistaa elementtejä tarpeen. Alla on esimerkki lomakkeesta, jossa on ruudukon asettelu:
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="Email" class="col-form-label">Email</label>
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="Password" class="col-form-label">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-form-label">Address</label>
<input type="text" class="form-control" id="Address" placeholder="Address First Line">
</div>
<div class="form-group">
<label for="Address1" class="col-form-label">Address 2</label>
<input type="text" class="form-control" id="Address1" placeholder="Address Second Line">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="City" class="col-form-label">City</label>
<input type="text" class="form-control" id="City" placeholder="City">
</div>
<div class="form-group col-md-4">
<label for="State" class="col-form-label">State</label>
<select id="State" class="form-control">Choose</select>
</div>
<div class="form-group col-md-2">
<label for="Zip" class="col-form-label">Zip</label>
<input type="text" class="form-control" id="Zip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Se tuottaa seuraavan tuloksen selaimessa:
Bootstrap 4 -muoto ruudukon asettelun avulla
6 Kenttien ohjetekstin koon määrittäminen ja lisääminen
Yllä olevassa esimerkissä olemme käyttäneet vielä kahta lisäluokkaa:
- ".Form-control-lg" suurentaa elementtejä. Käytä pienempää luokkaa .form-control-sm.
- Luokkaa ".form-text" käytetään ohjetekstin lisäämiseen mykistetyssä muodossa luokan .text-mute avulla.
7 Muut muunnelmat
Alla on muutamia yksinkertaisia tapoja muokata Bootstrap 4 -lomaketta:
- Lomakkeen elementit ovat oletuksena koko leveydellä, jota voidaan rajoittaa sijoittamalla se säiliöön tai käyttämällä ylimääräistä CSS: ää.
- Voit myös sijoittaa lomakkeet ruudukoluokkien sisälle hallitaksesi lomakkeen kokoa ja reagointikykyä.
- On myös mahdollista poistaa käytöstä elementtejä käyttämällä .disabled -luokkaa.
8 Lomakkeen vahvistus
Tärkeä osa lomakkeiden käyttöä on vahvistaa käyttäjän syöttämät pakolliset syötteet. Syötteet voidaan vahvistaa kahdella tavalla – käytä mukautettua komentosarjaa validointiin tai jätä vahvistusosa selaimen tehtäväksi.
8.1. Vahvistus mukautetulla komentosarjalla
Alla on koodi lomakkeen luomiseen mukautetulla validointiskriptillä. Ohjelma tarkistaa, että käyttäjä on syöttänyt kaikki vaaditut lomakekentät, kun Lähetä -painiketta napsautetaan.
<form class="container" id="form-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validation1">First name</label>
<input type="text" class="form-control" id="validation1" placeholder="First name" value="Jhon" required>
</div>
<div class="col-md-6 mb-3">
<label for="validation2">Last name</label>
<input type="text" class="form-control" id="validation2" placeholder="Last name" value="Doe" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validation3">City</label>
<input type="text" class="form-control" id="validation3" placeholder="City" required>
<div class="invalid-feedback">
Enter city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validation4">State</label>
<input type="text" class="form-control" id="validation4" placeholder="State" required>
<div class="invalid-feedback">
Enter state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validation5">Zip</label>
<input type="text" class="form-control" id="validation5" placeholder="Zip" required>
<div class="invalid-feedback">
Enter zip code.
</div>
</div>
</div>
<button class="btn btn-secondary btn-md" type="submit">Submit</button>
</form>
<script>
// Custom JavaScript for Validation
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("form-validation");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
</script>Vahvistus näyttää alla olevan tuloksen, jos käyttäjä napsauttaa Lähetä -painiketta täyttämättä pakollisia kenttiä.
8.2. Selaimen validointi
Voit vain poistaa mukautetun komentosarjan yllä olevasta lomakekoodista, jotta selain voi lopettaa lomakkeen lähettämisen. Oletusvalidoinnin suorittavat kaikki nykyaikaiset selaimet, kuten Chrome, Safari ja Firefox.
Näet seuraavan virheilmoituksen, kun käyttäjä ei täyttänyt pakollista kenttää ja lähettänyt lomakkeen.
Käärimistä
Lomakkeet ovat tärkeä osa mitä tahansa verkkosivua käyttäjien syötteiden keräämiseen. Bootstrap 4 mahdollistaa yksinkertaisten ja monimutkaisten lomakkeiden luomisen eri syöttökenttien näyttämiseksi ryhmittelemällä. Mutta kerättyjen tietojen monimutkainen validointi ja käsittely palvelinpuolella vaatii skriptikielen, kuten PHP. Sinun on siis integroitava lomakkeet PHP: hen, jotta voit hakea ja käsitellä käyttäjätietoja.
Opi Bootstrap 5 (hakemisto )