Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Form

L’utilizzo dei form è previsto all’interno di pagine o finestre e modali in cui è richiesto all’utente un inserimento di dati. I campi che devono essere obbligatoriamente compilati dovranno essere contrassegnati. A destra, un esempio del comportamento dei campi.

Gli elementi a corredo e supporto dei form potranno essere i seguenti:

Text box
Check box
Radio button
Menu a tendina (Accordion)
Bottoni

Gli elementi del form e tutti i contenuti mostrati sono disposti ed organizzati in maniera coerente e funzionale alla lettura. La lunghezza in colonne degli elementi dovrà inoltre essere la stessa per tutti i campi della stessa categoria e importanza di informazione e dovrà essere sufficiente a contenere il dato richiesto.

Componenti

Errore bloccante!
foo
Lorem ipsum
Aiuto
  • Titolo
  • 1/3
  • Titolo Sezione
  • Titolo Sezione
<div class="steppers it25-stepper-mobile-info">
  <nav class="steppers-nav it25-progress">
    <div class="progress progress-color">
      <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </nav>
  <div class="steppers-content" aria-live="polite">
    <!-- STEPPER CONTENT START -->
    <div class="container">
      <div class="row">
        <div class="col-xs-12 px-4 py-4">
          <div class="container-mobile">
            <ul class="section primary-blue-color">
              <li class="f-28 fw-bold">Titolo</li>
              <li class="f-20 fw-bold">1/3</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 px-4 py-2"><div class="form-group">
  <label for="exampleInputText" class="active">Titolo sezione </label>
  <input type="text" class="form-control" id="exampleInputText" value="Lorem Ipsum" />
</div>
</div>
      </div>
      <div class="row">
        <div class="col-xs-12 px-4 py-2"><div class="form-group">
  <label for="exampleInputText" class="active">Titolo sezione *</label>
  <input type="text" class="form-control" id="exampleInputText" value="Lorem Ipsum" />
</div>
</div>
      </div>
      <div class="row">
        <div class="col px-4 py-2"><div class="select-wrapper">
  <label for="defaultSelect24">Titolo Sezione</label>
  <select id="defaultSelect24">
    <option selected="" value="">Scegli</option>
    <option value="Value 1">Opzione 1</option>
    <option value="Value 2">Opzione 2</option>
    <option value="Value 3">Opzione 3</option>
    <option value="Value 4">Opzione 4</option>
    <option value="Value 5">Opzione 5</option>
  </select>
</div>
</div>
        <div class="col px-4 py-2"><div class="select-wrapper">
  <label for="defaultSelect25">Titolo Sezione</label>
  <select id="defaultSelect25">
    <option selected="" value="">Scegli</option>
    <option value="Value 1">Opzione 1</option>
    <option value="Value 2">Opzione 2</option>
    <option value="Value 3">Opzione 3</option>
    <option value="Value 4">Opzione 4</option>
    <option value="Value 5">Opzione 5</option>
  </select>
</div>
</div>
      </div>
      <div class="row">
        <div class="col-xs-12 px-4 py-2">
          <div class="container-mobile">
            <ul class="section primary-blue-color">
              <li class="f-16 fw-semibold">Titolo Sezione</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 px-4 py-1">
          <div class="form-check">
            <input id="check1" class="" type="checkbox" />
            <label for="check1" class="">Lorem ipsum</label>
          </div>
        </div>
        <div class="col-xs-12 px-4 py-1">
          <div class="form-check">
            <input id="check2" class="" type="checkbox" />
            <label for="check2" class="">Lorem ipsum</label>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 px-4 py-3"><div class="select-wrapper">
  <label for="defaultSelect">Titolo Sezione</label>
  <select id="defaultSelect">
    <option selected="" value="">Scegli</option>
    <option value="Value 1">Opzione 1</option>
    <option value="Value 2">Opzione 2</option>
    <option value="Value 3">Opzione 3</option>
    <option value="Value 4">Opzione 4</option>
    <option value="Value 5">Opzione 5</option>
  </select>
</div>
</div>
      </div>
      <div class="row">
        <div class="col-xs-12 px-4 py-2">
          <div class="container-mobile">
            <ul class="section primary-blue-color">
              <li class="f-16 fw-semibold">Titolo Sezione</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 px-4 py-3"><div class="btn-group it25-btn-group-mobile" role="group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked />
  <label class="btn it25-btn-check right" for="btnradio1">Select</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" />
  <label class="btn it25-btn-check left" for="btnradio2">Select</label>
</div>
</div>
      </div>
    </div>
    <!-- STEPPER CONTENT END -->
  </div>
  <nav class="steppers-nav">
    <button type="button" class="btn btn-outline-primary btn-mobile-radius steppers-btn-prev">Indietro</button>
    <button type="button" class="btn btn-primary btn-mobile-radius steppers-btn-next">Avanti</button>
  </nav>
</div>