Campi input
Controlli per l'inserimento di dati in un form.
Per il corretto funzionamento degli elementi di tipo <input>, è di fondamentale importanza l’utilizzo uno degli appositi attributi type (ad esempio, email per l’inserimento di indirizzi email o number per informazioni numeriche), in modo da sfruttare i controlli di input più recenti come la verifica dell’email, l’utilizzo di metodo di input numerico e altro.
Si può includere un’etichetta che si riposiziona automaticamente quando l’utente utilizza il campo di testo.
Si può abbinare all’etichetta un placeholder (testo di esempio) per ulteriore chiarezza.
<div>
<div class="form-group">
<label for="exampleInputText" style="width: auto;">Campo di tipo testuale</label>
<input type="text" class="form-control" id="exampleInputText" placeholder="Testo di esempio">
</div>
<div class="form-group">
<label for="textarea" style="width: auto;">Campo di tipo testuale / textarea</label>
<textarea id="textarea" >Testo di esempio</textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1" style="width: auto;" class="">Campo di tipo email</label>
<input type="email" class="form-control" id="exampleInputEmail1">
</div>
<div class="form-group">
<label for="exampleInputNumber" style="width: auto;">Campo di tipo numerico</label>
<input type="number" class="form-control" id="exampleInputNumber">
</div>
<div class="form-group">
<label for="exampleInputTelephone" style="width: auto;">Campo di tipo telefono</label>
<input type="tel" class="form-control" id="exampleInputTelephone">
</div>
<div class="form-group">
<input type="time" class="form-control" id="exampleInputTime" min="9:00" max="18:00">
<label for="exampleInputTime" style="width: auto;">Campo di tipo ora</label>
</div>
</div>Icona, testo di aiuto e bottoni
In caso di necessità, è anche possibile utilizzare un ulteriore contenuto testuale sotto il campo di testo, aggiungendo un elemento <small> con classe .form-text all’interno di .form-group.
Il testo di aiuto deve essere esplicitamente associato agli elementi del mudulo form a cui si riferisce utilizzando l’attributo aria-describedby. Ciò garantirà che le tecnologie assistive, come gli screenreader, leggano questo testo di aiuto quando l’utente avrà il focus sull’elemento.
E' possibile introdurre icone utilizzanto il tag svg e bottoni con il tag button
Aggiungi l’attributo disabled ad un input per impedire la modifica del valore contenuto e non inviare i dati in esso contenuti.
<div class="form-group">
<label for="formGroupExampleInputWithHelp">Etichetta di esempio</label>
<input
type="text"
class="form-control"
id="formGroupExampleInputWithHelp"
placeholder="Testo di esempio"
aria-describedby="formGroupExampleInputWithHelpDescription"
>
<small id="formGroupExampleInputWithHelpDescription" class="form-text">Ulteriore testo informativo</small>
</div>
<div class="form-group pt-2">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><svg role="img" aria-describedby="my-title" class="icon icon-sm icon-danger"><title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-pencil"></use></svg></div>
</div>
<label for="input-group-2" class="active" style="transition: none 0s ease 0s;">Con Etichetta</label>
<input type="text" disabled class="form-control" id="input-group-2" name="input-group-2" placeholder="Lorem Ipsum">
<div class="input-group-append">
<button disabled class="btn" type="button" id="button-2">Invio</button>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><svg role="img" aria-describedby="my-title" class="icon icon-sm icon-danger"><title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-pencil"></use></svg></div>
</div>
<label for="input-group-2" class="active" style="transition: none 0s ease 0s;">Con Etichetta e placeholder</label>
<input type="text" class="form-control" id="input-group-2" name="input-group-2" placeholder="Lorem Ipsum">
<div class="input-group-append">
<button class="btn" type="submit" id="button-2">Invio</button>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><svg role="img" aria-describedby="my-title" class="icon icon-sm icon-primary"><title id="my-title">my-title</title><use xlink:href="./dist/svg/sprite.svg#it-pencil"></use></svg></div>
</div>
<label for="input-group-3" style="width: auto;">Con Etichetta e bottone "primary"</label>
<input type="text" class="form-control" id="input-group-3" name="input-group-3">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="button-3">Invio</button>
</div>
</div>
</div>Area di testo
Per permettere agli utenti di inserire del testo (ad esempio per lasciare commenti o informazioni), è bene utilizzare un elemento di tipo <textarea> ridimensionabile.
Includendo l’elemento all’interno di un .form-group, la label assumerà lo stesso comportamento dinamico dei campi di input.
<div>
<div class="form-group">
<label for="exampleFormControlTextarea1" style="width: auto;" class="">Esempio di area di testo</label>
<textarea id="exampleFormControlTextarea1" rows="3" class=""></textarea>
</div>
</div>Nota sull'uso di autofocus
L'attibuto autofocus fa si che un campo venga immediatamente selezionato, permettendo all'utente l'inserimento immediato delle informazioni.
Se utilizzato, è necessario utilizzare anche l'attributo placeholder - anche con una stringa vuota se necessario - per far si che la label del campo si posizioni correttamente al di sopra del campo stesso.
<div class="form-group">
<label for="exampleInputText" >Campo di tipo testuale</label>
<input type="text" class="form-control" autofocus placeholder="Testo di esempio" data-focus-mouse="false">
</div>