TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 -lomakkeita?

15

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:

  1. Bootstrap 5 lomakkeita
  2. Keittiön synkronointilomake
  3. Upotetut lomakkeet
  4. Lomakeryhmän käyttäminen
  5. Lomake ruudukon asettelun avulla
  6. Ohjetekstin koon lisääminen ja lisääminen
  7. Muut muunnelmat
  8. 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:

Kuinka luoda Bootstrap 5 -lomakkeita?

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.

Kuinka luoda Bootstrap 5 -lomakkeita?

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.

Kuinka luoda Bootstrap 5 -lomakkeita?

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:

Kuinka luoda Bootstrap 5 -lomakkeita?

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ä.

Kuinka luoda Bootstrap 5 -lomakkeita?

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.

Kuinka luoda Bootstrap 5 -lomakkeita?

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 )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja