Per provare il codice che vi proponiamo c’è bisogno senza dubbio di un minimo di conoscenza delle tecniche di programmazione per il web. Inoltre vi ricordiamo che per provare queste semplici righe di codice sono necessari i seguenti strumenti software:
- Browser che utilizzate per navigare (Firefox, Chrome, Opera, Safati, … fate voi)
- Editor per la scrittura del codice (ad esempio Sublime Text)
- Web Server installato in locale (ad esempio XAMPP) o servizio web con file da salvare con l’FTP
Indice
Bootstrap form controls
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Esempio Bootstrap 3 Supported Form Controls</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
js/bootstrap.min.js"></script>
<style type="text/css">
h1{
margin: 30px 0;
padding: 0 200px 15px 0;
border-bottom: 1px solid #E5E5E5;
}
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<h1>Form di Registrazione</h1>
<form class="form-horizontal" action="conferma.php" method="post">
<div class="form-group">
<label class="control-label col-xs-3" for="firstName">Nome:</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="firstName"
placeholder="Nome" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="lastName">Cognome:</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="lastName"
placeholder="Cognome" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="inputEmail">Indirizzo Email:</label>
<div class="col-xs-9">
<input type="email" class="form-control" id="inputEmail"
placeholder="Indirizzo Email" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="phoneNumber">Numero di Telefono:</label>
<div class="col-xs-9">
<input type="tel" class="form-control" id="phoneNumber"
placeholder="Numero di Telefono" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Data di Nascita:</label>
<div class="col-xs-3">
<select class="form-control">
<option>Giorno</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Mese</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Anno</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="postalAddress">Indirizzo Postale:</label>
<div class="col-xs-9">
<textarea rows="3" class="form-control" id="postalAddress"
placeholder="Indirizzo Postale" required></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" for="ZipCode">CAP:</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="ZipCode" placeholder="CAP" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Genere:</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="genderRadios" value="Maschio" required> Maschio
</label>
</div>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="genderRadios" value="Femmina" required> Femmina
</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<input type="checkbox" value="news"> Inviami le ultime novità e gli aggiornamenti.
</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<input type="checkbox" value="agree"> Accetto i
<a href="#">Termini e le Condizioni del Servizio</a>.
</label>
</div>
</div>
<br>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Reset">
</div>
</div>
</form>
</div>
</body>
</html>
Vorremmo infine osservare che in tutti i nostri esempi di codice con Bootstrap abbiamo sempre inserito nell’HEAD delle nostre pagine di esempio l’indirizzo web della libreria jQuery, della libreria Bootstrap e del css Bootstrap:
- https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Ovviamente è possibile scaricare i file jquery-1.12.4.min.js, bootstrap.min.js e bootstrap.min.css per salvarli in una cartella locale del vostro progetto. Tutto questo per far funzionare la vostra applicazione nella rete intranet locale, senza ricorrere ad una connessione ad internet e senza la necessita di dover puntare all’indirizzo delle librerie necessarie per il corretto funzionamento di questi progetti software.
Conclusioni
Abbiamo visto in questo articolo un nuovo esempio di codice con la libreria Bootstrap. È anche utile ricordare che questo Blog ha tutta una sezione riservata a Bootstrap e agli esempi di codice che comportano la presenza di questo linguaggio di programmazione. Per questa ragione vi invitiamo a visitare questa sezione del sito e ricordiamo che è possibile fare una verifica del codice che vi abbiamo presentato in questo articolo nella nostra pagina di Esempio Bootstrap form controls.