Test sui form

Sommario

1. Un form di base (senza stile)
2. Un form con dimensioni
3. Stile degli elementi
4. Usare gli hack

1. Un form di base (senza stile)

Codice HTML:

<form method="get" action="http://www.google.com/search">
 <div>
  <label for="q">Search with Google:</label>
   <input type="text" id="q" name="q" maxlength="255">
   <input type="hidden" name="hl" id="hl" value="en">
   <input type="submit" name="btnG" id="btnG" value="Go">
 </div>
</form>

Commenti

Ecco come appare in Internet Explorer 5:

La resa è simile a quella di Internet Explorer 6. I browser compliant, come Firefox 1.5 e Opera 9, visualizzano il form con differenze minori tra loro (per esempio nell'allineamento). Questo è dovuto alla mancanza di definizione della resa dei form da parte delle specifiche. Ora applicheremo delle dimensioni al form.

2. Un form con dimensioni

Codice CSS:

form {margin: 0; padding: 0;}

form div {margin: 0; padding: 0;}

input.size {width: 150px; height: 20px;}

input.submit1 {width: 30px; height: 30px;}

Commenti

Ecco come appare ora in Internet Explorer 5:

Qui ci sono delle differenze anche tra Internet Explorer 5 e 6 (l'altezza del bottone di invio). Secondo il modello CSS di Internet Explorer, un elemento <input> ha layout (si veda la pagina MSDN). Quindi dobbiamo trovare una soluzione per avere un layout decente anche per i due Explorer (5 e 6).

3. Stile degli elementi

Codice CSS:

label.prime {
display: inline-block;
height: 30px;
line-height: 30px;
margin-left: 10px;
}

input.size1 {
display: inline-block;
height: 30px;
width: 150px;
line-height: 30px;
}
input.submit2 {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
}

Commenti

Ecco come appare ora in Internet Explorer 5:

Si noti come Internet Explorer 5 (a differenza di Internet Explorer 6) ha applicato la dichiarazione 'display: inline-block' rispettando (in parte) l'allineamento verticale dato con le dichiarazioni 'height: 30px' e'line-height: 30px'. Si ricordi che 'display: inline-block' inizializza hasLayout a true. Poichè Internet Explorer 6 non ha ottenuto questo risultato, dobbiamo trovare un'altra soluzione.

4. Usare gli hack

Codice CSS:

* html body form div label.prime3 {
display /*\*/: inline; 
margin-bottom /*\*/: -6px; 
height /*\*/: 0;
}
label.prime3 {
margin-left: 10px;
}
div > label.prime3 {margin-top: 2px; display: inline-block;}

/*\*/ * html body form div input.size3 {
display /*\*/: inline; 
position /*\*/: relative;
} 
/**/

* html body form div input.size3 {display: inline;}

input.size3 {
vertical-align: middle;
}

div > input.size3 {display: inline-block;}

* html body form div input.submit4 {padding: 1px 6px;}
input.submit4 {
width: auto;
vertical-align: middle;
}

div > input.submit4 {padding: 1px 8px;}

@media all and (min-width: 0px;) {
input.submit4 { width: 30px; display: inline-block;}
}

Commenti

Ecco come appare ora in Internet Explorer 5 e Firefox:

Internet Explorer 5

Firefox

I bottoni sono leggermente differenti, ma l'allineamento è corretto. Abbiamo usato tre tipi di hack: per Internet Explorer 5 (in rosso), per Internet Explorer 6 (in blu) e per Opera (in marrone). Il selettore figlio (in grassetto) serve a Firefox ed Opera. L'allineamento è differente solo in Internet Explorer 6.