Esempi strutture Form
Per ulteriori approfondimenti sui form vedere la sezione relativa a questo link.
Accessibilità
Usare <fieldset> per raggruppare elementi form connessi per logica, anche per il raggruppamento dei radio button.
Per le select utilizzare <optgroup> per raggruppare semanticamente le option.
Prestare attenzione ad associare correttamente le label ad input o select. Agli elementi di input associare sempre le label, tranne sul submit/reset, image button, button, ridde.
Utilizzare l'attributo placeholder per agevolare l'utente nella compilazione dei campi.
Per la segnalazione degli errori, oltre all'utilizzo del colore rosso, é necessario fornire una descrizione testuale dell'errore, per consentire agli utenti di identificare il problema e agevolarli nella correzione.
Per indicare un campo obbligatorio, oltre all'utilizzo dell'asterisco (*), é necessario aggiungere l'informazione descrittiva nell'etichetta del campo oppure nel placeholder. Si suggerisce di aggiungere l'attributo "required" nel tag input corrispondente.
Form base
<form action="#" class="row form-grey content" id="form-base" name="Form 1">
<h3 class="title-modulo">Titolo Form</h3>
<fieldset class="col-xs-12">
<legend class="sr-only">Prima sezione</legend>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-11 noPadding">
<label class="control-label" for="input-1-1">Input 1</label>
<input type="text" class="form-control" id="input-1-1" placeholder="Inserisci testo" value="">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
<label class="control-label" for="input-1-2">* Input 2 (obbligatorio)</label>
<input type="text" class="form-control" id="input-1-2" placeholder="Inserisci testo" value="" required>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-1-3">Input 3</label>
<input type="text" class="form-control" id="input-1-3" placeholder="Inserisci testo" value="">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-3 noPadding">
<div class="input-relative">
<label for="select-1-1" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Select 1
<select class="form-control" id="select-1-1">
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-1-4">Input 4</label>
<input type="text" class="form-control" id="input-1-4" placeholder="Inserisci testo" value="">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-1-5">Input 5</label>
<input type="text" class="form-control" id="input-1-5" placeholder="Inserisci testo" value="">
</div>
</div>
</fieldset>
<fieldset class="col-xs-12">
<legend class="sr-only">Seconda sezione</legend>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-3 noPadding">
<div class="input-relative">
<label for="select-1-2" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Select 2
<select class="form-control" id="select-1-2">
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-3 noPadding">
<div class="input-relative">
<label for="select-1-3" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Select 3
<select class="form-control" id="select-1-3">
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
</fieldset>
<div class="col-xs-12">
<button type="reset" class="btn btn-link">Annulla</button>
<button class="btn btn-primary pull-right" type="button">Bottone destro</button>
</div>
</form>
Form disabilitato
<form action="#" class="row form-grey content" id="form-disabilitato" name="Nome form">
<h3 class="title-modulo">Titolo Form 1</h3>
<fieldset class="col-xs-12">
<legend class="sr-only">Prima sezione</legend>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-11 noPadding">
<label class="control-label" for="input-2-1">Input 1</label>
<input type="text" class="form-control" id="input-2-1" placeholder="Inserisci testo" value="" disabled>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
<label class="control-label" for="input-2-2">Input 2</label>
<input type="text" class="form-control" id="input-2-2" placeholder="Inserisci testo" value="" disabled>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-2-3">Input 3</label>
<input type="text" class="form-control" id="input-2-3" placeholder="Inserisci testo" value="" disabled>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-8 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
<label class="control-label" for="input-2-4">Input 4</label>
<input type="text" class="form-control" id="input-2-4" placeholder="Inserisci testo" value="" disabled>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-2-5">Input 5</label>
<input type="text" class="form-control" id="input-2-5" placeholder="Inserisci testo" value="" disabled>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-3 noPadding">
<div class="input-relative">
<label for="select-2-1" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Select 1
<select class="form-control" id="select-2-1" disabled>
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-3 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-2-6">Input 6</label>
<input type="text" class="form-control" id="input-2-6" placeholder="Inserisci testo" value="" disabled>
</div>
</div>
</fieldset>
<div class="col-xs-12">
<button type="reset" class="btn btn-link">Annulla</button>
<button class="btn btn-primary pull-right" type="button">Bottone destro</button>
</div>
</form>
Form accordion
<div class="row panel panel-default form-accordion">
<div class="row panel-heading heading-form-grey" data-toggle="collapse" data-target="#form-accordion-panel">
<h3 class="title-modulo">Titolo form accordion</h3>
<span class="fa fa-chevron-down" title="Espandi/Riduci la riga"></span>
</div>
<div id="form-accordion-panel" class="row collapse panel-body body-form-grey">
<form action="#" class="row form-grey">
<fieldset class="col-xs-12">
<legend class="sr-only">Prima sezione</legend>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-3-1a">Input 1</label>
<input type="text" class="form-control" id="input-3-1a" placeholder="Inserisci testo" value="">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-3 noPadding">
<div class="input-relative">
<label for="select-3-1" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Select 1
<select class="form-control" id="select-3-1">
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-3-1">Input 1</label>
<input type="text" class="form-control" id="input-3-1" placeholder="Inserisci testo" value="">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-3-2">Input 2</label>
<input type="text" class="form-control" id="input-3-2" placeholder="Inserisci testo" value="">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-3-3">Input 3</label>
<input type="text" class="form-control" id="input-3-3" placeholder="Inserisci testo" value="">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-3-4">Input 4</label>
<input type="text" class="form-control" id="input-3-4" placeholder="Inserisci testo" value="">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-3-5a">Input 5</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="input-3-5a" placeholder="placeholder" value="Valore di default">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-4 noPaddingLeft">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 noPadding">
<label class="control-label" for="input-3-5">Input 5</label>
<input type="text" class="form-control" id="input-3-5" placeholder="Inserisci testo" value="">
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-4 col-lg-3 noPadding">
<div class="input-relative">
<label for="select-3-2" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Select 1
<select class="form-control" id="select-3-2">
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
</fieldset>
<hr/>
<h4 class="title-modulo">Sottotitolo</h4>
<fieldset class="col-xs-12">
<legend class="sr-only">Seconda sezione</legend>
<div class="row">
<div class="form-group col-xs-8 col-sm-8 col-md-8 col-lg-8 noPadding">
<div class="input-relative">
<label for="select-3-3" class="label-select col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
Select 3
<select class="form-control" id="select-3-3">
<option value="">Opzione 1</option>
<option value="">Opzione 2</option>
<option value="">Opzione 3</option>
</select>
</label>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12 noPaddingLeft">
<div class="checkbox">
<label for="input-checkbox-3-1">
<input id="input-checkbox-3-1" type="checkbox" value="" title="checkbox">Checkbox
</label>
</div>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-xs-12">
<button type="reset" class="btn btn-link">Annulla</button>
<button class="btn btn-primary pull-right" type="button">Bottone destro</button>
</div>
</div>
</form>
</div>
</div>
Titolo form accordion
Form tabellare 1
<form class="row form-grey form-tabellare" action="#" id="form-tabellare" name="Nome form">
<h3 class="row title-modulo">Titolo Form Tabellare</h3>
<fieldset>
<legend class="sr-only">Prima sezione</legend>
<div class="row">
<div class="col-xs-6 col-sm-5 col-md-6 col-lg-8"></div>
<div class="col-xs-6 col-sm-7 col-md-6 col-lg-4">
<div class="col-xs-5 col-sm-6 col-md-5 form-group">
Colonna 1
</div>
<div class="col-xs-5 col-sm-6 col-md-5 form-group">
Colonna 2
</div>
</div>
</div>
<div class="row">
<p class="col-xs-6 col-sm-5 col-md-6 col-lg-8">
Riga numero 1
<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>
</p>
<div class="col-xs-6 col-sm-7 col-md-6 col-lg-4">
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row1Col1">Riga 1 Colonna 1</label>
<input id="Row1Col1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row1Col2">Riga 1 Colonna 2</label>
<input id="Row1Col2" class="form-control inputNumber" type="text">
</div>
</div>
</div>
<div class="row">
<p class="col-xs-6 col-sm-5 col-md-6 col-lg-8">
Riga numero 2
</p>
<div class="col-xs-6 col-sm-7 col-md-6 col-lg-4">
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row2Col1">Riga 2 Colonna 1</label>
<input id="Row2Col1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row2Col2">Riga 2 Colonna 2</label>
<input id="Row2Col2" class="form-control inputNumber" type="text">
</div>
</div>
</div>
<div class="row">
<p class="col-xs-6 col-sm-5 col-md-6 col-lg-8">
Riga numero 3
<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>
</p>
<div class="col-xs-6 col-sm-7 col-md-6 col-lg-4">
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row3Col1">Riga 3 Colonna 1</label>
<input id="Row3Col1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row3Col2">Riga 3 Colonna 2</label>
<input id="Row3Col2" class="form-control inputNumber" type="text">
</div>
</div>
</div>
<div class="row">
<p class="col-xs-6 col-sm-5 col-md-6 col-lg-8">
Riga numero 4
</p>
<div class="col-xs-6 col-sm-7 col-md-6 col-lg-4">
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row4Col1">Riga 4 Colonna 1</label>
<input id="Row4Col1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row4Col2">Riga 4 Colonna 2</label>
<input id="Row4Col2" class="form-control inputNumber" type="text">
</div>
</div>
</div>
<div class="row">
<p class="col-xs-6 col-sm-5 col-md-6 col-lg-8">
Riga numero 5
</p>
<div class="col-xs-6 col-sm-7 col-md-6 col-lg-4">
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row5Col1">Riga 5 Colonna 1</label>
<input id="Row5Col1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row5Col2">Riga 5 Colonna 2</label>
<input id="Row5Col2" class="form-control inputNumber" type="text">
</div>
</div>
</div>
<div class="row">
<p class="col-xs-6 col-sm-5 col-md-6 col-lg-8">
Riga numero 6
</p>
<div class="col-xs-6 col-sm-7 col-md-6 col-lg-4">
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row6Col1">Riga 6 Colonna 1</label>
<input id="Row6Col1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row6Col2">Riga 6 Colonna 2</label>
<input id="Row6Col2" class="form-control inputNumber" type="text">
</div>
</div>
</div>
<div class="row">
<p class="col-xs-6 col-sm-5 col-md-6 col-lg-8">
Riga numero 7
</p>
<div class="col-xs-6 col-sm-7 col-md-6 col-lg-4">
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row7Col1">Riga 7 Colonna 1</label>
<input id="Row7Col1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-5 col-sm-6 col-md-5">
<label class="sr-only" for="Row7Col2">Riga 7 Colonna 2</label>
<input id="Row7Col2" class="form-control inputNumber" type="text">
</div>
</div>
</div>
</fieldset>
<div class="col-xs-12">
<button type="reset" class="btn btn-link">Annulla</button>
<button class="btn btn-primary pull-right" type="button">Bottone destro</button>
</div>
</form>
Form tabellare 2
<form class="row form-grey form-tabellare-grey" action="#" id="form-2-tabellare" name="Nome form">
<h3 class="row title-modulo">Titolo Form Tabellare</h3>
<fieldset>
<legend class="sr-only">Prima sezione</legend>
<div class="row">
<div class="row heading-form-grey">
<div class="col-xs-3"></div>
<div class="col-xs-3 rightBorder">
Colonna 1
</div>
<div class="col-xs-3 rightBorder">
Colonna 2
</div>
<div class="col-xs-3">
Colonna 3
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
<div class="col-xs-3 noPadding">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
</div>
<div class="row">
<p class="col-xs-3">Riga uno</p>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col1a-1">Riga 1 Colonna 1 A</label>
<input id="Row1Col1a-1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col1b-1">Riga 1 Colonna 1 B</label>
<input id="Row1Col1b-1" class="form-control inputNumber" type="text">
</div>
</div>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col2a-1">Riga 1 Colonna 2 A</label>
<input id="Row1Col2a-1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col2b-1">Riga 1 Colonna 2 B</label>
<input id="Row1Col2b-1" class="form-control inputNumber" type="text">
</div>
</div>
<div class="col-xs-3 noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col3a-1">Riga 1 Colonna 3 A</label>
<input id="Row1Col3a-1" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col3b-1">Riga 1 Colonna 3 B</label>
<input id="Row1Col3b-1" class="form-control inputNumber" type="text">
</div>
</div>
</div>
</div>
</fieldset>
<hr class="noPadding">
<fieldset>
<legend class="sr-only">Seconda sezione</legend>
<div class="row heading-form-grey noPadding">
<div class="col-xs-3"></div>
<div class="col-xs-3 rightBorder">
Colonna 1
</div>
<div class="col-xs-3">
Colonna 2
</div>
<div class="col-xs-3"></div>
</div>
<div class="row body-form">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
<div class="col-xs-3 noPadding">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
<div class="col-xs-3 noPadding"></div>
</div>
<div class="row">
<span class="col-xs-3">Riga uno</span>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col1a-2">Riga 1 Colonna 1 A</label>
<input id="Row1Col1a-2" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col1b-2">Riga 1 Colonna 1 B</label>
<input id="Row1Col1b-2" class="form-control inputNumber" type="text">
</div>
</div>
<div class="col-xs-3 noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col2a-2">Riga 1 Colonna 2 A</label>
<input id="Row1Col2a-2" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col2b-2">Riga 1 Colonna 2 B</label>
<input id="Row1Col2b-2" class="form-control inputNumber" type="text">
</div>
</div>
<div class="col-xs-3 noPadding"></div>
</div>
<div class="row">
<span class="col-xs-3">Riga due</span>
<div class="col-xs-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row2Col1a-2">Riga 2 Colonna 1 A</label>
<input id="Row2Col1a-2" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row2Col1b-2">Riga 2 Colonna 1 B</label>
<input id="Row2Col1b-2" class="form-control inputNumber" type="text">
</div>
</div>
<div class="col-xs-3 noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row2Col2a-2">Riga 2 Colonna 2 A</label>
<input id="Row2Col2a-2" class="form-control inputNumber" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row2Col2b-2">Riga 2 Colonna 2 B</label>
<input id="Row2Col2b-2" class="form-control inputNumber" type="text">
</div>
</div>
<div class="col-xs-3 noPadding"></div>
</div>
</div>
</fieldset>
<div class="col-xs-12">
<button type="reset" class="btn btn-link">Annulla</button>
<button class="btn btn-primary pull-right" type="button">Bottone destro</button>
</div>
</form>
Form tabellare 3
<form class="row form-grey form-tabellare-grey" action="#" id="form-3-tabellare" name="Nome form">
<h3 class="row title-modulo">Titolo Form Tabellare</h3>
<fieldset>
<legend class="sr-only">Prima sezione</legend>
<div class="row">
<div class="row heading-form-grey">
<div class="col-xs-6 col-sm-4 col-md-6">ARGOMENTO</div>
<div class="col-xs-3 col-sm-4 col-md-3 rightBorder">Colonna 1</div>
<div class="col-xs-3 col-sm-4 col-md-3">Colonna 2</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-6"></div>
<div class="col-xs-3 col-sm-4 col-md-3 rightBorder noPadding">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
<div class="col-xs-3 col-sm-4 col-md-3 noPadding noPadding">
<div class="col-xs-6 labelSpace">
Col. A
</div>
<div class="col-xs-6 labelSpace">
Col. B
</div>
</div>
</div>
<div class="row">
<span class="col-xs-6 col-sm-4 col-md-6">Riga uno</span>
<div class="col-xs-3 col-sm-4 col-md-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col1a-3">Riga 1 Colonna 1 A</label>
<input id="Row1Col1a-3" class="form-control inputNumber completeInput" value="5" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col1b-3">Riga 1 Colonna 1 B</label>
<input id="Row1Col1b-3" class="form-control inputNumber completeInput" value="5" type="text">
</div>
</div>
<div class="col-xs-3 col-sm-4 col-md-3 noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row1Col2a-3">Riga 1 Colonna 2 A</label>
<input id="Row1Col2a-3" class="form-control inputNumber" value="0" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row1Col2b-3">Riga 1 Colonna 2 B</label>
<input id="Row1Col2b-3" class="form-control inputNumber completeInput" value="7" type="text">
</div>
</div>
</div>
<div class="row">
<span class="col-xs-6 col-sm-4 col-md-6">Riga due</span>
<div class="col-xs-3 col-sm-4 col-md-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row2Col1a-3">Riga 2 Colonna 1 A</label>
<input id="Row2Col1a-3" class="form-control inputNumber" value="0" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row2Col1b-3">Riga 2 Colonna 1 B</label>
<input id="Row2Col1b-3" class="form-control inputNumber" value="0" type="text">
</div>
</div>
<div class="col-xs-3 col-sm-4 col-md-3 noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row2Col2a-3">Riga 2 Colonna 2 A</label>
<input id="Row2Col2a-3" class="form-control inputNumber" value="0" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row2Col2b-3">Riga 2 Colonna 2 B</label>
<input id="Row2Col2b-3" class="form-control inputNumber" value="0" type="text">
</div>
</div>
</div>
<div class="row">
<span class="col-xs-6 col-sm-4 col-md-6">Riga tre</span>
<div class="col-xs-3 col-sm-4 col-md-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row3Col1a-3">Riga 3 Colonna 1 A</label>
<input id="Row3Col1a-3" class="form-control inputNumber" value="0" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row3Col1b-3">Riga 3 Colonna 1 B</label>
<input id="Row3Col1b-3" class="form-control inputNumber" value="0" type="text">
</div>
</div>
<div class="col-xs-3 col-sm-4 col-md-3 noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row3Col2a-3">Riga 3 Colonna 2 A</label>
<input id="Row3Col2a-3" class="form-control inputNumber" value="0" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row3Col2b-3">Riga 3 Colonna 2 B</label>
<input id="Row3Col2b-3" class="form-control inputNumber" value="0" type="text">
</div>
</div>
</div>
<div class="row">
<span class="col-xs-6 col-sm-4 col-md-6">Riga quattro</span>
<div class="col-xs-3 col-sm-4 col-md-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row4Col1a-3">Riga 4 Colonna 1 A</label>
<input id="Row4Col1a-3" class="form-control inputNumber completeInput" value="8" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row4Col1b-3">Riga 4 Colonna 1 B</label>
<input id="Row4Col1b-3" class="form-control inputNumber completeInput" value="2" type="text">
</div>
</div>
<div class="col-xs-3 col-sm-4 col-md-3 noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row4Col2a-3">Riga 4 Colonna 2 A</label>
<input id="Row4Col2a-3" class="form-control inputNumber" value="0" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row4Col2b-3">Riga 4 Colonna 2 B</label>
<input id="Row4Col2b-3" class="form-control inputNumber completeInput" value="9" type="text">
</div>
</div>
</div>
<div class="row">
<span class="col-xs-6 col-sm-4 col-md-6">Riga cinque</span>
<div class="col-xs-3 col-sm-4 col-md-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row5Col1a-3">Riga 5 Colonna 1 A</label>
<input id="Row5Col1a-3" class="form-control inputNumber" value="0" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row5Col1b-3">Riga 5 Colonna 1 B</label>
<input id="Row5Col1b-3" class="form-control inputNumber completeInput" value="7" type="text">
</div>
</div>
<div class="col-xs-3 col-sm-4 col-md-3 noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row5Col2a-3">Riga 5 Colonna 2 A</label>
<input id="Row5Col2a-3" class="form-control inputNumber completeInput" value="6" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row5Col2b-3">Riga 5 Colonna 2 B</label>
<input id="Row5Col2b-3" class="form-control inputNumber" value="0" type="text">
</div>
</div>
</div>
<div class="row">
<span class="col-xs-6 col-sm-4 col-md-6">Riga sei</span>
<div class="col-xs-3 col-sm-4 col-md-3 rightBorder noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row6Col1a-3">Riga 6 Colonna 1 A</label>
<input id="Row6Col1a-3" class="form-control inputNumber" value="0" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row6Col1b-3">Riga 6 Colonna 1 B</label>
<input id="Row6Col1b-3" class="form-control inputNumber" value="0" type="text">
</div>
</div>
<div class="col-xs-3 col-sm-4 col-md-3 noPadding">
<div class="col-xs-6">
<label class="sr-only" for="Row6Col2a-3">Riga 6 Colonna 2 A</label>
<input id="Row6Col2a-3" class="form-control inputNumber completeInput" value="6" type="text">
</div>
<div class="col-xs-6">
<label class="sr-only" for="Row6Col2b-3">Riga 6 Colonna 2 B</label>
<input id="Row6Col2b-3" class="form-control inputNumber" value="0" type="text">
</div>
</div>
</div>
<div class="col-xs-12">
<span class="pull-right">hai inserito <strong class="ncampi">9</strong> campi su <strong class="ncampi">24</strong></span>
</div>
</div>
</fieldset>
<div class="col-xs-12">
<button type="reset" class="btn btn-link">Annulla</button>
<button class="btn btn-primary pull-right" type="button">Bottone destro</button>
</div>
</form>