Unito.it

Tema Unito v2

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 .form-row ne assicura una corretta spaziatura.

Puoi scegliere di dare una dimensione a una colonna, ad esempio dandogli una classe .col-7, mentre le restanti .col si divideranno il resto dello spazio.

Aggiungi l’attributo booleano disabled su un input per impedire le interazioni dell’utente.

<div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <input type="text" class="form-control" id="formNome">
                        <label for="formNome" style="width: auto;">Nome</label>
                    </div>
                    <div class="form-group col-md-6">
                        <input type="text"  class="form-control" id="formCognome">
                        <label for="formCognome" style="width: auto;">Cognome</label>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-7">
                        <input type="text" class="form-control" id="Citta">
                        <label for="Citta" style="width: auto;">Città</label>
                    </div>
                    <div class="form-group col">
                        <input type="text" class="form-control" id="Comune">
                        <label for="Comune" style="width: auto;">Comune</label>
                    </div>
                    <div class="form-group col">
                        <input type="text"  disabled class="form-control" id="CAP">
                        <label for="CAP" style="width: auto;">CAP</label>
                    </div>
                </div>
</div>

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, puoi nascondere le etichette usando la classe .sr-only. 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.

Validazione

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: :invalid e :valid. Si applicano agli elementi <input>, <select> e <textarea>.
  • In alternativa esistono le classi .is-invalid e .is-valid che possono essere usate al posto delle pseudo-classi per una validazione lato server. Non richiedono la presenza della classe .was-validated nel 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 setCustomValidity in 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.

Validato!
Validato!
Per favore scegli un username.
Per favore inserisci un nome di città valido.
Per favore inserisci un nome di provincia valida.
Per favore inserisci un CAP valido.
Devi accettare i termini e le condizioni prima di inviare il modulo.
            <form method="post" class="mt-4 needs-validation was-validated" novalidate="" action="page_form.html">
                <div class="form-row">
                    <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="form-row">
                    <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>
                <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>
                <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>
Torna su