10 maggio 2006 Test sui form n. 1

Come test di base sui form, si è scelto di utilizzare un semplice modulo di ricerca tramite Google. In questo primo test si sono applicati degli stili solo agli elementi form, fieldset e legend. 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 {
margin: 0;
padding: 0;
}

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



Note:

Anche con un codice così elementare, le differenze fra browser sono notevoli. Riassumendo:

1. Differenze nel posizionamento del bordo dell'elemento fieldset. Firefox tende ad unire il bordo superiore sinistro con il testo presente nell'elemento legend, mentre Internet Explorer ed Opera lo distanziano di qualche pixel, creando un rientro. Questo avviene nonostante i margini ed il padding siano stati completamente azzerati.
2. Bizzarro comportamento di Internet Explorer quando si applica la dichiarazione border: 1px dashed #000; all'elemento fieldset. Il bordo trapassa il testo all'interno dell'elemento legend. Applicando uno stile solid al bordo il problema non si presenta.
3. 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 più in basso.
4. 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 bene come non vi sia alcuna previa dichiarazione per l'elemento input.
5. Domanda: è possibile che una dichiarazione di larghezza in percentuale dell'elemento form influenzi il posizionamento degli elementi al suo interno? In questo esempio non vi è alcuna dichiarazione di larghezza per l'elemento form.

Conclusione

La difficoltà principale dell'applicazione di stili ad un form (modulo) sta appunto in una assoluta disparità di interpretazione da parte dei browser, dovuta al calcolo differente delle relazioni esistenti fra gli elementi di default, ovvero senza alcuno stile applicato. Prossimamente vedremo cosa accade posizionando gli elementi con i fogli si stile ed applicando loro delle regole più specifiche.