{"id":2132,"date":"2004-05-13T09:26:05","date_gmt":"2004-05-13T09:26:05","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=2132"},"modified":"2004-05-13T09:26:05","modified_gmt":"2004-05-13T09:26:05","slug":"105-formulaires-et-css","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/105-formulaires-et-css\/","title":{"rendered":"Formulaires et CSS"},"content":{"rendered":"

Les tableaux c’\u00e9tait bien pratique avant que l’on ne se rende compte de l’erreur qu’est leur utilisation pour la mise en page. <\/p>\n

Depuis, on a trouv\u00e9 des solutions bas\u00e9es sur CSS pour faire des layouts \u00e0 2 ou 3 colonnes, imiter des frames, et plein d’autres choses hypercr\u00e9atives. Mais comment faire lorsqu’il s’agit de pr\u00e9senter un formulaire? Fastclemmy donne plusieurs solutions<\/a> \u00e0 travers une liste de liens appropri\u00e9s.<\/p>\n

<\/p>\n

Si cela int\u00e9resse quelqu’un, je vais pr\u00e9senter la m\u00e9thode que j’utilise souvent pour mes formulaires. <\/p>\n

La structure<\/h3>\n

Tout d’abord, voyons comment se d\u00e9finit un formulaire: <\/p>\n

 <form action=\"...\">   <p>     <label for=\"nom\">       Nom : <input type=\"text\" id=\"nom\" \/>     <\/label>     <label for=\"prenom\">       Prenom : <input type=\"text\" id=\"prenom\" \/>     <\/label>     <label for=\"age\">       Âge : <input type=\"text\" id=\"age\" \/>     <\/label>   <\/p> <\/form> <\/pre>\n
 Ce qu’il faut remarquer, c’est que les champs (<input><\/code>) sont imbriqu\u00e9s dans leur \u00e9tiquette (<label><\/code>) correspondante. <\/p>\n
La pr\u00e9sentation<\/h3>\n
 Ensuite, pour imiter un tableau, il suffit d’appliquer quelques r\u00e8gles CSS toutes simples. <\/p>\n
 label{   position: relative;   display: block;   width: 15em;   height: 1.4em; } input{   position: absolute;   left: 6em; } <\/pre>\n
 Le but est simple: afficher les <label><\/code> en tant que blocs et positionner les champs par rapport \u00e0 ceux-ci. <\/p>\n
Le r\u00e9sultat<\/h3>\n
 On obtient un formulaire dont les champs sont align\u00e9s sur leur c\u00f4t\u00e9 droit. <\/p>\n
\n
     
Pour le moment cette technique me convient assez, mais si vous en connaissez d’autres, n’h\u00e9sitez pas \u00e0 la proposer en commentaire!<\/p>\n","protected":false},"excerpt":{"rendered":"
 Les tableaux c’\u00e9tait bien pratique avant que l’on ne se rende compte de l’erreur qu’est leur utilisation pour la mise en page. <\/p>\n
Depuis, on a trouv\u00e9 des solutions bas\u00e9es sur CSS pour faire des layouts \u00e0 2 ou 3 colonnes, imiter des frames, et plein d’autres choses hypercr\u00e9atives. Mais comment faire lorsqu’il s’agit de pr\u00e9senter un formulaire? Fastclemmy donne plusieurs solutions<\/a> \u00e0 travers une liste de liens appropri\u00e9s.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2132"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=2132"}],"version-history":[{"count":0,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2132\/revisions"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=2132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=2132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=2132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}