5568 sujets

Sémantique web et HTML

Bien disposer les éléments d'un formulaire

Bonjour,

N'étant pas intégrateur de métier, je suis confronté maintenant sur quelles balises HTML utiliser pour bien organiser un formulaire de recherche à multiple critère ainsi qu'un formulaire de contact!
Avant, je n'avais pas à se soucier du design donc j'utilise juste des input et des <br> pour les mettre à la ligne.

Là, je dois bien les organiser car les libellés devant les input ont par exemple des longueurs différentes.
En scrutant les html de formulaires existants sur différents sites, il y a ceux qui utilise des <form><fieldset>...</fieldset></form>. Pourquoi ce fieldset?
Il y a ceux qui abusent beaucoup de <div>!

Que choisir? Un conseil svp!
Salut,

Un bon choix sémantique c'est toujours une très bonne initiative (comme tu le dit, certains abusent du div), mais la mise en forme se fera principalement grâce au code CSS.

Les fieldset, comme leur nom l'indiquent ont pour vocation de grouper des champs dans un formulaire, tu peut leur appliquer la balise legend qui leur donne une etiquette.

Il existe également les balises label, qui sont des etiquettes pour les champs et permettent également de simuler un clic sur le champ quand on clic sur le texte qu'ils contiennent (avec l'attribut for ou en incluant le champ dans le label).


<form action="" method="POST">
  <fieldset>
     <legend>Mon fieldset 1</fieldset>
     <label for="input1">Mon premier champ:</label><input name="input1" type="text" />
     <label><input type="checkbox" name="checkbox1" />Si on clic sur le texte la checkbox se coche</label>
  </fieldset>
</form>


un peu de CSS par dessus tout ça et ça roule.

Une pratique courrante est de passer les label en display: block; float: left; et de leur donner une largeur, comme ça tes étiquettes ont toutes la même largeur et tes champs sont alignés.
Modifié par JJK801 (25 Oct 2012 - 17:19)
JJK801 a écrit :
Une pratique courrante est de passer les label en display: block; float: left; et de leur donner une largeur, comme ça tes étiquettes ont toutes la même largeur et tes champs sont alignés.


C'est effectivement cela que je cherche: que tout est bien aligné!
Salut,
JJK801 a écrit :
Une pratique courrante est de passer les label en display: block; float: left; et de leur donner une largeur, comme ça tes étiquettes ont toutes la même largeur et tes champs sont alignés.

Encore un qui ne connaît pas (ou feint de ne pas connaître) display: inline-block (qui marche très sur les éléments label, y compris sous IE 6). Smiley cligne

Quant au couple fieldset / legend, il est effectivement tout indiqué pour regrouper des champs. Cela dit, s'il n'y a qu'un seul regroupement de champs dans le formulaire, il n'est pas nécessaire.
En fait, avant j'utilisais toujours un tableau pour bien disposer les éléments: le label dans un <td> et l'input dans l'autres <td>. Beaucoup trouverait cela vieux jeu donc je cherche un moyen plus moderne.

Je suis également sous Twitter Bootstrap actuellement, c'est pour ça également
Tu peux grouper chaque couple label et input dans un <p> (voir mon site). Smiley cligne
Modifié par Patidou (26 Oct 2012 - 07:05)
Victor BRITO a écrit :
Encore un qui ne connaît pas (ou feint de ne pas connaître) display: inline-block (qui marche très sur les éléments label, y compris sous IE 6). Smiley cligne


C'est pas bien de se moquer des traumatisme des gens Smiley langue , celas dit tu as raison, ce positionnement m'a posé tellement de problèmes que je ne l'utilise plus du tout.
Sujet clos
Aller à