Elementi e stili per la creazione di form accessibili e responsivi.
Nella visualizzazione predefinita di un form gli elementi sono distribuiti verticalmente, ma è possibile utilizzare classi aggiuntive per variare questo tipo di layout.
Bootstrap Italia applica automaticamente a tutti i form display: block e width: 100%.
Organizzazione dei campi
Per raggruppare correttamente gli elementi di un modulo form è bene utilizzare la classe .form-group per ogni singolo blocco, in questo modo l’elemento input, l’etichetta, il testo di aiuto opzionale e la messaggistica di validazione otterranno lo stile grafico e le funzionalità per loro predisposte. Si può usare con <fieldset>, <div> o qualsiasi altro elemento.
Gli elementi dei campi devono avere la classe .form-control applicata.
Dimensionamento delle colonne
Strutture più complesse possono essere costruite usando il sistema a griglia, da utilizzare per layout che richiedono più colonne, larghezze diverse e opzioni di allineamento aggiuntive. La classe .row ne assicura una corretta spaziatura.
Si può scegliere di dare una dimensione ad una colonna, ad esempio dandogli una classe .col-md-6 per ottenere una certo design dal breakpoint md in su, mentre le restanti .col-md si divideranno il resto dello spazio.
<div><divclass="row"><divclass="form-group col-md-6"><labelclass="active"for="inputEmail4">Email</label><inputtype="email"class="form-control"id="inputEmail4"placeholder="inserisci il tuo indirizzo email"></div><divclass="form-group col-md-6"><labelfor="exampleInputPassword1">Password</label><inputtype="password"data-bs-inputclass="form-control input-password"id="exampleInputPassword1"aria-describedby="infoPassword1"><buttontype="button"class="password-icon btn"role="switch"aria-checked="false"><spanclass="visually-hidden">Mostra/Nascondi Password</span><svgclass="password-icon-visible icon icon-sm"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-password-visible"></use></svg><svgclass="password-icon-invisible icon icon-sm d-none"aria-hidden="true"><usehref="/bootstrap-italia/dist/svg/sprites.svg#it-password-invisible"></use></svg></button><pid="infoPassword1"class="form-text text-muted d-block small pb-0">Inserisci almeno 8 caratteri e alcuni caratteri speciali.</p></div></div><divclass="row"><divclass="form-group col"><labelclass="active"for="inputAddress">Indirizzo</label><inputtype="text"class="form-control"id="inputAddress"placeholder="Via Roma, 1"></div></div><divclass="row"><divclass="form-group col-md-6"><labelfor="inputCity">Comune</label><inputtype="text"class="form-control"id="inputCity"></div><divclass="form-group col-md-2"><labelfor="inputCAP">CAP</label><inputtype="text"class="form-control"id="inputCAP"></div><divclass="form-group col-md-4"><divclass="select-wrapper"><labelfor="selectID">Provincia</label><selectid="selectID"><optionvalue="Value 1">Opzione 1</option><optionvalue="Value 2">Opzione 2</option><optionvalue="Value 3">Opzione 3</option><optionvalue="Value 4">Opzione 4</option><optionvalue="Value 5">Opzione 5</option></select></div></div></div><divclass="row"><divclass="form-group col-md-6"><divclass="toggles"><labelfor="toggleEsempio1a">
Label dell'interruttore 1
<inputtype="checkbox"id="toggleEsempio1a"><spanclass="lever"></span></label></div></div></div><divclass="row mt-4"><divclass="form-group col text-center"><buttontype="button"class="btn btn-outline-primary">Annulla</button><buttontype="submit"class="btn btn-primary">Conferma</button></div></div></div>
Auto-dimensionamento
L’esempio seguente usa una delle utilità di flexbox per centrare verticalmente dal breakpoint lg in su il contenuto e cambiando .col con .col-auto in modo che le colonne occupino solo lo spazio necessario. In altre parole, la colonna si dimensiona in base al contenuto. È possibile usarlo anche quando sono presenti altre colonne con dimensioni specifiche (es.: col-sm-3).
Le tecnologie assistive come gli screenreader avranno problemi con i tuoi moduli se non includi un’etichetta per ogni input. Per questi moduli in linea, si può nascondere le etichette usando la classe .visually-hidden. Esistono altri metodi alternativi per fornire un’etichetta per le tecnologie assistive, come l’attributo aria-label, aria-labelledby o title. Se nessuno di questi è presente, le tecnologie assistive possono ricorrere all’uso dell’attributo placeholder, se presente, ma è sconsigliato.
Disabilitazione di campi
Aggiungi l’attributo booleano disabled su un input per impedire le interazioni dell’utente e renderlo più chiaro.
1
<inputclass="form-control"id="disabledInput"type="text"value="Esempio di input disabilitato"aria-label="Label"disabled>
Disabilitazione di un intero form
Aggiungi l’attributo disabled al <fieldset> per disabilitare tutti gli elementi del form contenuti.
Mentre Bootstrap applicherà questi stili in tutti i browser, Internet Explorer 11 e successivi non supportano completamente l’attributo disabled nel <fieldset>. Utilizza codice JavaScript custom per disabilitare il fieldset in questi browser.
Validazione
Per la validazione dei forms è stato utilizzato il plugin Just Validate.
Come funziona
Per il funzionamento e le opzioni disponibili, si consiglia di consultare la documentazione.
Stili personalizzati
I campi che necessitano di validazione acquisiranno all’invio del form le classi CSS definite nello script che attiva il plugin. Nel nostro caso le classi saranno is-invalid e just-validate-success-field. I messaggi di errore avranno classe just-validate-error-label.
Di seguito un esempio di form validato con Just Validate.
<formclass="needs-validation"id="justValidateForm"><divclass="row mt-4"><divclass="form-group col-md-3"><labelclass="active"for="validationCustom01">Nome</label><inputtype="text"class="form-control"id="validationCustom01"value="Mario"required></div><divclass="form-group col-md-3"><labelclass="active"for="validationCustom02">Cognome</label><inputtype="text"class="form-control"id="validationCustom02"value="Rossi"required></div><divclass="form-group col-md-3"><labelfor="validationCustomUsername">Username</label><inputtype="text"class="form-control"id="validationCustomUsername"required></div><divclass="form-group col-md-3"><labelclass="input-number-label active "for="validationAge">Età (minimo 18 anni)</label><inputtype="number"data-bs-inputclass="form-control"id="validationAge"value="18"min="18"step="1"required></div></div><divclass="row"><divclass="form-group col-md-6"><labelfor="validationCustom03">Città</label><inputtype="text"class="form-control"id="validationCustom03"required></div><divclass="form-group col-md-3"><labelfor="validationCustom04">Provincia</label><inputtype="text"class="form-control"id="validationCustom04"required></div><divclass="form-group col-md-3"><labelfor="validationCustom05">CAP (5 cifre)</label><inputtype="text"class="form-control"id="validationCustom05"required></div></div><divclass="row align-items-center"><divclass="col-md-9 col-lg-6"><divclass="form-check mt-0"><inputclass="form-check-input"type="checkbox"value=""id="invalidCheck"required><labelclass="form-check-label"for="invalidCheck">Accetto i termini e le condizioni.</label></div></div><divclass="col-md-3 col-lg-6 mt-3 mt-md-0 d-flex justify-content-center justify-content-md-end justify-content-lg-start"><buttonclass="btn btn-primary"type="submit">Invia</button></div></div></form><divclass="row mt-4"><divclass="col-12"><divaria-live="polite"id="errorMsgContainer"></div></div></div><script>document.addEventListener("DOMContentLoaded",function(){consterrorMessage='<div class="alert alert-danger alert-dismissible fade show" role="alert"><strong>Attenzione</strong> Alcuni campi inseriti sono da controllare.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Chiudi avviso">';consterrorWrapper=document.querySelector('#errorMsgContainer');constvalidate=newbootstrap.FormValidate('#justValidateForm',{errorFieldCssClass:'is-invalid',errorLabelCssClass:'form-feedback',errorLabelStyle:'',focusInvalidField:false,})validate.addField('#validationCustom01',[{rule:'required',errorMessage:'Questo campo è richiesto'},]).addField('#validationCustom02',[{rule:'required',errorMessage:'Questo campo è richiesto'},]).addField('#validationCustom03',[{rule:'required',errorMessage:'Questo campo è richiesto'},]).addField('#validationCustom04',[{rule:'required',errorMessage:'Questo campo è richiesto'},]).addField('#validationCustomUsername',[{rule:'required',errorMessage:'Questo campo è richiesto'},]).addField('#validationAge',[{rule:'required',errorMessage:'Questo campo è richiesto'},{rule:'minNumber',value:18,errorMessage:'Deve essere maggiore di 17'},]).addField('#validationCustom05',[{rule:'required',errorMessage:'Questo campo è richiesto'},{rule:'minLength',value:5,errorMessage:'Inserire 5 cifre'},{rule:'maxLength',value:5,errorMessage:'Inserire 5 cifre'},{rule:'number',errorMessage:'Inserire un numero'},]).addField('#invalidCheck',[{rule:'required',errorMessage:'Questo campo è richiesto'},]).onSuccess(()=>{document.forms['justValidateForm'].submit()}).onFail((fields)=>{errorWrapper.innerHTML='';errorWrapper.innerHTML=errorMessage})})</script>
Continua la lettura
I singoli campi di tipo input, checkbox, radio, toggle, ecc. sono trattati in pagine separate della documentazione, continua a leggere alla pagina dedicata ai campi di input.