Come visto per gli altri elementi del nostro sito, Bootstrap ci fornisce tutti gli strumenti necessari per creare la nostra pagina di form. Attraverso il framework potremmo definirne diverse tipologie, ad esempio in alternativa alla basica forma a stack di elementi, potremmo definire il form inline o orizzontale come nel caso del nostro esempio.
Nell'esempio proposto in questa lezione, il form è stato inserito all'interno di un modal che contiene l'intero corpo del nostro form di contatti. Questa scelta ovviamente non vi vincola allo sviluppare i form utilizzando i modal, ma vuole rappresentare una possibile soluzione reale.
Vediamo quindi, come definire un modal all'interno della nostra pagina:
<div id="Form" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal" action=" " method="post" id="contact_form">
</form>
</div>
</div>
</div>
</div>
Questa rappresenta la struttura base del nostro modal, al quale associamo un metodo post una classe form-horizontal ed un ID. All'interno della documentazione potete vedere come definire inoltre un titolo ed un footer. Nel nostro caso questi non saranno necessari in quanto definiti all'interno della struttura <fieldset> (documentazione tag) del form; questo ci permette infatti di traferire la struttura as is in una nuova pagina del sito. Quello che resta da fare, è definire un collegamento all'interno della nostra pagina, per visualizzare quanto fatto fino ad ora:
<a data-toggle="modal" data-target="#Form">Form</a>
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
A questo punto tutto è pronto per procedere con l'inserimento delle nostre voci del form. Qui abbiamo tre diverse tipologie di elementi da inserire: Inputs, Textarea, Radio, Selects.
Inizializziamo quindi il nostro form e procediamo ad inserire gli elementi:
<fieldset>
<!-- Nome Form -->
<legend>Contattaci!</legend>
<p>Questo è un esempio di form per contattarci. Il nostro scopo è di permettere una semplice interazione da parte dell'utente il quale inserirà i suoi dettagli, il suo indirizzo email ed un messaggio. </p>
<!-- Qui vanno inseriti gli elementi -->
</fieldset>
tipologia in quanto supporta un gran numero di tipi di HTML5 (vedi documentazione). Nell'esempio riportato, abbiamo un oggetto di nome first_name a cui assegnamo un placeholder (il testo che si andrà a vedere all'interno della barra di input) e la tipologia text.
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Nome</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="Nome" class="form-control" type="text">
</div>
</div>
</div>Seguendo lo stesso schema, completa tutte le voci di Input. Le glyphicon mancanti sono in ordine: glyphicon-user, glyphicon-envelope, glyphicon-earphone.
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Messaggio</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Scrivi il tuo messaggio" rows="3"></textarea>
</div>
</div>
</div><!-- radio checks -->
<div class="form-group">
<label class="col-md-4 control-label">Hai un amaca?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="amaca" value="yes" /> Si
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="amaca" value="no" /> No
</label>
</div>
</div>
</div><!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label">Scelta multipla</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="numero" class="form-control selectpicker">
<option value=" ">Nessuna</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>Completa la pagina di contatti con le entry mancanti. Le glyphicon mancanti sono in ordine: glyphicon-pencil, glyphicon-send.
Uh, manca ancora il pulsante! Ma questo è leggermente diverso da quelli de dafault... Sapresti rifarlo?
Per colorare il bottone, sfruttiamo i diversi pulsanti disponibili.