Assumo quindi che abbiate creato un file HTML aggiuntivo. Io personalmente lo salvo con il nome kontakt.html. Questo file kontakt.html si trova sullo stesso livello del già noto index.html.
In questa prima parte vengono apportate le impostazioni di base al modulo. Cose come bordi arrotondati, sfumature di colore ecc. saranno trattate nel prossimo tutorial.
All'interno di kontakt.html si crea il modulo. Il modulo viene definito all'interno dell'area div con la classe content. Dopo di che, decidete quali campi volete creare. Ho deciso di richiedere le seguenti informazioni:
• Nome
• Indirizzo e-mail
• Commento
Ovviamente dovete decidere quali informazioni volete raccogliere. In generale, consiglio di raccogliere solo i dati effettivamente necessari. La maggior parte dei visitatori dei siti web infatti si sottrae di fronte a moduli complessi. Quindi, mantenete tutto breve.
La struttura di base del mio modulo è la seguente:
<div class="content">
<formclass="form" action="#" method="post">
<fieldset>
<legend>Contattaci</legend>
<ol>
<li>
<label for="name">Nome:</label>
<input type="text" name="name"id="name" value="" />
</li>
<li>
<label for="email">Indirizzo e-mail:</label>
<input type="text" name="email" id="email"value="" />
</li>
<li>
<label for="comment">Commento:</label>
<textarea cols="32" rows="7"name="content" id="content"></textarea>
</li>
<li class="button">
<input type="submit" name="submit"id="submit" value="Invia" />
</li>
</ol>
</fieldset>
</form>
</div>Il modulo non contiene al momento particolari peculiarità. Intorno ai campi del modulo è stata applicata una definizione di fieldset. Come creare campi del modulo e cosa riguarda gli elementi label, è già stato descritto ampiamente. A questo punto, la piena concentrazione dovrebbe essere rivolta alla progettazione del modulo.
Se si visualizza il risultato nel browser, si vede un modulo ancora non particolarmente accattivante.
Ovviamente ci sono delle correzioni da fare.
Per prima cosa, vengono fornite informazioni fondamentali sul modulo.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
In questo modo vengono definite le distanze esterne ed interne. Inoltre, viene impostata una larghezza di 550 pixel per il modulo.
Proseguiamo con la formattazione di fieldset.
fieldset {
padding: 10px 20px 25px;
}
Anche qui vengono definite le distanze.
I campi del modulo sono creati all'interno di un elenco ordinato ol.
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
In modo che questo elenco non venga più riconosciuto come elenco, si utilizza list-style-type: none;. Inoltre, i margini e i padding sono entrambi impostati su 0.
Passiamo quindi alla definizione delle voci dell'elenco. Queste vanno a sinistra e hanno un padding di 10 pixel.
li {
float: left;
padding: 10px;
}
C'è un aspetto speciale riguardo al pulsante che si trova sotto il modulo. Dovrebbe essere allineato a destra.
li.button {
float: none;
clear: both;
text-align: right;
}Titolo del modulo
Passiamo ora all'elemento leggenda. Con questo viene definito il titolo del modulo.
La definizione per il titolo è la seguente:
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}Etichette
L'label vi è stato già presentato in questa serie. Tramite il label, si può creare un collegamento logico tra l'etichetta del campo e il campo del modulo effettivo. Per quanto riguarda la definizione CSS, qui c'è una particolarità.
label {
display:block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}
Applico all'elemento label anche un attributo cursor. Questo segnala ai visitatori che le etichette dei campi sono cliccabili. Se un utente clicca effettivamente su una descrizione del campo, il cursore verrà automaticamente posizionato nel campo corrispondente.
Progettare i campi del modulo
Nel prossimo passaggio verranno progettati i campi del modulo effettivi. Inizialmente, vengono fornite informazioni generali su input e textarea.
input, textarea {
color: #3399FF
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, sans-serif;
padding: 8px 10px;
width: 190px;
}
Si tratta esclusivamente di questioni di design. Particolare attenzione va posta ai bordi. Appena si posiziona il cursore in un campo, il colore del bordo cambia. Questo non è solo un aspetto estetico. Infatti, aiuta anche i visitatori a compilare il modulo. Così vedono sempre immediatamente in quale campo si trova il cursore.
Ora seguono alcune informazioni sul campo di testo multi-linea.
textarea {
width: 430px;
overflow: auto;
}
La larghezza di questo campo è fissata a 430 pixel. Alquanto strano potrebbe apparire a prima vista l'istruzione overflow: auto riguardante i campi di immissione multi-linea. Questa riga è dovuta alle versioni precedenti di Internet Explorer. Infatti, questo browser mostrava sempre le barre di scorrimento anche nei campi di immissione multi-linea quando non era necessario. Utilizzando overflow: auto si può aggirare questo problema estetico.
Progettare il pulsante di invio
Attualmente, il pulsante di invio appare abbastanza semplice. Questo cambierà ora. Il risultato sarà il seguente:
Al pulsante verranno assegnate diverse proprietà.
• Colore di sfondo
• Aspetto del carattere
• Bordo
• Spaziatura
Sintassi CSS relativa:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}
Interessante è forse qui la specifica input[type="submit"]. Con questo selettore si accede agli elementi di input che hanno l'attributo-valore type="submit".
