Formulaire en CSS sur deux colonnes... c'est possible ?

Bonsoir à tous !

J'utilise AppFuse au boulot, qui est une sorte de projet préfabriqué pour Java/J2EE permettant de générer en quelques clics (enfin, avec peu de configuration) un site prêt à l'emploi pour lire/éditer/sauver des infos en base de données (les fameux CRUD).

Le truc, c'est que les formulaires générés sont assez bizarres :

- chaque input (et son label) est généré entre deux balises li
- les boutons de validation/annulation sont regroupés côte à côte dans la même balise li, eux aussi

En outre, certains de nos formulaires sont assez volumineux (de nombreux champs à remplir ou à visualiser), donc je me suis dit que je pourrais mettre tout ça en forme en CSS afin de faire un formulaire en deux colonnes (cf. image suivante).



Avant de me lancer dans l'aventure, je regarde si quelqu'un ne se serait pas déjà jeté à l'eau... et même dans la FAQ d'Alsacréations, qui regorge pourtant de liens vers des sites traitant des formulaires en CSS, rien.

A priori, je ne suis pas obligé de garder le codage actuel, en liste. Néanmoins, j'avais pensé dans un premier temps à utiliser la commande CSS "display: inline;" afin que les champs s'affichent les uns à la suite des autres. Dans un deuxième temps, je pensais à leur fixer une taille, afin que seuls deux d'entre eux s'affichent par ligne... mais je n'y suis pas arrivé !

Voilà les restrictions, si vous acceptez cette dure mission de m'aider :

- le site ne sera consulté que par des gens sous IE6 (oui oui, bon, hein, on est en entreprise, tout ça)
- la partie MENU que vous voyez dans l'image (qui représente donc un menu sur la gauche de l'écran) est assez large, et redimenssionnable
- il paraît que le site sera utilisé sur des écrans en 1024x768, mais ça, je m'en méfie comme de la vérole sur le bas-clergé breton (comme dirait ma grand'mère !)

Pensez-vous que ce soit réalisable ? Mes collègues, dépités, m'ont déjà dit "oh la la, qu'est-ce que tu nous fais avec tes CSS, on fait un tableau et c'est reglé !"... ahem.

Bonsoir,
sans rentrer dans des considérations d'accesssibilité (puisque manifestement
c'est une sorte d'intranet si j'ai bien compris), il faut déjà:
> éviter les <li> qui sont inadaptés
> créer 2 div (collonnes) en float:left dimensionnées en largeur
> un display:block pour les <label> de cette page pour placer l'input dessous
et leur ajouter une marge haute.
donc a priori pas de difficulté particulière...
Modifié par Hermann (24 Apr 2007 - 22:48)

Hermann a écrit :
> créer 2 div (collonnes) en float:left dimensionnées en largeur

Bof, pas terrible. On voit bien à lire les labels des champs de saisie que la lecture doit se faire ligne par ligne. Couper ça en deux blocs (colonnes), c'est pas terrible. Pour le coup, un tableau (6 cellules ici, pas une de plus...) serait tout à fait adapté.

Si on veut absolument se passer des tableaux pour ce cas précis (pourquoi donc, d'ailleurs, à part pour le « ouais je l'ai fais sans tableau » ?), il faut veiller à garder un ordre de lecture correct.

Quelque chose de jouable :

[b]HTML :[/b]
<div class="ligne">
<p class="premier">
	<label for="form-code">Code machin :</label>
	<input type="text" name="code" id="form-code" />
</p>
<p class="second">
	<label for="form-libelle">Libellé machin :</label>
	<input type="text" name="libelle" id="form-libelle" />
</p>
</div>

<div class="ligne">
...
</div>

[b]CSS :[/b]
div.ligne {
	width: 100%; /* Utile uniquement pour IE, pour émuler un contexte de formatage via le HasLayout */
	overflow: hidden;
}
div.ligne p.premier {
	width: 45%;
	float: left;
}
div.ligne p.second {
	margin-left: 50%;
}
div.ligne p label {
	display: block;
}

Quelque chose du genre. Ça a l'avantage d'avoir plus de souplesse qu'un tableau (on peut passer le formulaire sur une seule colonne si souhaité... pas sur trois, par contre, on reste tributaire de la structure choisie). Par contre, c'est peut-être un peu plus subtil à mettre en place niveau CSS. Le width: 100% pour IE6 et inférieurs par exemple serait à adresser à ce navigateur via un commentaire conditionnel.

Bref, si on patauge un peu dans la semoule avec ce genre de subtilité, un tableau ira très bien. On s'assurera juste :
- de ne pas faire des lignes ou cellules vides juste pour de la mise en forme (cas typique : plutôt que de réfléchir une seule seconde à l'utilisation des margin et padding, on crée une ligne de tableau vide pour séparer deux lignes de quelques pixels...) ;
- de faire des tableaux linéarisables, où les informations qui vont à la suite les unes des autres ne se retrouvent pas séparées par la structure (mettre le label sur une ligne et l'input sur la ligne suivante serait une bêtise, par exemple) ;
- de bien penser à faire des formulaires accessibles, avec labels explicites, utilisation cohérente des fieldset si besoin, etc.
Modifié par Florent V. (25 Apr 2007 - 00:45)

Merci à vous deux pour vos avis !

Florent, tu ne crois pas si bien dire quand tu dis que pour six champs, il faut six cellules : un de mes collègues pensait déjà séparer chaque label de chaque input, ce qui doublait le nombre de cellules...

Je ne pense pas qu'il y ait besoin de fieldset par la suite, mais je peux me tromper. En revanch,e l'utilisation de label est très pratique, et c'est de tout façon déjà le cas !

Je vais donc utiliser un tableau, et vérifier que l'ordre du focus est bien respecté !

Merci !

Florent V. a écrit :

Bof, pas terrible. On voit bien à lire les labels des champs de saisie que la lecture doit se faire ligne par ligne. Couper ça en deux blocs (colonnes), c'est pas terrible. Pour le coup, un tableau (6 cellules ici, pas une de plus...) serait tout à fait adapté.

Salut,
j'ai bien dit sans rentrer dans des considérations d'accessibilité
Ceci dit ta structure est plus interessante en therme d'ergonomie puisque
l'ordre de tabulations suit la logique de lecture horizontale, mais à mon avis
elle est un peu compliquée à manipuler pour un débutant.

ePierre a écrit :

Je vais donc utiliser un tableau, et vérifier que l'ordre du focus est bien respecté !

Oui ça sera plus simple.
Modifié par Hermann (25 Apr 2007 - 10:07)