Après être entré sur eYou.com, j'ai immédiatement dû convertir la nouvelle version de l'interface de messagerie en XHTML+CSS. Heureusement, mes compétences de base sont encore suffisamment solides, je l'ai donc fait de manière ordonnée. Bien sûr, vous rencontrerez de nouveaux problèmes. Par exemple, lorsque vous créez habituellement des pages Web, vous utilisez rarement des formulaires car vous n’avez aucune expérience avec les programmes. Heureusement, le monde a encore Google, ce qui me permet de relever facilement de nouveaux défis. Écrivez quelques expériences et partagez-les avec tout le monde.
Sur la base de considérations d'accessibilité, la manière standard d'écrire un formulaire doit inclure un ensemble de champs et une légende (description) dans <form> et </form> pour permettre aux utilisateurs de comprendre le résumé du champ du formulaire. La structure simple est la suivante :
| Voici le contenu cité : <formulaire> <ensemble de champs> <légende></légende> ... </fieldset> </form> |
Dans certains cas, vous ne souhaiterez peut-être pas que l'ensemble de champs et la légende affectent l'esthétique de votre conception. Il suffit de définir la bordure de l'ensemble de champs sur 0 et l'affichage de la légende sur aucun en CSS.
Dans la plupart des cas, la présentation du formulaire est divisée en deux colonnes, avec le libellé à gauche et la zone de saisie (input type="text"...) à droite. Avec une disposition aussi simple à deux colonnes, je déconseille fortement d’utiliser des tableaux. Référence http://stylephreak.frogrun.com/uploads/source/cssform.php et http://www.aplus.co.yu/css/forms/?css=1 (deux références vraiment précieuses, vous ne le savez déjà pas) Pas besoin de lire plus loin), nous avons constaté que la solution courante pour les standards Web consiste à ajouter un div autour de l'étiquette et à saisir type="text"..., et à définir l'affichage du div pour qu'il soit bloqué. Définissez l'étiquette sur float: left; (c'est aussi la raison pour laquelle le div est défini sur display: block;), puis l'étiquette peut être placée sur la même ligne que la zone de saisie. Une petite astuce pour aligner les étiquettes consiste à fixer la largeur de l'étiquette, puis à utiliser text-align pour l'aligner à gauche ou à droite selon les besoins. Une astuce pour définir la largeur consiste à utiliser l'unité em pour définir la largeur en fonction du nombre maximum de mots de la balise, sans avoir à tester laborieusement px.
Pour rendre mon explication plus facile à comprendre, j'écris simplement du code :
| Voici le contenu cité : XHTML : (partiel) <formulaire> body {/*Cela n'a rien à voir avec le formulaire, définissez l'effet d'affichage de la page*/ |