TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare moduli Bootstrap 5?

2

I moduli sono una parte importante e inevitabile di qualsiasi sito web. Bootstrap 4 utilizza gli elementi del modulo HTML5 standard per aggiungere varietà di elementi all’interno di un modulo. In questo articolo esploriamo come creare diversi stili di moduli in Bootstrap 5. Ricorda, Bootstrap è un framework frontend. Ti consente solo di creare componenti già pronti con CSS e script precompilati. Dovresti trovare un modo per elaborare gli input del modulo ricevuti sul tuo server.

Tutorial sui 5 moduli Bootstrap

Questo tutorial copre i seguenti argomenti:

  1. Bootstrap 5 classi di moduli
  2. Modulo di sincronizzazione della cucina
  3. Moduli in linea
  4. Utilizzo del gruppo di moduli
  5. Modulo utilizzando il layout della griglia
  6. Dimensionamento e aggiunta di testo di aiuto
  7. Altre varianti
  8. Convalide del modulo

1 classi CSS del modulo Bootstrap

Il modulo è un componente più grande rispetto a molti altri componenti come pulsanti, badge e avvisi. Contiene le seguenti classi CSS di base:

Classe CSS Descrizione Osservazioni
.form-group Utilizzato per raggruppare i controlli dei moduli  
.form-control Inserimento di testo Può essere un testo, una password, una data, un’ora, ecc.
.form-control-file Upload di file  
.form-check Casella di controllo e pulsante di opzione  
.form-check-input Classe elemento di input  Per la casella di controllo e il pulsante di opzione
.form-check-label Classe etichetta di testo Per la casella di controllo e il pulsante di opzione
.form-control-lg Elementi di forma più grandi  
.form-control-sm Elementi di forma più piccoli  
.form-control-testo in chiaro Inserimento di testo normale Utilizzato per elementi di input di sola lettura

2 Modulo di sincronizzazione della cucina utilizzando vari elementi

I moduli possono contenere diversi tipi di elementi come input di testo, password, selezione singola, selezione multipla, area di testo, caricamento file, casella di controllo, pulsanti di opzione e pulsante di invio. Ogni elemento è raggruppato all’interno di a

con la classe ".form-group". Puoi anche usare

per raggruppare elementi simili come pulsanti di opzione e caselle di controllo. Creiamo un modulo di sincronizzazione della cucina con diversi elementi per capire meglio.

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

Il risultato apparirà come di seguito sul browser:

Come creare moduli Bootstrap 5?

Gli elementi del modulo sono identificati con numeri e il codice corrispondente è contrassegnato con la sezione dei commenti a scopo di comprensione. Il modulo di sincronizzazione della cucina sopra ha il codice completo, inclusi Bootstrap CSS e script. In tutti gli esempi seguenti, abbiamo fornito solo il blocco di codice per il componente del modulo. È possibile sostituire il blocco di codice tra l’inizio e la fine del modulo con i seguenti codici per creare diversi stili di moduli.

3 moduli in linea

Se hai notato nell’esempio sopra, tutti gli elementi sono allineati sotto l’etichetta o la legenda. Puoi anche allineare gli elementi in linea usando la classe ".form-inline" come di seguito:

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

E il risultato verrà mostrato come sotto con tutti e tre gli elementi allineati orizzontalmente in una singola riga.

Come creare moduli Bootstrap 5?

4 Raggruppamento di elementi del modulo con il gruppo del modulo

Puoi facilmente raggruppare elementi simili all’interno di un modulo usando la classe ".form-group" come di seguito:

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

Il raggruppamento aggiungerà il bordo inferiore come mostrato di seguito, non vedrai altre modifiche visibili con la classe ".form-group".

Come creare moduli Bootstrap 5?

Raggruppamento di elementi in un modulo

5 Modulo con sistema a griglia

Quando hai bisogno di colonne e larghezze diverse per diversi elementi del modulo, usa il sistema di griglia predefinito per allineare gli elementi secondo necessità. Di seguito è riportato un esempio di form con layout a griglia:

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

Produrrà il seguente risultato sul browser:

Come creare moduli Bootstrap 5?

Modulo Bootstrap 4 con layout a griglia

6 Ridimensionamento e aggiunta di testo di aiuto per i campi

Nell’esempio sopra, abbiamo usato altre due classi aggiuntive:

  • “.form-control-lg" per ingrandire gli elementi. Usa la classe ".form-control-sm" per rimpicciolirlo.
  • La classe ".form-text" viene utilizzata per aggiungere testo di aiuto in forma muta con l’aiuto della classe ".text-muted".

7 Altre varianti

Di seguito sono riportati alcuni dei semplici modi per personalizzare il modulo Bootstrap 4:

  • Per impostazione predefinita, gli elementi del modulo occupano l’intera larghezza che può essere limitata inserendoli all’interno di un contenitore o utilizzando CSS aggiuntivi.
  • Inoltre è possibile posizionare i moduli all’interno delle classi della griglia per controllare le dimensioni e la reattività del modulo.
  • È anche possibile avere elementi disabilitati utilizzando la classe “.disabled”.

8 Convalide del modulo

La parte importante dell’utilizzo dei moduli è convalidare gli input obbligatori inseriti dall’utente. Esistono due modi per convalidare gli input: utilizzare uno script personalizzato per la convalida o lasciare la parte di convalida al browser.

8.1. Convalida con script personalizzato

Di seguito è riportato il codice per la creazione di un modulo con script di convalida personalizzato. Lo script controllerà che tutti i campi del modulo richiesti siano stati inseriti dall’utente quando si fa clic sul pulsante di invio.

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

La convalida mostrerà il risultato seguente se l’utente fa clic sul pulsante di invio senza compilare i campi obbligatori.

Come creare moduli Bootstrap 5?

8.2. Convalida del browser

Puoi semplicemente rimuovere lo script personalizzato nel codice del modulo sopra per consentire al browser di interrompere l’invio del modulo. La convalida predefinita viene eseguita da tutti i browser moderni come Chrome, Safari e Firefox.

Vedrai il seguente messaggio di errore, quando l’utente non ha compilato il campo richiesto e non ha inviato il modulo.

Come creare moduli Bootstrap 5?

Avvolgendo

I moduli sono componenti importanti in qualsiasi pagina Web per la raccolta di input dell’utente. Bootstrap 4 consente di creare moduli da semplici a complessi per mostrare diversi campi di input con raggruppamento. Ma la convalida e l’elaborazione complesse dei dati raccolti lato server richiedono un linguaggio di scripting come PHP. Quindi, dovresti integrare i moduli in PHP per ottenere ed elaborare i dati dell’utente.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More