In questa serie di tutorial vedremo come costruire da zero un form per i contatti che sia bello esteticamente ma anche usabile. Per farlo, integreremo tutte le principali tecnologie che ci permetteranno di:
- scrivere un codice html semanticamente corretto e cross browser;
- curare l’aspetto presentazionale attraverso i css;
- operare una validazione di base attraverso javascript;
- perfezionare la validazione con php, usando le espressioni regolari;
- spedire il messaggio costruendo uno schema in php compatibile con tutti i client e-mail.
Tipicamente, un form dei contatti raccoglie informazioni su nome, cognome, oggetto ed e-mail dell’utente, più una textarea in cui lasciare un messaggio.
Cominceremo, dunque a costruire la struttura in Xhtml per una resa ottimale su tutti i browser.
Step 1
Iniziamo a costruire il form inserendo i tag essenziali. Il markup minimale è questo:
<form> <label>Nome:</label><input type="text" /> <label>Cognome:</label><input type="text" /> <label>E-mail:</label><input type="text" /> <label>Oggetto:</label><input type="text" /> <textarea></textarea> <input type="submit" value="Invia" /> </form>
Potete vedere l’esempio.
Notiamo come gli elementi, essendo inline, si dispongano sulla stessa riga, cosa che non vogliamo.
Step 2
Racchiudiamo pertanto i tag label e input in un div aggiuntivo, rendendo così il gruppo block level. Le cose vanno decisamente meglio.
Il markup:
<form> <div> <label>Nome:</label><input type="text" /> </div> <div> <label>Cognome:</label><input type="text" /> </div> <div> <label>E-mail:</label><input type="text" /> </div> <div> <label>Oggetto:</label><input type="text" /> </div> <div> <label>Messaggio:</label><textarea></textarea> </div> <div> <input type="submit" value="Invia" /> </div> </form>
Step 3
E’ ora di migliorare la parte presentazionale del form. Per farlo cominciamo ad attribuire al tag form il selettore id contatti ai tag div la classe req che sta per “required”. In questo modo ci ricorderemo che i campi input saranno obbligatori, cioè l’utente sarà costretto a compilarli. Per quanto riguarda la textarea conviene assegnarle una classe a parte che chiameremo message.
Per il div del campo “oggetto”, la classe assegnata si chiamerà noreq, indicando con ciò che non vogliamo che la sua compilazione sia obbligatoria.
Al div del campo submit assegniamo la classe submit.
Per quanto riguarda lo stile, lasceremo uno spazio verticale tra un div e l’altro.
Il codice Xhtml:
<form id="contatti"> <div class="req"> <label>Nome:</label><input type="text" /> </div> <div class="req"> <label>Cognome:</label><input type="text" /> </div> <div class="req"> <label>E-mail:</label><input type="text" /> </div> <div class="noreq"> <label>Oggetto:</label><input type="text" /> </div> <div class="message"> <label>Messaggio:</label><textarea></textarea> </div> <div class="submit"> <input type="submit" value="Invia" /> </div>
Di seguito il codice css fino ad ora.
.req, .noreq {
margin: 10px 0 10px;
}
Ecco l’esempio del form così modificato.
Step 4
Completiamo il lavoro stabilendo delle dimensioni per i div, le label, i campi input e allineiamoli per rendere più ordinato il layout usando la proprietà float per tutti i campi, eccetto quello submit.
Rimane il problema di come allineare il tag label di fianco alla textarea, poiché per default la scritta rimane in basso. La soluzione più facile è quella di usare i posizionamenti assoluti per la label e per la textarea avendo cura di assegnare al div contenitore la proprietà position: relative.
Ricordiamoci che i campi obbligatori devono essere resi palesi all’utente, per cui aggiungiamo una immagine grafica a forma di asterisco in ogni tag label attraverso la proprietà background-position dei css. E’ una convenzione osservata dalla quasi totalità dei progettisti web. Non guasta aggiungere una didascalia esplicativa in fondo al modulo per chiarire meglio il concetto.
Il codice Xhtml fin qui:
<form id="contatti"> <div class="req"> <label>Nome:</label><input type="text" /> </div> <div class="req"> <label>Cognome:</label><input type="text" /> </div> <div class="req"> <label>E-mail:</label><input type="text" /> </div> <div class="noreq"> <label>Oggetto:</label><input type="text" /> </div> <div class="message"> <label>Messaggio:</label><textarea></textarea> </div> <div class="submit"> <input type="submit" value="Invia" /> </div> <p><strong>N.B.:</strong> I campi contrassegnati con l'asterisco <span>*</span> devono essere compilati.</p> </form>
Il codice css fin qui:
.req, .noreq, .message {
width: 360px;
margin: 10px 0 10px;
}
.req label, .noreq label, .message label {
width: 100px;
height: 20px;
padding-left: 10px;
}
.req label, .message label {
background: url(img/asterisco.gif) no-repeat top left;
}
.req input, .noreq input {
float: right;
width: 250px;
height: 20px;
font-size: 100%;
}
.message {
position: relative;
height: 200px;
}
.message label {
position: absolute;
top: 10px;
left: 0;
}
.message textarea {
position: absolute;
width: 250px;
height: 200px;
top: 0;
right: 0;
font-size: 120%;
}
.submit input {
width: 80px;
height: 40px;
margin-left: 105px;
}
#contatti p {
font-size: 95%;
color: #7D7D7D;
}
#contatti span {
font-weight: bold;
color: #D62020;
}
Ecco il risultato.
Step 5
Aggiungiamo un tocco di stile in più per rendere più accattivante il nostro modulo. Coloriamo i campi input e la textarea e, attraverso la pseudo classe :focus, definiamo un colore di sfondo più scuro quando l’utente compila il campo o la textarea.
Possiamo poi intervenire sull’aspetto del pulsante submit aggiungendo un effetto roll-over e anche sulle scritte ai bordi dei campi, rendendole colorate e in grassetto.
Lo screenshot del form ultimato:
Ecco il risultato.
Il codice css fin qui:
.req, .noreq, .message {
width: 360px;
margin: 10px 0 10px;
}
.req label, .noreq label, .message label {
width: 100px;
height: 20px;
font-weight: bold;
color: #474235;
padding-left: 10px;
}
.req label, .message label {
background: url(img/asterisco.gif) no-repeat top left;
}
.req input, .noreq input {
float: right;
width: 250px;
height: 20px;
font-size: 100%;
}
.req input, .noreq input, .message textarea {
background: #FDFFC6;
border: 1px solid #CCC;
}
.req input:focus, .noreq input:focus, .message textarea:focus {
background: #FFF7AF;
}
.message {
position: relative;
height: 200px;
}
.message label {
position: absolute;
top: 10px;
left: 0;
}
.message textarea {
position: absolute;
width: 250px;
height: 200px;
top: 0;
right: 0;
font-size: 120%;
}
.submit input {
width: 80px;
height: 40px;
font-weight: bold;
background-color: #D3C59E;
color: #474235;
border: 1px solid #978D71;
margin-left: 107px;
}
.submit input:hover {
background-color: #C2B591;
}
#contatti p {
font-size: 95%;
color: #7D7D7D;
}
#contatti span {
font-weight: bold;
color: #D62020;
}
Categorie:
Tag:css, form, validazione javascript, validazione php, xhtml