11 maggio 2006 Test sui form n. 2

Come secondo test sui form, si è scelto di applicare degli stili specifici agli elementi fieldset, label ed input. Il codice fino ad ora utilizzato è il seguente:

body {
margin: 0;
padding: 0;
background: #f8f8ee;
color: #000;
font: 76% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: center;
}

form {
margin: 10em auto;
padding: 0;
width: 60%;
background: transparent;
text-align: left;
}

fieldset {
border: 1px solid #000;
margin-top: 16px;
padding: 10px;
}

legend {
font-weight: bold;
margin: 0;
padding: 0;
}

label, input.txt, input.bot {
float: left;
display: block;
}

label {
width: 50px;
margin: 0;
padding: 0;
}

input.txt {
width: 200px;
background: #e3f2f7;
color: #000;
border: 1px inset #ccc;
margin: 0 3px;
padding: 2px;
}

input.bot {
background: #add8e6;
color: #000;
border: 1px outset #00008b;
margin: 0 3px;
padding: 2px;
width: 30px;
}

.reset {
clear: left;
}



Note:

Come si evince dal codice, sono stati applicati degli stili agli elementi fieldset, label ed input. Il form si presenta ora esteticamente più gradevole rispetto al precedente esempio. Permangono tuttavia delle notevoli differenze tra i vari browser:

1. Differenza nel rientro del bordo superiore sinistro dell'elemento fieldset, che risulta essere più pronunciato in Internet Explorer ed in Opera rispetto a quanto avviene in Firefox.
2. Differenza nel posizionamento degli elementi label ed input all'interno di fieldset. Si noti come in teoria il padding applicato a fieldset avrebbe dovuto garantire una certa uniformità in tal senso. Questo è valido per Firefox, ma non per Internet Explorer ed Opera, che posizionano i due elementi più in alto rispetto al sopracitato browser.
3. Si noti come sia stato applicato il float per allineare gli elementi nel form. Opera fa fuoriscire gli elementi dal corpo del form, così si è reso necessario creare una classe .reset con clear: left ed applicarla ad un elemento <br /> posizionato dopo il submit.
4. Differenza nell'allineamento dell'elemento label ed input. Firefox allinea il testo di label esattamente con il testo presente nell'elemento input, mentre Internet Explorer ed Opera lo allineano rispettivamente più in alto, non allineandolo col testo. Si noti come tale comportamento perduri nonostante le dichiarazioni sul posizionamento e l'ampiezza di tali elementi.
5. Differenza nella dimensione di base del submit. In Opera e Firefox il bottone appare dotato di un padding pronunciato e di una larghezza superiore rispetto a quella presente in Internet Explorer. Si noti come anche adesso che è stata dichiarata un'ampiezza ed un padding per tale elemento, perdurino le differenze fra browser. Opera e Firefox allineano la base del submit col campo di testo, mentre Internet Explorer lo visualizza con un'ampiezza più pronunciata.
6. Domanda: è possibile che una dichiarazione di padding per l'elemento fieldset unita al float per label ed input influenzi il posizionamento di tali elementi al suo interno? Probabilmente è un ordine errato in tali dichiarazioni a causare l'allineamento non uniforme in Internet Explorer ed Opera, come risulta dalla lettura di questo esempio.

Conclusione

La ricerca dell'equilibrio nel layout di un form (modulo) procede per tentativi ed errori. L'odissea che stiamo affrontando è solo all'inizio. Fondamentalmente, leggere le specifiche non ci è d'aiuto in questo caso, poichè le specifiche vengono interpretate in modo diverso dai vari browser. Non c'è un comune accordo su come questi elementi debbano esssere resi a video quando non vi sono stili dichiarati. Da qui ne consegue tutta una serie di difficoltà che possono essere risolte solo provando e riprovando.