Form
Campi input
<!-- Campo di input di testo -->
<div class="form-group col-xs-12 col-md-6 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="form-input-1">Etichetta del campo</label>
<input type="text" class="form-control" id="form-input-1" placeholder="placeholder" value="Valore di default">
</div>
</div>
<!-- Campo di input di testo disabilitato -->
<div class="form-group col-xs-12 col-md-6 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="form-input-1-disabled">Etichetta del campo</label>
<input type="text" class="form-control disabled" id="form-input-1-disabled" placeholder="placeholder" value="Valore di default" disabled>
</div>
</div>
<!-- Campo di input di testo con errore -->
<div class="form-group col-xs-12 col-md-6 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 has-error noPadding">
<label class="control-label" for="form-input-error">Etichetta del campo</label>
<input type="text" class="form-control" id="form-input-error" placeholder="placeholder" value="Valore di default">
<span class="msg msg-errore"><strong>ERRORE: Descrizione dell'errore di campo</strong></span>
</div>
</div>
<!-- Campo di input con tasto di info -->
<div class="form-group col-xs-12 col-md-6 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="form-input-info">Etichetta del campo</label>
<em class="fa fa-question-circle fa-lg" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
<input type="text" class="form-control" id="form-input-info" placeholder="placeholder" value="Valore di default">
</div>
</div>
Campo di input di testo:
Campo di input di testo disabilitato:
Campo di input di testo con errore:
ERRORE: Descrizione dell'errore di campoCampo di input con tasto di info:
L'etichetta del form deve essere sempre fuori dal campo. Se il campo è “obbligatorio” deve essere inserito il simbolo “*” prima dell'Etichetta del Campo.
All'interno del box deve sempre esserci un'indicazione del valore da inserire.
L'errore di compilazione deve essere sempre composto da:
- campo evidenziato
- descrizione dell'errore chiara per qualsiasi utente. Evitare quindi di scrivere frasi come “Errore Generico”
Si suggerisce di inserire, nei form più complessi, un tooltip per fornire maggiori indicazioni sul valore da inserire.
Campi data
<!-- Campo data -->
<div class="date datePicker col-xs-12 col-md-6 noPaddingLeft">
<div class="form-group">
<div class="input-relative">
<label class="control-label" for="form-data-1">Etichetta del campo</label>
<input id="form-data-1" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text">
<em class="fa fa-calendar" title="Calendario"></em>
</div>
</div>
</div>
<!-- Campo data disabilitato -->
<div class="date datePicker col-xs-12 col-md-6 noPaddingLeft">
<div class="form-group">
<div class="input-relative">
<label class="control-label" for="form-data-2">Etichetta del campo</label>
<input id="form-data-2" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text" disabled>
<em class="fa fa-calendar" title="Calendario"></em>
</div>
</div>
</div>
<!-- Campo data con errore -->
<div class="date datePicker col-xs-12 col-md-6 noPaddingLeft">
<div class="form-group has-error">
<div class="input-relative">
<label class="control-label" for="form-data-3">Etichetta del campo</label>
<input id="form-data-3" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text" >
<em class="fa fa-calendar" title="Calendario"></em>
</div>
<span class="msg msg-errore"><strong>ERRORE: Descrizione dell'errore di campo</strong></span>
</div>
</div>
<!-- Campo data con tasto info -->
<div class="date datePicker col-xs-12 col-md-6 noPaddingLeft">
<div class="form-group">
<div class="input-relative">
<label class="control-label" for="form-data-4">Etichetta del campo</label>
<em class="fa fa-question-circle fa-lg" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
<input id="form-data-4" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text">
<em class="fa fa-calendar" title="Calendario"></em>
</div>
</div>
</div>
<!-- Campi data con periodo -->
<div class="form-inline date-range col-xs-12 noPaddingLeft">
<p>Periodo</p>
<div class="date datePicker">
<div class="form-group">
<div class="input-relative">
<label class="control-label" for="form-data-5">Dal</label>
<input id="form-data-5" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text">
<em class="fa fa-calendar" title="Calendario"></em>
</div>
</div>
<div class="form-group">
<div class="input-relative">
<label class="control-label" for="form-data-6">al</label>
<input id="form-data-6" class="form-control" title="GG/MM/AAAA" placeholder="GG/MM/AAAA" type="text">
<em class="fa fa-calendar" title="Calendario"></em>
</div>
</div>
</div>
</div>
Campo data:
Campo data disabilitato:
Campo data con errore:
Campo data con tasto info:
Campi data con periodo:
Periodo
L'etichetta del form deve essere sempre fuori dal campo. Se il campo è “obbligatorio” deve essere inserito il simbolo “*” prima dell'Etichetta del Campo.
L'errore di compilazione deve essere sempre composto da:
- campo evidenziato
- descrizione dell'errore chiara per qualsiasi utente. Evitare quindi di scrivere frasi come “Errore Generico”
Si suggerisce di inserire, quando necessario, un tooltip per fornire maggiori indicazioni sul valore da inserire.
Select
<!-- Select -->
<div class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPadding">
<div class="input-relative">
<label for="form-select-1" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Etichetta del campo
<select class="form-control" id="form-select-1">
<option value="">- seleziona opzione -</option>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
<!-- Select disabilitata -->
<div class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPadding">
<div class="input-relative">
<label for="form-select-2" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Etichetta del campo
<select class="form-control" id="form-select-2" disabled>
<option value="">- seleziona opzione -</option>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
<!-- Select con errore -->
<div class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 has-error noPadding">
<div class="input-relative">
<label for="form-select-errore-1" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Etichetta del campo
<select class="form-control" id="form-select-errore-1">
<option value="">- seleziona opzione -</option>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
<span class="msg msg-errore"><strong>ERRORE: Descrizione dell'errore di campo</strong></span>
</div>
<!-- Select con info -->
<div class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPadding">
<div class="input-relative">
<label for="form-select-4" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Etichetta del campo
<em class="fa fa-question-circle fa-lg fa-select" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
<select class="form-control" id="form-select-4">
<option value="">- seleziona opzione -</option>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
Select:
Select disabilitata:
Select con errore:
Select con info:
La Select è un controllo grafico che permette all'utente di selezionare un valore da una lista. Quando nessun valore è stato selezionato, deve mostrare un testo tipo “Selezione un'opzione”.
- Quando attivata mostra, facendo “cascare” (in inglese drop down) una lista di valori selezionabili. Una volta che l'utente seleziona un valore dalla lista, il controllo ritorna allo stato iniziale, mostrando il solo valore attualmente selezionato.
L'etichetta deve essere sempre fuori dal campo. Se il campo è “obbligatorio” deve essere inserito il simbolo “*” prima dell'Etichetta del Campo.
L'errore di compilazione deve essere sempre composto da:
- campo evidenziato
- descrizione dell'errore chiara per qualsiasi utente. Evitare quindi di scrivere frasi come “Errore Generico”
Radio Button
<!-- Input Radio -->
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 noPadding">
<fieldset class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft">
<legend class="radio-legend">Etichetta del campo</legend>
<div class="radio">
<label for="input-radio-1-1">
<input id="input-radio-1-1" type="radio" name="optradio" value="" title="Opzione 1">Opzione 1
</label>
</div>
<div class="radio">
<label for="input-radio-1-2">
<input id="input-radio-1-2" type="radio" name="optradio" value="" title="Opzione 2">Opzione 2
</label>
</div>
<div class="radio">
<label for="input-radio-1-3">
<input id="input-radio-1-3" type="radio" name="optradio" value="" title="Opzione 3">Opzione 3
</label>
</div>
</fieldset>
</div>
<!-- Input Radio disabilitata -->
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 noPadding">
<fieldset class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft">
<legend class="radio-legend">Etichetta del campo</legend>
<div class="radio">
<label for="input-radio-2-1">
<input id="input-radio-2-1" type="radio" name="optradio" value="" title="Opzione 1" disabled>Opzione 1
</label>
</div>
<div class="radio">
<label for="input-radio-2-2">
<input id="input-radio-2-2" type="radio" name="optradio" value="" title="Opzione 2" disabled>Opzione 2
</label>
</div>
<div class="radio">
<label for="input-radio-2-3">
<input id="input-radio-2-3" type="radio" name="optradio" value="" title="Opzione 3" disabled>Opzione 3
</label>
</div>
</fieldset>
</div>
<!-- Input Radio con errore -->
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 noPadding">
<fieldset class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft">
<legend class="radio-legend">Etichetta del campo</legend>
<div class="radio">
<label for="input-radio-3-1">
<input id="input-radio-3-1" type="radio" name="optradio" value="" title="Opzione 1">Opzione 1
</label>
</div>
<div class="radio">
<label for="input-radio-3-2">
<input id="input-radio-3-2" type="radio" name="optradio" value="" title="Opzione 2">Opzione 2
</label>
</div>
<div class="radio">
<label for="input-radio-3-3">
<input id="input-radio-3-3" type="radio" name="optradio" value="" title="Opzione 3">Opzione 3
</label>
</div>
<span class="msg msg-errore"><strong>ERRORE: Descrizione dell'errore di campo</strong></span>
</fieldset>
</div>
<!-- Input Radio con info -->
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 noPadding">
<fieldset class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft">
<legend class="radio-legend">Etichetta del campo</legend>
<div class="radio">
<label for="input-radio-4-1">
<input id="input-radio-4-1" type="radio" name="optradio" value="" title="Opzione 1">Opzione 1
</label>
<em class="fa fa-question-circle fa-lg" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
</div>
<div class="radio">
<label for="input-radio-4-2">
<input id="input-radio-4-2" type="radio" name="optradio" value="" title="Opzione 2">Opzione 2
</label>
</div>
<div class="radio">
<label for="input-radio-4-3">
<input id="input-radio-4-3" type="radio" name="optradio" value="" title="Opzione 3">Opzione 3
</label>
<em class="fa fa-question-circle fa-lg" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
</div>
</fieldset>
</div>
Input Radio:
Input Radio disabilitata:
Input Radio con errore:
Input Radio con info:
Il Radio Button è un controllo grafico che consente di effettuare una scelta singola esclusiva nell'ambito di un insieme predefinito di opzioni o possibili scelte. Sono riuniti a gruppi di due o più ed hanno accanto una breve descrizione.
L'etichetta deve essere sempre posizionata fuori dal campo.
La presenza di un errore deve essere sempre caratterizzata da una descrizione dell'errore chiara per qualsiasi utente. Evitare quindi di scrivere frasi come “Errore Generico”.
Si suggerisce di inserire, quando necessario, un tooltip per fornire maggiori indicazioni sulla possibile scelta.
Checkbox
<!-- Checkbox -->
<div class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft">
<div class="checkbox">
<label for="input-checkbox-1-1">
<input id="input-checkbox-1-1" type="checkbox" value="" title="checkbox">Etichetta del campo
</label>
</div>
</div>
<!-- Checkbox disabilitata -->
<div class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft">
<div class="checkbox">
<label for="input-checkbox-1-2">
<input id="input-checkbox-1-2" type="checkbox" value="" title="checkbox" disabled>Etichetta del campo
</label>
</div>
</div>
<!-- Checkbox con errore -->
<div class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 has-error noPaddingLeft">
<div class="checkbox">
<label for="input-checkbox-1-3">
<input id="input-checkbox-1-3" type="checkbox" value="" title="checkbox">Etichetta del campo
</label>
</div>
<span class="msg msg-errore"><strong>ERRORE: Descrizione dell'errore di campo</strong></span>
</div>
<!-- Checkbox con tasto di info -->
<div class="form-group col-xs-12 col-sm-8 col-md-6 col-lg-6 noPaddingLeft">
<div class="checkbox">
<label for="input-checkbox-1-4">
<input id="input-checkbox-1-4" type="checkbox" value="" title="checkbox">Etichetta del campo
</label>
<em class="fa fa-question-circle fa-lg" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
</div>
</div>
Checkbox:
Checkbox disabilitata:
Checkbox con errore:
Checkbox con tasto di info:
Un checkbox è un controllo grafico con cui l'utente può effettuare selezioni multiple.
Adiacente al checkbox viene mostrata una breve descrizione.
L'errore di compilazione deve essere sempre composto da:
- campo evidenziato
- descrizione dell'errore chiara per qualsiasi utente. Evitare quindi di scrivere frasi come “Errore Generico”
Si suggerisce di inserire, quando necessario, un tooltip per fornire maggiori indicazioni sulla possibile scelta.
Combobox
<div class="form-group combobox-wrapper col-xs-6">
<div class="ui-widget">
<label for="form-combobox-1">Etichetta del campo</label>
<select id="form-combobox-1" class="combobox">
<option value="">- seleziona opzione -</option>
<option value="">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
</div>
Combobox:
Un Combo box è un controllo grafico che permette di effettuare una scelta scrivendola in una casella di testo o selezionandola da un elenco. Quando disabilitato mostra solo un valore, una volta attivato viene mostrata tutta la lista dei possibili valori.
L'errore di compilazione deve essere sempre composto da:
- campo evidenziato
- descrizione dell'errore chiara per qualsiasi utente. Evitare quindi di scrivere frasi come “Errore Generico”
Per il corretto funzionamento della combobox è necessario includere la libreria combobox.js inclusa in questa pagina ed attivare l'elemento creato.
Per l'esempio precendete:
$( "#form-combobox-1" ).combobox();
Textarea
<!-- Textarea -->
<div class="form-group col-xs-12 noPadding">
<div class="col-xs-12 col-md-11 col-lg-8 noPadding">
<label class="control-label" for="form-text-area-1">Etichetta del campo</label>
<div class="remainingChar pull-right"><strong>300</strong> caratteri disponibili</div>
<textarea class="form-control" id="form-text-area-1" placeholder="placeholder" rows="5" maxlength="300" title="Textarea"></textarea>
</div>
</div>
<!-- Textarea disabilitata -->
<div class="form-group col-xs-12 noPadding">
<div class="col-xs-12 col-md-11 col-lg-8 noPadding">
<label class="control-label" for="form-text-area-1-disabled">Etichetta del campo</label>
<div class="remainingChar pull-right"><strong>300</strong> caratteri disponibili</div>
<textarea class="form-control" id="form-text-area-1-disabled" placeholder="placeholder" rows="5" maxlength="300" title="Textarea" disabled></textarea>
</div>
</div>
<!-- Textarea con errore -->
<div class="form-group col-xs-12 noPadding">
<div class="col-xs-12 col-md-11 col-lg-8 has-error noPadding">
<label class="control-label" for="form-text-area-2">Etichetta del campo</label>
<div class="remainingChar pull-right"><strong>300</strong> caratteri disponibili</div>
<textarea class="form-control" id="form-text-area-2" placeholder="placeholder" rows="5" maxlength="300" title="Textarea"></textarea>
<span class="msg msg-errore"><strong>ERRORE: Descrizione dell'errore di campo</strong></span>
</div>
</div>
<!-- Textarea con tasto di info -->
<div class="form-group col-xs-12 noPadding">
<div class="col-xs-12 col-md-11 col-lg-8 noPadding">
<label class="control-label" for="form-text-area-3">Etichetta del campo</label>
<em class="fa fa-question-circle fa-lg" data-toggle="popover" title="" data-content="Inserire qua un suggerimento od una descrizione relativa a questo campo." data-original-title="Popover Header"></em>
<div class="remainingChar pull-right"><strong>300</strong> caratteri disponibili</div>
<textarea class="form-control" id="form-text-area-3" placeholder="placeholder" rows="5" maxlength="300" title="Textarea"></textarea>
</div>
</div>
Textarea:
Textarea disabilitata:
Textarea con errore:
Textarea con tasto di info:
La textarea consente all'utente di inserire del testo.
Indicare sempre il numero massimo massima di caratteri che è possibile inserire.
L'errore di compilazione deve essere sempre composto da:
- campo evidenziato
- descrizione dell'errore chiara per qualsiasi utente. Evitare quindi di scrivere frasi come “Errore Generico”
Campo Carica File
<!-- Campo Upload File -->
<div class="row form-group uploadFile">
<div class="col-xs-12 noPaddingLeft">
<label for="addfile">Nome del file</label>
</div>
<div class="col-xs-4 upload-file-button-container noPaddingLeft">
<label for="addfile-fake" class="sr-only">Label input</label>
<input id="addfile-fake" class="col-xs-12 form-control" readonly title="placeholder" type="text">
<button class="innerx"><span class="reset"></span></button>
<span>Allega 1 PDF da max 1MB oppure 2 PDF da max 500KB ciascuno</span>
</div>
<div class="col-xs-8">
<div class="fileUpload pull-left noMarginLeft">
<div class="btn btn-primary noMargin col-xs-12 upload-container">
<span>Scegli il file</span>
<input id="addfile" accept=".pdf" class="btn btn-primary upload" type="file">
</div>
</div>
<div class="fileUpload pull-left padding noMarginLeft">
<div class="form-group">
<button class="btn btn-primary add-file disabled" disabled>aggiungi</button>
</div>
</div>
<div class="fileSubmit col-xs-4 noMarginLeft">
<button class="btn btn-primary noMargin btn-inline col-xs-12">Carica il file</button>
</div>
</div>
</div>
Campo Upload File
L'etichetta del form deve essere sempre fuori dal campo.
Deve sempre essere indicata la quantità, il peso massimo e la tipologia di file che posso essere allegati.