TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag Bootstrap 5 -formulär?

1

Formulär är en viktig och oundviklig del av en webbplats. Bootstrap 4 använder standard HTML5 -formelement för att lägga till olika element i ett formulär. I den här artikeln låt oss utforska hur man skapar olika former av former i Bootstrap 5. Kom ihåg att Bootstrap är ett frontend -ramverk. Det låter dig bara skapa färdiga komponenter med förkompilerad CSS och skript. Du bör hitta ett sätt att behandla formulärinmatningarna som tas emot på din server.

Handledning för Bootstrap 5 Forms

Denna handledning täcker följande ämnen:

  1. Bootstrap 5 formulärklasser
  2. Kök synkroniseringsform
  3. Inline formulär
  4. Använda formulärgrupp
  5. Formulär med rutnätlayout
  6. Storlek och lägg till hjälptext
  7. Andra varianter
  8. Formvalideringar

1 CSS -klasser för Bootstrap -formulär

Form är en större komponent jämfört med många andra komponenter som knapp, märken och varningar. Den innehåller följande grundläggande CSS -klasser:

CSS -klass Beskrivning Anmärkningar
.form-grupp Används för att gruppera formulärkontroller  
.form-kontroll Textinmatningar Det kan vara text, lösenord, datum, tid, etc.
.form-control-file Filuppladdning  
.form-kontroll Kryssruta och alternativknapp  
.form-check-input Inmatningselementklass  För kryssruta och alternativknapp
.form-check-label Textetikettklass För kryssruta och alternativknapp
.form-control-lg Större formelement  
.form-control-sm Mindre formelement  
.form-control-klartext Vanlig textinmatning Används för skrivskyddade inmatningselement

2 Kökssynkroniseringsform med olika element

Formulär kan innehålla olika typer av element som textinmatning, lösenord, enkel markering, flera val, textområde, filöverföring, kryssruta, alternativknappar och skicka -knapp. Varje element är grupperat inuti a

med klassen ".form-group". Du kan också använda

att gruppera liknande element som alternativknappar och kryssrutor tillsammans. Låt oss skapa en kökssynkroniseringsform med olika element för att förstå bättre.

<!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>

Resultatet kommer att se ut nedan i webbläsaren:

Hur skapar jag Bootstrap 5 -formulär?

Formelementen identifieras med siffror och motsvarande kod är markerad med kommentarsektionen för att förstå syftet. Ovanstående kökssynkroniseringsformulär har fullständig kod inklusive Bootstrap CSS och skript. I alla exemplen nedan har vi bara gett kodblocket för formulärkomponenten. Du kan ersätta kodblocket mellan start och slut på formuläret med följande koder för att skapa olika former av formulär.

3 Inline formulär

Om du har märkt i exemplet ovan är alla element inriktade under etiketten eller legenden. Du kan också göra elementen inriktade i linje med ".form-inline" -klassen enligt nedan:

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

Och resultatet kommer att visas som nedan med alla tre elementen inriktade horisontellt i en enda rad.

Hur skapar jag Bootstrap 5 -formulär?

4 Gruppera formulärelement med formulärgrupp

Du kan enkelt gruppera liknande element i ett formulär med hjälp av ".form-group" -klassen som nedan:

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

Grupperingen kommer att lägga till kantbotten som visas nedan. Du kommer inte att se några andra synliga ändringar med klassen ".form-group".

Hur skapar jag Bootstrap 5 -formulär?

Gruppera element i ett formulär

5 Form med Grid System

När du behöver olika kolumner och bredd för olika formelement använder du standardrutnätet för att justera elementen efter behov. Nedan är ett exempel på ett formulär med rutnätlayout:

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

Det ger följande resultat i webbläsaren:

Hur skapar jag Bootstrap 5 -formulär?

Bootstrap 4 -formulär med rutnätlayout

6 Storlek och lägg till hjälptext för fält

I exemplet ovan har vi använt ytterligare två klasser:

  • ".Form-control-lg" för att göra elementen större. Använd klassen ".form-control-sm" för att göra den mindre.
  • ".Form-text" -klassen används för att lägga till hjälptext i dämpad form med hjälp av ".text-dämpad" klass.

7 Andra variationer

Nedan följer några av de enkla sätten att anpassa Bootstrap 4 -formuläret:

  • Som standard har formelementen full bredd, vilket kan begränsas genom att placera den i en behållare eller använda ytterligare CSS.
  • Du kan också placera formuläret i rutnätsklasser för att styra formulärets storlek och lyhördhet.
  • Det är också möjligt att ha inaktiverade element med ".disabled" -klassen.

8 Formvalideringar

Den viktiga delen av att använda formulär är att validera de obligatoriska inmatningarna som anges av användaren. Det finns två sätt att validera inmatningarna – använd anpassat skript för validering eller lämna valideringsdelen till webbläsaren.

8.1. Validering med anpassat skript

Nedan finns koden för att skapa ett formulär med anpassat valideringsskript. Skriptet kontrollerar att alla obligatoriska formulärfält anges av användaren när du klickar på knappen Skicka.

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

Valideringen visar nedanstående resultat om användaren klickar på skicka -knappen utan att fylla i de obligatoriska fälten.

Hur skapar jag Bootstrap 5 -formulär?

8.2. Webbläsarvalidering

Du kan bara ta bort det anpassade skriptet i formulärkoden ovan så att webbläsaren kan stoppa formuläret. Standardvalideringen görs av alla moderna webbläsare som Chrome, Safari och Firefox.

Du kommer att se följande felmeddelande när användaren inte fyllde i det obligatoriska fältet och skickade in formuläret.

Hur skapar jag Bootstrap 5 -formulär?

Avslutar

Formulär är en viktig komponent på alla webbsidor för att samla in användarinmatningar. Bootstrap 4 gör det möjligt att skapa enkla till komplexa formulär för att visa olika inmatningsfält med gruppering. Men komplex validering och bearbetning av den insamlade data på serversidan behöver ett skriptspråk som PHP. Så du bör integrera formulären i PHP för att hämta och behandla användardata.


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer