16 maggio 2006 Test sui form n. 6

Come sesto test sui form, si è scelto di modificare gli stili specifici per gli elementi label, input, fieldset e legend. Il codice delle classi .bot, .etichetta, .centra e .txt è stato ripreso dal modulo di ricerca con Google presente sul sito di Michele Diodati. Lo scopo è quello di studiare le interpretazioni dei browser su un modulo operativo nella realtà. 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: 0;
padding: 0;
}

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

label.etichetta {
margin: 0;
margin-right: 5px;
display: block;
float: left;
width: 100px;
height: 20px;
line-height: 20px;
text-align: right;
font-weight: bold;
}

input.txt {
margin-bottom: 5px;
border: 2px solid #000;
}

input.bot {
margin-bottom: 5px;
background: #ecf8de;
color: #000;
font-weight: bold;
}

div.centra{
margin-top: 0px;
margin-bottom: 0px;
padding-left: .5em;
padding-right: .5em;
}



Note:

Come si evince dal codice, sono stati applicati dei nuovi stili alle classi .etichetta, .txt, .bot e .centra. Inoltre sono state modificate le dichiarazioni per fieldset e legend. La larghezza del campo di testo è stata dichiarata direttamente nel codice XHTML utilizzando l'attributo size. Tale dichiarazione è presente nel codice originale scritto da Michele Diodati. Questo ci permette di studiare il comportamento dei browser quando la larghezza viene espressa in tal modo e non tramite i fogli di stile. Inoltre possiamo studiare il comportamento dei browser in presenza di un elemento flottante e di altri due elementi (rimpiazzati) il cui posizionamento è ottenuto mediante padding e marginazione. Permangono delle differenze fra 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. Il codice di Michele Diodati permette una visualizzazione uniforme della larghezza del campo di testo. La visualizzazione del submit è uniforme in Opera e Firefox, ma non in Internet Explorer, che tende a stringere il contenitore attorno al contenuto testuale.
3. L'allineamento orizzontale del testo dell'elemento label è avvenuto mediante la dichiarazione di elemento di blocco, e quindi della larghezza, altezza ed interlinea. Si noti come Firefox ed Opera interpretino correttamente la dichiarazione, mentre Internet Explorer sposta il contenuto più in alto. Questo non avveniva nei precedenti test, dove tali dichiarazioni erano state applicate anche al campo di testo ed al submit.
4. Dal codice XHTML è stato eliminato l'elemento br dopo il submit avente la dichiarazione di clear: left.

Conclusione

Questo test ci ha permesso di prendere contatto con un modulo non più legato al freddo ambito di "laboratorio". Si noti che nel codice di Michele Diodati non sono presenti gli elementi fieldset e legend, ed inoltre l'intero modulo è racchiuso nella classe .corpodx, cosa che si è cercato di ricreare imperfettamente con la classe .centra. Fondamentalmente, si è cercato di studiare il comportamento di un elemento flottante in presenza di elementi non flottanti e privi di un posizionamento che li estraesse dal flusso del documento. Ancora una volta si sono notate differenze fra i browser, qui soprattutto nella forma di una dimensione diversa del submit e nell'allineamento del testo dell'elemento label con il campo testuale di input.