Form
Informazioni di base per la visualizzazione e la gestione dei form.
All’interno di un form, nella visualizzazione predefinita gli elementi sono allineati verticalmente, ma è possibile utilizzare classi aggiuntive per variare questo tipo di layout.
Bootstrap 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à predisposte per loro. Puoi usarlo con <fieldset>, <div> o qualsiasi altro elemento.
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.
La classe .row sostituisce in Bootstrap5 la classe .row
Il tema garantisce compatibilità all'indietro, renderizzando le vecchie classi - se ancora presenti nel markup - come le nuove.
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.
<fieldset id="my_fieldset">
<legend>Titolo del Form</legend>
<div class="row ml-0 mr-0">
<div class="form-group col-md-6">
<label for="formNome">Nome</label>
<input type="text" class="form-control" id="formNome">
</div>
<div class="form-group col-md-6">
<label for="formCognome">Cognome</label>
<input type="text" class="form-control" id="formCognome">
</div>
</div>
<div class="row ml-0 mr-0">
<div class="form-group col-md-6">
<label for="Comune">Comune</label>
<input type="text" class="form-control" id="Comune">
</div>
<div class="form-group col-md">
<label for="Provincia">Provincia</label>
<input type="text" class="form-control" id="Provincia">
</div>
<div class="form-group col-md">
<label for="CAP">CAP</label>
<input type="text" class="form-control" id="CAP">
</div>
</div>
</fieldset>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.
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).
<div class="row align-items-center ml-0 mr-0">
<div class="col-12 col-md-6 col-lg-auto">
<label class="visually-hidden" for="inlineFormInput">Nome</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Mario Rossi">
</div>
<div class="col-12 col-md-6 col-lg-auto">
<label class="visually-hidden" for="inlineFormInputGroup">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-6 col-md-3 offset-md-6 offset-lg-0 col-lg-auto">
<div class="form-check m-0">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Ricordami
</label>
</div>
</div>
<div class="col-6 col-md-3 col-lg-auto d-flex justify-content-end">
<button type="submit" class="btn btn-primary">Invia</button>
</div>
</div>Validazione - legacy
Questo approccio alla validazione dei campi - seppure ancora supportato - è superato in Bootstrap5 da una nuova modalità.
Fornisci un feedback ai tuoi utenti con la validazione del form HTML5 disponibile nei browser supportati. Scegli tra le risposte di convalida predefinite del browser o implementa messaggi personalizzati con le classi integrate inizializzate con JavaScript.
Ecco come funziona la validazione dei form:
- La validazione viene applicata tramite due pseudo-classi CSS:
:invalide:valid. Si applicano agli elementi<input>,<select>e<textarea>. - In alternativa esistono le classi
.is-invalide.is-validche possono essere usate al posto delle pseudo-classi per una validazione lato server. Non richiedono la presenza della classe.was-validatednel contenitore padre. - A causa dei vincoli nel modo in cui i CSS funzionano, non possiamo (al momento) applicare gli stili a un
<label>che precede un controllo del form nel DOM senza l’aiuto del codice JavaScript personalizzato. - Tutti i browser moderni supportano le constraint validation API, una serie di metodi JavaScript per la convalida dei controlli del modulo.
- I messaggi di feedback possono utilizzare le (diversi da un browser all’altro e non stilizzati tramite CSS) o gli stili di feedback personalizzati con HTML e CSS aggiuntivi.
- Puoi fornire messaggi di validazioni personalizzati con
setCustomValidityin JavaScript.
Per i messaggi personalizzati di convalida del form, dovrai aggiungere l’attributo booleano novalidate al tuo <form>. Questo disabiliterà le descrizioni di feedback predefinite del browser, ma fornirà comunque l’accesso alle API di validazione JavaScript. Prova a cliccare sul pulsante Invia del modulo sottostante; Javascript intercetterà l’evento e mostrerà i feedback all’utente. Vedrai così gli stili :invalid e :valid applicati ai controlli del modulo.
Nota sulla validazione Javascript: nel codice javascript di esempio la validazione viene eseguita contestualmente al click sul bottone di invio a partire dal binding sull'evento submit form.addEventListener('submit', function(event) { [...]. Nulla impedisce che lo script di validazione venga eseguito in relazione ad altri eventi, ad esempio al cambio del valore di un campo specifico o di un campo qualsiasi del form a partire dall'evento change e relativo selettore Js.
<form method="post" class="mt-4 needs-validation was-validated" novalidate="" action="page_form.html">
<div class="row ml-0 mr-0 mt-2">
<div class="form-group col-md-4 mb-3">
<input type="text" class="form-control" id="validationCustom01" value="Mario" required="">
<label for="validationCustom01" class="active" style="transition: none 0s ease 0s;">Nome</label>
<div class="valid-feedback">Validato!</div>
</div>
<div class="form-group col-md-4 mb-3">
<input type="text" class="form-control" id="validationCustom02" value="Rossi" required="">
<label for="validationCustom02" class="active" style="transition: none 0s ease 0s;">Cognome</label>
<div class="valid-feedback">Validato!</div>
</div>
<div class="form-group col-md-4 mb-3">
<input type="text" class="form-control" id="validationCustomUsername" required="">
<label for="validationCustomUsername" style="width: auto;">Username</label>
<div class="invalid-feedback">Per favore scegli un username.</div>
</div>
</div>
<div class="row ml-0 mr-0 mt-2">
<div class="form-group col-md-6 mb-3">
<input type="text" class="form-control" id="validationCustom03" required="">
<label for="validationCustom03" style="width: auto;">Città</label>
<div class="invalid-feedback">Per favore inserisci un nome di città valido.</div>
</div>
<div class="form-group col-md-3 mb-3">
<input type="text" class="form-control" id="validationCustom04" required="">
<label for="validationCustom04" style="width: auto;">Provincia</label>
<div class="invalid-feedback">Per favore inserisci un nome di provincia valida.</div>
</div>
<div class="form-group col-md-3 mb-3">
<input type="text" class="form-control" id="validationCustom05" required="">
<label for="validationCustom05" style="width: auto;">CAP</label>
<div class="invalid-feedback">Per favore inserisci un CAP valido.</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required="">
<label class="form-check-label" for="invalidCheck">Accetto i termini e le condizioni.</label>
<div class="invalid-feedback">Devi accettare i termini e le condizioni prima di inviare il modulo.</div>
</div>
</div>
<button class="btn btn-primary mt-3" type="submit">Invia</button>
</form>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
}, false);
form.classList.add('was-validated');
});
}, false);
})();
</script>Validazione
Per la validazione dei forms è consigliato il plugin Just Validate.
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; per il funzionamento e le opzioni disponibili, si consiglia di consultare la documentazione.
<form class="needs-validation" id="justValidateForm" method="post" action="../page-form.html">
<div class="row mt-4 ml-0 mr-0">
<div class="form-group col-md-3">
<label class="active" for="validationCustom01">Nome</label>
<input type="text" class="form-control" id="validationCustom01" value="Mario" required>
</div>
<div class="form-group col-md-3">
<label class="active" for="validationCustom02">Cognome</label>
<input type="text" class="form-control" id="validationCustom02" value="Rossi" required>
</div>
<div class="form-group col-md-3">
<label for="validationCustomUsername">Username</label>
<input type="text" class="form-control" id="validationCustomUsername" required>
</div>
<div class="form-group col-md-3">
<label class="input-number-label active " for="validationAge">Età (minimo 18 anni)</label>
<input type="number" data-bs-input class="form-control" id="validationAge" value="18" min="18" step="1" required>
</div>
</div>
<div class="row ml-0 mr-0">
<div class="form-group col-md-6">
<label for="validationCustom03">Città</label>
<input type="text" class="form-control" id="validationCustom03" required>
</div>
<div class="form-group col-md-3">
<label for="validationCustom04">Provincia</label>
<input type="text" class="form-control" id="validationCustom04" required>
</div>
<div class="form-group col-md-3">
<label for="validationCustom05">CAP (5 cifre)</label>
<input type="text" class="form-control" id="validationCustom05" required>
</div>
</div>
<div class="row align-items-center ml-0 mr-0">
<div class="col-md-9 col-lg-6">
<div class="form-check mt-0">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">Accetto i termini e le condizioni.</label>
</div>
</div>
<div class="col-md-3 col-lg-6 mt-3 mt-md-0 d-flex justify-content-center justify-content-md-end justify-content-lg-start">
<button class="btn btn-primary" type="submit">Invia</button>
</div>
</div>
</form>
<div class="row mt-4 ml-0 mr-0">
<div class="col-12">
<div aria-live="polite" id="errorMsgContainer"></div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const errorMessage = '<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">';
const errorWrapper = document.querySelector('#errorMsgContainer');
const validate = new bootstrap.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('#invalidCheck2', [
{
rule: 'required',
errorMessage: 'Questo campo è richiesto'
},
])
.onFail((fields) => {
errorWrapper.innerHTML = '';
errorWrapper.innerHTML = errorMessage
})
.onSuccess((event) => {
document.getElementById("justValidateForm").submit();
})
})
</script>