Form

Attraverso l’utilizzo dei form l’utente comunica con il portale.
Qui potrai trovare la User Interface, lo snippet e la modalità di utilizzo per le diverse tipologie di form: campi di input, checkbox, radio button, switch button, select e text area.

Campi di input e Textarea

                                           
<div class="form-group">
    <label for="inputExample1">Label</label>
    <input type="text" class="form-control" id="inputExample1" placeholder="Inserisci">
</div>

Input type text disabilitato

                                           
<div class="form-group">
    <label for="inputExample2">Label</label>
    <input type="text" class="form-control" id="inputExample2" placeholder="Inserisci" disabled>
</div>

Input type password

                                           
<div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" id="inputPassword" class="form-control" aria-describedby="passwordHelpInline" minlength="8" maxlength="20">
    <small id="passwordHelpInline" class="text-muted">
        Inserire una password tra gli 8 e i 20 caratteri
    </small>
</div>

Input type email

                                           
<div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control " id="exampleInputEmail1"
        aria-describedby="emailHelp" placeholder="Inserisci">
    <small id="emailHelp" class="form-text text-muted">Non condivideremo mai la tua
        e-mail con nessun altro.</small>
</div>

Input type file

                                           
<div class="form-group">
    <label for="exampleFormControlFile1" class="sr-only">Allega file</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>

Time-picker

                                           
<div class="form-group">
    <label for="exampleInputTime">Orario</label>
    <div class="input-group date dms-timepicker" id="time1" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" placeholder="hh:mm" data-target="#time1"/>
        <div class="input-group-append" data-target="#time1" data-toggle="datetimepicker">
            <div class="input-group-text"></div>
        </div>
    </div>
</div>

                                           
$(function () {
    $('#time1').datetimepicker({
        format: 'LT'
    });
});

Date-picker: giorno/mese/anno

Date-picker: mese/anno

                                           
<!-- Datepicker giorno/mese/anno -->
<label for="datepicker1">Data</label>
<div class="input-group date dms-datepicker" id="datepicker1" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" placeholder="gg/mm/aaaa" data-target="#datepicker1"/>
    <div class="input-group-append" data-target="#datepicker1" data-toggle="datetimepicker">
        <div class="input-group-text"></div>
    </div>
</div>

<!-- Datepicker mese/anno -->
<label for="datepicker-month-year">Mese/Anno</label>
<div class="input-group date dms-datepicker only-month-year" id="datepicker-month-year" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" placeholder="mm/aaaa" data-target="#datepicker-month-year"/>
    <div class="input-group-append" data-target="#datepicker-month-year" data-toggle="datetimepicker">
        <div class="input-group-text"></div>
    </div>
</div>

                                           
<!-- Script giorno/mese/anno  -->
$(function () {
    $('#datepicker1').datetimepicker({
        format: 'L'
    });
});

<!-- Script mese/anno  -->
$(function () {
    $('#datepicker-month-year').datetimepicker({
        viewMode: 'months',
        minViewMode: 'months',
        maxViewMode: 'years',
        startView: 'months',
        format: 'MM/YYYY'
    });
});

Textarea

                                           
<div class="form-group">
    <label for="exampleTextarea">Label</label>
    <textarea class="form-control" id="exampleTextarea" rows="4"></textarea>
</div>

Select e Multiselect

Select

                                           
<div class="form-group">
    <label for="example-select">Label</label>
    <div class="dms-form--select-wrapper">
        <select data-width="100%" data-live-search="false" data-size="5" class="form-control selectpicker"
            id="example-select">
            <option class="placeholder-option" value="">Seleziona</option>
            <option value="1">Opzione 1</option>
            <option value="2">Opzione 2</option>
            <option value="3">Opzione 3</option>
            <option value="4">Opzione 4</option>
            <option value="5">Opzione 5</option>
            <option value="6">Opzione 6</option>
            <option value="7">Opzione 7</option>
        </select>
    </div>
</div>

Select disabilitata

                                            
<div class="form-group">
    <label for="example-select-d">Label</label>
    <div class="dms-form--select-wrapper">
        <select disabled data-width="100%" data-live-search="false" data-size="5" class="form-control selectpicker"
            id="example-select-d">
            <option class="placeholder-option" value="">Seleziona</option>
            <option value="1">Opzione 1</option>
            <option value="2">Opzione 2</option>
            <option value="3">Opzione 3</option>
            <option value="4">Opzione 4</option>
            <option value="5">Opzione 5</option>
            <option value="6">Opzione 6</option>
            <option value="7">Opzione 7</option>
        </select>
    </div>
</div>

Select con ricerca: livesearch

                                           
<div class="form-group">
    <label for="example-select-ls">Label</label>
    <div class="dms-form--select-wrapper">
        <select title="Seleziona" data-width="100%" data-live-search="true" data-size="5" class="form-control selectpicker"
            id="example-select-ls">
            <option class="placeholder-option" value="">Seleziona</option>
            <option value="1">Operatori culturali</option>
            <option value="2">Operatori turistici</option>
            <option value="3">Musei</option>
            <option value="4">Comuni</option>
        </select>
    </div>
</div>

Select multipla

Label

                                           
<div class="form-group">
    <label for="number-multiple">Label</label>
    <div class="dms-form--select-wrapper">
        <select multiple class="selectpicker form-control" id="number-multiple"
            data-container="body" data-live-search="true"
            title="Seleziona una o più opzioni" data-hide-disabled="true"
            data-actions-box="true" data-virtual-scroll="false">
            <option>Opzione 1</option>
            <option>Opzione 2</option>
            <option>Opzione 3</option>
            <option>Opzione 4</option>
            <option>Opzione 5</option>
            <option>Opzione 6</option>
            <option>Opzione 7</option>
            <option>Opzione 8</option>
            <option>Opzione 9</option>
            <option>Opzione 10</option>
        </select>
    </div>
</div>

Checkbox, switch button e radio button

Checkbox

                                       
<!-- Checkbox generico -->
<div class="custom-label">Label checkbox generico</div>
<div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Generico</label>
</div>

<!-- Checkbox selezionato -->
<div class="custom-label">Label checkbox selezionato</div>
<div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" class="custom-control-input" id="customCheck2" checked>
    <label class="custom-control-label" for="customCheck2">Selezionato</label>
</div>

<!-- Checkbox disabilitato -->
<div class="custom-label">Label checkbox disabilitato</div>
<div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" class="custom-control-input" id="customCheck3" disabled>
    <label class="custom-control-label" for="customCheck3">Disabilitato</label>
</div>	

<!-- Checkbox disabilitato e selezionato -->
<div class="custom-label">Label checkbox selezionato e disabilitato</div>
<div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" class="custom-control-input" id="customCheck4" checked
        disabled>
    <label class="custom-control-label" for="customCheck4">Selezionato e
        disabilitato</label>
</div>

Radio button

                                       
<!-- Radio button -->
<div class="form-check">
    <div class="custom-label">Label</div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline1" name="customRadioInline1"
            class="custom-control-input" checked>
        <label class="custom-control-label" for="customRadioInline1">Opzione
            1</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline2" name="customRadioInline1"
            class="custom-control-input">
        <label class="custom-control-label" for="customRadioInline2">Opzione
            2</label>
    </div>
</div>

<!-- Radio button disabilitato -->
<div class="form-check">
    <div class="custom-label">Label Radio button disabilitato</em></div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline3" name="customRadioInline3"
            class="custom-control-input" checked disabled>
        <label class="custom-control-label" for="customRadioInline3">Opzione
            3</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline4" name="customRadioInline4"
            class="custom-control-input" disabled>
        <label class="custom-control-label" for="customRadioInline4">Opzione
            4</label>
    </div>
</div>

Switch

                                       
<!-- Switch button -->
<div class="custom-label">Label switch</div>
<div class="custom-control custom-switch dms-form--switch">
    <input type="checkbox" class="custom-control-input switch" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Seleziona/deseleziona
        switch</label>
</div>

<!-- Switch button disabilitato -->
<div class="custom-label">Label switch disabilitato</div>
<div class="custom-control custom-switch dms-form--switch">
    <input type="checkbox" class="custom-control-input switch" disabled
        id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Switch
        disabilitato</label>
</div>

Esempio di form con validazione

Errore: uno o più campi non sono stati compilati o risultano errati. Compila e clicca su "Avanti".

Nome^*

Inserire il nome

Cognome^*

Inserire il cognome

Città

Email^* Non condivideremo mai la tua e-mail con nessun altro.

Inserire un indirizzo email valido

Password^* Inserire una password tra gli 8 e i 20 caratteri

Inserire la password

Ripeti password^* Inserire una password tra gli 8 e i 20 caratteri

Confermare la password

Note

Acconsenti al trattamento dei dati personali

Devi accettare i termini e le condizioni prima di inviare il modulo

                                       
<div class="dms-alert dms-alert--error d-flex justify-content-start align-items-center" role="alert">
    <i class="dms-wk-icon-error"></i>
    <div>
        <span>Errore: correggi i campi contrassegnati in rosso</span>
    </div>
</div>
    
<form role="form" class="dms-form needs-validation" novalidate>
    <div class="form-row">
        <div class="form-group col-lg-4">
            <label for="inputExample1">Nome<sup>*</sup></label>
            <input type="text" class="form-control" id="inputExample1"
                placeholder="Nome" required>
            <div class="invalid-feedback">Inserire il nome</div>
        </div>
        <div class="form-group col-lg-4">
            <label for="inputExample1">Cognome<sup>*</sup></label>
            <input type="text" class="form-control" id="inputExample1"
                placeholder="Cognome" required>
            <div class="invalid-feedback">Inserire il cognome</div>

        </div>
        <div class="form-group col-lg-4">
            <label for="example-select-location">Città</label>
            <div class="dms-form--select-wrapper">
                <select data-width="100%" data-live-search="false" data-size="5" class="form-control selectpicker"
                    id="example-select-location" required>
                    <option>Bari</option>
                    <option>Brindisi</option>
                    <option>Taranto</option>
                    <option>Lecce</option>
                    <option>Foggia</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-lg-4">
            <label for="exampleInputEmail1">Email<sup>*</sup></label>
            <input type="email" class="form-control"
                id="exampleInputEmail1" aria-describedby="emailHelp"
                placeholder="Inserisci" required>
            <small id="emailHelp" class="form-text text-muted">Non condivideremo mai
                la tua e-mail con nessun altro</small>
            <div class="invalid-feedback">Inserire un indirizzo email valido</div>

        </div>
        <div class="form-group col-lg-4">
            <label for="inputPassword">Password<sup>*</sup></label>
            <input type="password" id="inputPassword"
                class="form-control" placeholder="Inserisci"
                aria-describedby="passwordHelpInline" minlength="8" maxlength="20"
                required>
            <small id="passwordHelpInline" class="text-muted">
                Inserire una password tra gli 8 e i 20 caratteri
            </small>
            <div class="invalid-feedback">Inserire la password.</div>
        </div>
        <div class="form-group col-lg-4">
            <label for="inputPassword">Ripeti password<sup>*</sup></label>
            <input type="password" id="inputPassword"
                class="form-control" placeholder="Inserisci"
                aria-describedby="passwordHelpInline" minlength="8" maxlength="20"
                required>
            <small id="passwordHelpInline" class="text-muted">
                Inserire una password tra gli 8 e i 20 caratteri
            </small>
            <div class="invalid-feedback">Confermare la password</div>

        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-lg-12">
            <label for="exampleTextarea">Note</label>
            <textarea class="form-control" id="exampleTextarea"
                placeholder="Inserisci un testo" rows="4"></textarea>
        </div>
    </div>
    <div class="form-row">
        <div class="col-lg-6">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck33"
                    required>
                <label class="custom-control-label" for="customCheck33">Acconsenti al
                    trattamento dei dati personali</label>
                <div class="invalid-feedback">Devi accettare i termini e le condizioni
                    prima di inviare il modulo</div>
            </div>
        </div>
    </div>
    <div class="d-flex flex-row-reverse">
        <button class="btn dms-btn dms-btn--primary" type="button">Invia</button>
    </div>
</form>

<!-- script per abilitare la validazione -->

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

Utilizzo

Regole generali

E' obbligatorio:

utilizzare il tag <form class="dms-form" role="form">
utilizzare le label per ogni campo
aggiungere l'attributo for alla label con lo stesso nome dell'id dell'input a cui è associato
attribuire ad ogni campo del form un id differente
attribuire lo stesso name a ciascuna opzione facente parte di un radio button o di una checkbox
aggiungere <sup>*</sup> all'elemento label, in caso di campo obbligatorio
aggiungere l'attributodisabled in caso di campo di input disabilitato
utilizzare il corretto attributo type in ogni campo di input, ad esempio per le email dovrà essere utilizzato <input type="email">.
rispettare i placeholder per ciascuna tipologia di input al fine di ottenere una coerenza formale

Inoltre, in presenza di un numero elevato di input all'interno della pagina è consigliato suddividerli utilizzando il tag <fieldset>.

Validazione

La validazione presente è esemplificativa ai fini grafici, progettata per una corretta visualizzazione a livello UX/UI. Dunque, non è da considerarsi una validazione dinamica, ma necessita di una implementazione front-end.

E' obbligatorio:

aggiungere la classe need-validation al form, con l'attributo novalidate (vedere snippet hml)
aggiungere l'attributo required ad ogni campo di input o select obbligatorio che richiede il controllo per la validazione
aggiungere l'elemento <div class="invalid-feedback">Testo di avviso.</div> per ciascun campo di input da validare all'interno dell'elemento <div class="form-group"> (vedere snippet html relativo all'esempio di form con validazione)
in caso di validazione con errori, aggiungere un alert di errore prima del form. In questo modo, si migliora l'esperienza dell'utente poichè si rende chiaro il motivo del non proseguimento della navigazione.

Datepicker

E' obbligatorio:

attribuire un id a cui associare un'inizializzazione custom lato javascript, a seconda dell'utilizzo di data generale oppure mese e anno (vedi snippet html e jQuery)
utilizzare la classe input group date dms-datepicker
utilizzare l'icona del calendario, come da snippet
rispettare il placeholder indicato, il quale suggerisce il formato all'utente

Per i campi di tipo datepicker, ovvero per data e ora, è stato utilizzato Tempus Dominus (v5.0.1), un plugin progettato per integrare l'uso delle date all'interno di Bootstrap ed conforme alla sua ultima versione (v4.5). Sul sito ufficiale è disponibile una ricca documentazione sull'utilizzo e le funzionalità del plugin.

Select

E' obbligatorio:

attribuire al tag select la classe form-control selectpicker per attivare il plugin associato e applicare lo stile corretto

in caso di select singola non obbligatoria, inserire un placeholder aggiundendo come prima voce della select <option class="placeholder-option" value="">Seleziona</option>

in caso di select multipla, aggiungere alla select l'attributo multiple

in caso di select multipla, applicare placeholder aggiungendo alla select title="Seleziona una o più opzioni"

in caso di select con ricerca, applicare funzionalità livesearch aggiungendo alla select l'attributo data-live-search="true", altrimenti settarlo a false

in caso di select con ricerca, aggiungendo alla select l'attributo data

Si consiglia di utilizzare l'attributo data-size="5" per visualizzare al più le prime cinque opzioni una select, permettendo all'utente di visualizzare eventuali altre option tramite scroll. Questo è un parametro custom che è possibile modificare a proprio piacimento.

Per i campi di tipo select è stato utilizzato Bootstrap-select (v1.13.14), un plugin jQuery per un uso avanzato e flessibile delle select all'interno del form, compatibile con la nuova versione di Bootstrap (v4.5). Per approfondimenti e customizzazioni si consiglia di consultare la documentazione ufficiale.

Se vuoi vedere un esempio di form per la localizzazione dati e orari consulta Template di esempio form localizzazione date e orari