HTML

Mise en forme d’un document et compatibilité

Grandeur des éléments d’un formulaire - Comment limiter les dégâts.

Voilà le clou du spectacle, les formulaires. Ce n’est pas simple ajuster un formulaire sur une page web alors imaginez de le faire pour tous les navigateurs quand la grandeur, l’espace et la typographie sont variables. Oublier ça c’est impossible. La seule chose à faire est de limiter les dégâts.

Le principe consiste à se baser sur le plus large formulaire. C’est à dire sur le navigateur qui prend le plus d’espace pour affiche les formulaires. Ainsi, le formulaire vu sur un autre navigateur ne pourra qu’être plus petit. S’il était plus large, il risquerait de massacrer votre design. Car un formulaire, comme une image, déforme votre page jusqu’à ce qu’il entre au complet.

Une chose à ne pas oublier. Le caractère choisi peut faire un vrai ravage si vous n’y faites pas attention. Par exemple, le simple tiret ""-"", souvent utilisé pour séparer les choix d’un menu déroulant, peut prendre jusqu’à deux fois plus d’espace sous Macintosh que sous Windows.

Note : Les formulaires seront traités sans altération par un style ou une police de caractère. Mais je vous invite à travailler sur ce point très attentivement car c’est une bonne solution. En effet, puisque les Navigateurs Netscape (à l’exception de Netscape 6) ne supportent pas le style (CSS) pour un formulaire et que Internet explorer ne supporte pas la balise <FONT> pour le formulaire. Il est possible de jouer avec ces deux techniques pour modifier l’apparence d’un formulaire selon le navigateur.

Pour vous donner une idée de l’étendu des dégâts, télécharger ce fichier Photoshop avec des exemples de formulaire sous différent navigateur. parts.zip. Noter que l’exemple de Webmonkey ne fait aucunement mention du petit détail du tiret. Petit détail qui peut parfois signifier plus de 200 pixels !!

Sélecteur unique rond ???:) (radio buttons)

Très peu d’impact sur le design de vos pages, en fait le texte en a beaucoup plus. La hauteur et la largeur varie de 11 à 12 pixels. L’espace horizontal entre le texte et le sélecteur varie de 5 à 7 pixels, en supposant que le texte est sur la même ligne que le bouton. (certain navigateur ajoute un espace si le code contient un saut de ligne <BR>). Si ça vous cause un problème je vous conseil Autocad ;-)

Boîte de sélection (checkboxes)

Le summum de la compatibilité. Tous les navigateurs utilisent 12 pixels pour afficher une boîte de sélection à l’exception de IE 3.x sous Macintosh qui prend 14 pixels. L’espace horizontal entre le texte et le sélecteur varie de 5 à 7 pixels, en supposant que le texte est sur la même ligne que le bouton. (certain navigateur ajoute un espace si le code contient un saut de ligne <br />).

saisie de texte (une ligne)

	Navigateur	hauteur/height	largeur/width SIZE=20
	IE 5.x (Win)	21	152
	NN 4.x (Win)	24	169
	NN 4.x (Mac)	16	126
	IE 4.x (Win)	21	152
	IE 4.x (Mac)	15	123
	NN 3.x (Win)	24	154
	NN 3.x (Mac)	16	126
	IE 3.x (Win)	22	119
	IE 3.x (Mac)	15	123

Mesures en pixels
Source : Webmonkey

Les valeurs les plus grandes sont affichées en caractère foncé. Votre design doit tenir compte de ces valeurs maximales.
Tester votre page avec Navigator 4.x (Windows).

Saisie de texte (plusieurs lignes)

	Navigateur	hauteur/height (défaut)	hauteur/height ROWS=2	hauteur/height ROWS=3	largeur/width COLS=20
	IE 5.x (Win)	37	37	53	181
	NN 4.x (Win)	48	64	80	184
	NN 4.x (Mac)	38	50	62	150
	IE 4.x (Win)	37	37	53	181
	IE 4.x (Mac)	54	28	41	139
	NN 3.x (Win)	48	64	80	184
	NN 3.x (Mac)	38	50	62	150
	IE 3.x (Win)	77	51	64	99
	IE 3.x (Mac)	15	28	41	123

Mesures en pixels
Webmonkey

Les valeurs les plus grandes sont affichées en caractère foncé. Votre design doit tenir compte de ces valeurs maximales. ROW indique le nombre de lignes de la boîte de saisie. Pour obtenir les valeurs pour plus de ligne, utiliser le même rapport qu’entre ROWS=2 et ROWS=3.
Tester votre page avec Navigator 4.x (Windows). Et toujours définir le nombre de lignes afin de prévoir la hauteur maximale sous IE 3.x (Windows).

Menu déroulant (pull-down menus)

	Navigateur	hauteur/height	Relative largeur/width	Police, size, tracking
	IE 5.x (Win)	21		Arial 13/0
	NN 4.x (Win)	21		Arial 13/0
	NN 4.x (Mac)	18		Times 11.5/10
	IE 4.x (Win)	21		Arial 13/0
	IE 4.x (Mac)	18		Charcoal 12/30
	NN 3.x (Win)	23		Arial 13/0
	NN 3.x (Mac)	18	Selon le texte	Times 11.5/10
	IE 3.x (Win)	20		Arial 13/0
	IE 3.x (Mac)	17		Times 11.5/10

Mesures en pixels
Source : Webmonkey

Les valeurs les plus grandes sont affichées en caractère foncé. Votre design doit tenir compte de ces valeurs maximales. La largeur du menu dépend du texte le plus large, il n’est donc pas possible de prévoir cette valeur très instable en raison des différences entre polices de caractère. Note: Charcoal est une police que les vieux Mac OS ne reconnaissent pas.
Tester votre page avec Navigator 3.x (Windows et Mac).

Menu déroulant (sélections multiples)

	Navigateur	hauteur/height SIZE=2	hauteur/height SIZE=3	Relative largeur/width	Police, size, tracking
	IE 5.x (Win)	38	54		Arial 13/0
	NN 4.x (Win)	38	54		Arial 13/0
	NN 4.x (Mac)	26	38	Selon le texte	Courier 10.5/-30
	IE 4.x (Win)	38	54		Arial 13/0
	IE 4.x (Mac)	26	38		Times 11.5/10
	NN 3.x (Win)	38	54		Arial 13/0
	NN 3.x (Mac)	26	38	Selon le texte	Courier 10.5/-30
	IE 3.x (Win)	32	45		Arial 13/0
	IE 3.x (Mac)	26	38		Times 11.5/10

Mesures en pixels
Source : Webmonkey

Les valeurs les plus grandes sont affichées en caractère foncé. Votre design doit tenir compte de ces valeurs maximales. La largeur du menu dépend du texte le plus large, il n’est donc pas possible de prévoir cette valeur très instable. ROW indique le nombre de lignes de la boîte de saisie. Pour obtenir les valeurs pour plus de ligne, utiliser le même rapport qu’entre ROWS=2 et ROWS=3.
Tester votre page avec IE 5.x (Windows) et Navigator 4.x (Mac).