Hello, je suis tout neuf en HTML et je suis entrain de me créer un formulaire.. seulement voilà, comment aligner mes champs vides? J'ai essayé avec les espaces etc et ça ne donne rien.... qui a une solution Miracle? Voici la page en question http://www.radicaux-versoix.ch/contact.html Merci par avance de votre aide.

salut essaie de mettre des espaces, dand le code avant titre dans cet exemple: <font color="#0000CC"> Titre :</font> <input type="text" name="titre" size="30" maxlength="35"><br>

Salut, En utilisant la balise <label> et en lui donnant une propriété float:left et text-align:left (ou right). Regarde ici : http://www.fredcavazza.net/doc/tutoriels/formulaire/SVF_etape3.htm Jette un oeil sur le code source et sur la feuille de style. J'ai d'autres références, mais en anglais... Édité : http://forum.alsacreations.com/faq/#item49

Modifié par elle le 18/09/2006 19:28

Salut, Mets simplement ton formulaire dans un tableau sur 2 colonnes et le probleme est réglé en 10 secondes :) A++ Oliv

Sauf qu'en principe, les tableaux ne sont pas destinés à cet usage...

les tableaux ne sont pas destinés à un usage particulier Oliv

Désolée de te contredire, mais les tableaux sont justement destinés à présenter des données tabulaires...

Désolé de te contredire aussi, tu dois être débutante. J'ai crée de nombreux sitse et ce sans aucuns logiciels de programmation comme ceux que je vois conseillé dans certains posts. Prends le temps de regarder la source des sites que tu visites et tu verras que les tableaux sont utilisés dans tous les cas... Oliv

Ah! oui, c'est vrai, je débute depuis six ans. Créer des sites avec des tableaux, c'est évidemment possible (mon vieux site en contient d'ailleurs), mais pas nécessairement souhaitable. Les tableaux ne devraient plus servir à la mise en forme. http://forum.alsacreations.com/faq/#item49 Le lien que je cherchais tantôt : [url="http://www.cybercodeur.net/weblog/presentations/seybold/index.html"]En quoi la mise en page par tableaux est-elle stupide : problématique définie, solutions offertes[/url] On ne doit pas visiter le même genre de sites...

Modifié par elle le 18/09/2006 19:26

Toujours cette vielle discution entre "puriste" et les gens plus "pragmatiques"... Moi, j'ai commencé comme bcp, par faire des tableaux pour les mises en forme. Mais il est vrai que le CSS est nettement meilleurs pour faire une mise en page précise... il est aussi plus compliqué. Alors à toi de voir... Sinon pour que les espaces soient à coup sûre pris en compte (si t'en mets plusieurs à la suite) tu dois les remplacer dans le code par le petit bout de code suivant :

Loupirotof débute... Pourquoi prendre de mauvais plis? La mise en forme par CSS paraît plus compliquée surtout pour ceux et celles qui ont commencé avec les tableaux et qui doivent se défaire des habitudes acquises. J'en sais quelque chose.

Salut, J'adhère completement à l'opinion de Elle… Pour ton malheur, et avant de tirer des conclusion hatives, tu devrais prendre la peine de vérifier à qui tu t'adresses. Par exemple, en regardant déjà le nombre de posts, et en essayant de voir ce qu'ils contenaient… Il se fait que Elle ([hello]) a débuté… il y a six ans, ainsi qu'elle l'a écrit, et qu'elle a écrit beaucoup plus de posts pour essayer (et bien souvent réussir) à aider les gens que pour poser des questions… Il est possible de créer une mise en forme avec des tableaux, mais il est aussi possible de tailler ses haies avec une pince à ongles… Il ne s'agit meme pas d'un débat "puristes VS pragmatique", il s'agit simplement d'une question de sémantique et d'une question d'accessibilité (tous les visiteurs n'ont pas *forcément* une vue évaluée à 10/10, ni le dernier plugin flash, ni meme *forcément* un navigateur "graphique"). Pour te convaincre des méfaits de l'utilisation des tableaux pour la mise en forme, trouve toi n'importe quel synthétiseur vocal, et essaye de suivre grace à lui un site qui utilise les tableaux pour la mise en forme… Les logiciels que tu sembles décrier (à tord ou à raison, je ne vais pas émettre d'opinion là dessus, car ce n'est pas le débat) ont, de par leur évolution, justement commencé à s'intéresser un peu plus à la sémantique des balises pour fournir un code plus correct… Ceci dit, il ne faut jamais oublier non plus que tout programme n'a jamais l'intelligence que son créateur a voulu/su lui donner. Je voudrais simplement rappeler, enfin, qu'un an d'évolution en informatique représente généralement dix ans d'évolution "dans la vie courrante" (qu'il suffise de voir les capacités des ordinateurs "vieux" d'à peine trois ans comparées à celles des ordinateurs actuels)… L'évolution de l'internet est dans la meme veine, et, tout comme l'utilisation de frames, monnaie courrante avant l'an 2000, a été dépréciée et est tombée en désuetude depuis, l'utilisation de tableau a, à tord, été prônée par des gens qui se sont institués "professionnel", sans avoir compris les autres mécanismes, et est tout aussi dépréciée depuis… L'idée générale actuelle (et recommandée depuis de nombreuses années par le W3C), c'est de séparer clairement les informations de mise en page des informations de contenu… Chose impossible à mettre en oeuvre si on utilise les tableaux pour la mise en forme… Par contre, l'utilisation correcte des CSS permet, comme sur mon site, une mise ne page parfaite, sans le moindre recours au "javascript gadget", et permettant meme une impression qui ne contienne que ce qui intéresse le visiteur (donc, sans baniere, sans menu ni rien… juste le texte et les grapiques quand ils sont nécessaires) Qu'il te suffise d'aller sur mon site (lien en signature), et de demander l'appercu avant impression pour t'en convaincre… Bien sur, quand on a pris l'habitude de gérer la mise ne page avec les tableaux, il est difficile de faire la transition en "tout css", mais, la encore, je rejoint Elle, si l'on prend directement les bonnes habitudes, l'apprentissage n'est guere plus compliqué…

[hello] koala01, Tu te fais rare... [clindoeil]

Ben j'ai eu de gros problèmes de PC… Et du coup, tu en as profité pour me dépasser en nombre de post[feroce][bigsmile][bigsmile]

Ce n'est pas une raison [clindoeil]: j'ai passé un mois sans ordi au début de l'été... Contente de te revoir. [bierre]

Modifié par elle le 20/09/2006 04:19

Salut à tous[hello] Salut Elle[hello] Salut Koala[hello] Juste pour vous dire que je suis la preuve vivante qu'une débutante peux très bien faire des tableaux sans utiliser les tableaux.[clindoeil] Je ne connais rien de rien aux tableaux et j'ai utilisé la css. De plus avec la css tu fais vraiment le look de tableaux que tu veux sans que ce soit lourd. J'ai également viré tous les tableaux qui étaient dans les scripts de formulaire que j'ai trouvé sur le web. Il a été même plus facile de placer où je voulais des formulaires sans tableaux qu'avec des tableaux (sous Opéra entre autre les fichus tableaux dans les formulaires ne voulaient pas se placer où je voulais donc je les ai viré et problèmes résolus). Alors même pour les débutants comme moi il est facile de faire des tableaux sans tableaux et plus jolis en plus![bigsmile] Pour voir le résultat il faudra attendre la sortie de ma nouvelle version de Mon annuaire de recettes![clindoeil] Patience! Patience! Ça viendra![langue] Bonne soirée[fleur]

Mouais... un peu stérile tout cela. Moi, je suis effectivement de la vieille école, et ce bien que je sois toujours dans l'année de mes 25 ans... Comme quoi, c'est pa sune question d'âge. Le débat <table> VS CSS était interessant, notamment grâce au pavé de Koala. Cependant, j'ai l'impression que vous avez laissé not' ptit gars sur sa faim... Pourquoi ne pas lui exposer quelques bases de CSS (ca m'aurait d'ailleurs vraiment interessé) J'ai beau voir sur le site proposé par L, pour un débutant, ca fait un peu léger, disons que cela ne donne pas des bases tres solides... Bon, c'est pas le tout de vous critiquer car vous ne lui avez pas apporté la réponse, à moi d'apporter ma pierre à l'édifice : La bonne vieille méthode de ma grand mère est la suivante: LES TABLEAUX. alors ca fait un peu barbare, mais en gros : un tableau commence par la balise <table> une ligne par la balise <tr> une colonne par la balise <td> Ce qui fait pour un tableau de 2 lignes sur 3 colonnes: [code] <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> [/code] Dommage qu'on ne puisse pas mettre de tabulations sur ce forum Donc, pour ton problème cher Loupirotof, Il te faut un tableau de 6 lignes sur deux colonnes soit: [code] <table> <tr> <td>Nom</td> <td><INPUT TYPE ="text" NAME="Nom" VALUE=""></td> </tr> <tr> <td>Prenom</td> <td><INPUT TYPE ="text" NAME="Prenom" VALUE=""></td> </tr> <tr> <td>Adresse</td> <td><INPUT TYPE ="text" NAME="Adresse" VALUE=""></td> </tr> <tr> <td>Code postal + Lieu</td> <td><INPUT TYPE ="text" NAME="lieu" VALUE=""></td> </tr> <tr> <td>telephone</td> <td><INPUT TYPE ="text" NAME="Téléphone" VALUE=""></td> </tr> <tr> <td>E-mail</td> <td><INPUT TYPE ="text" NAME="Email" VALUE=""></td> </tr> </table> [/code] Pour faire un peu moins de rétention d'informations ;o) tu peux utiliser l'attribut align et les parametres left et right dans les balises <td> soit : [code]<td align="right">Prenom</td>[/code] Ce qui te permettra d'obtenir les noms de tes champs de formulaire tous alignés à droite, juste à coté des champs. Je te laisse sur ceq quelques pistes explorer les possibilités des tableaux. Si un as du CSS passe dans le coin, j'attends sa métode avec impatience. A vot'bon coeur!

Et donc, pour donner le code sous forme de CSS: [code]<style type="text/css"> <!-- label { white-space: normal; width: 300px; clear: none; float: left; } --> </style>[/code] et le formulaire [code] <form name="form1" method="post" action=""> <label>votre nom</label> <input type="text"> <br> <label>votre prenom</label> <input type="texte"> </form> [/code] Plus léger, non? A adapter au besoins, cela va de soi [clindoeil]

Modifié par koala01 le 20/09/2006 17:11

Voilà ma façon de faire sans tableaux pour un de mes formulaires [code]<br><br><br><a name="formulaire"></a> <div align="left" style="margin-left:15px; "> <? if($ok_mail=="true"){ ?> <span class='txtform' style="text-align:center; ">Le message ci-dessous m'a bien été transmis, et je vous en remercie.</span> <p> </p> <p class="confirmation"><?echo nl2br(stripslashes($corps));?></p><br> <span class='txtform' style="text-align:center; ">Je vais y donner suite dans les meilleurs délais.<br><br>A bientôt.<br><br></span> <? }else{ ?> <form action='<? echo $PHP_SELF ?>' method='post' name='Form'> <? if($erreur){ ?><span class='txterror' style="text-align:center; "><font color='red'><b> ERREUR, votre message n'a pas été transmis<br><br></b></font></span><ul id="conlist"><?echo$erreur?></ul><?}?> <span class='txterror' style="text-align:center; ">Les champs marqué d'un * sont obligatoires</span><br><br> <span class='txtform'>Votre nom ou speudo * :</span><input type='text' style=' margin-left: 38px; width:200 <?if($errf_1==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_1' value='<?echo stripslashes($f_1);?>' size='24' border='0' class='mess3' ><br><br> <span class='txtform'>Votre pays, ville ou région :</span><input type='text' style=' margin-left:15px; width:200 <?if($errf_2==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_2' value='<?echo stripslashes($f_2);?>' size='24' border='0' class='mess3'><br><br> <span class='txtform'>Votre adresse email * :</span><input type='text' style=' margin-left:45px; width:200 <?if($errf_3==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_3' value='<?echo stripslashes($f_3);?>' size='24' border='0' class='mess3'><br><br> <span class='txtform'>Adresse de votre site :</span><input type='text' style=' margin-left:46px; width:200 <?if($errf_4==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_4' value='<?if($submit){echo stripslashes($f_4);}else{print("http://");}?>' size='24' border='0' class='mess3'><br><br> <span class='txtform'>Le sujet * :</span><input type='text' style=' margin-left:120px; width:200 <?if($errf_5==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_5' value='<?echo stripslashes($f_5);?>' size='24' border='0' class='mess3'><br><br> <span class='txtform' style="vertical-align:top; ">Votre message * :</span><textarea style=' margin-left:30px; width:200 <?if($errf_6==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_6' rows='10' cols='30' class='textarea'><?echo$f_6?></textarea> <br> <form action="verifier.php" method="post"> Recopier le code:<input type="text" name="code" style='margin-left:95px;'><br><br> <div style="margin-left:210px;"> <?php dsp_crypt(0,1); ?></div> <br><br> <input type="submit" name="submit" value="Envoyer" border='0' style='margin-left:240px;' class='bouton' onmouseover="this.className='bouton-on'" onmouseout="this.className='bouton-off'"> <br><br>[/code] [img]http://img79.imageshack.us/img79/4913/screenshot025my6.jpg[/img] Bonne journée [fleur]

C'est clair! cependant, tu joues un peu le malhonnete, car tu n'as affiché que deux des lignes, donc tout de suite, ca fait moins lourd ;o). Cependant, peux tu développer stp? Je pense qu'il doit y avoir un appel de la feuille CSS dans le document principal non? Comment cela se passe-t-il? EDIT Oup's on s'est téléscopé avec Fleuretta. Donc, si j'ai bien compris, Koala stocke son CSS dans un coin, le contenu dans l'autre, plus propre pour les mises à jour et Fleuretta tout dans la même feuille. C'est bien cela? Je teste ces methodes de suite. Ca me fait penser... Au debut de la lecture du post, je me suis dis "pffft n'importe quoi, le mieux, c'est les tableaux". Mais en me promenant sur internet, MERDE! DIX TRAINS DE RETARD, pleins de sites sont en CSS. Bon, ben faut que je m'y mette quoi... Merci à vous!

Modifié par Dyonisos le 20/09/2006 17:18

j'ai "simplement" divisé le code pour que les gens comprennent ce que je veux dire... Voici ce que cela pourrait donner dans une page complete [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Document sans nom</title> <style type="text/css"> <!-- label { width: 300px; clear: none; float: left; } .droit{text-align:right} --> </style> </head> <body> <form name="form1" method="post" action=""> <p> <label>votre nom</label> <input type="text"> </p> <p> <label>votre prenom</label> <input type="texte"> </p> <p> <label class="droit"><input type="submit"></label> <label><input type="reset"></label> </p> </form> </body> </html> [/code] ou, en utilisant les CSS et non les styles dans la page elle-meme, ce qui permet de récupérer le style pour un autre formulaire: style.css [code] label { width: 300px; clear: none; float: left; } .droit{text-align:right} [/code] page.htm [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Document sans nom</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <form name="form1" method="post" action=""> <p> <label>votre nom</label> <input type="text"> </p> <p> <label>votre prenom</label> <input type="texte"> </p> <p> <label class="droit"><input type="submit"></label> <label><input type="reset"></label> </p> </form> </body> </html> [/code] De telle manière, on ne me traitera plus de partialité [clindoeil] EDIT: modification de la mise en forme des codes

Modifié par koala01 le 20/09/2006 17:30

Ma réponse était pourtant très claire : http://forum.alsacreations.com/faq/#item49 Il y avait même des modèles déjà tout faits...

Koala>Ok, je planche dessus et te remercie. Elle>Mouais enfin ton premier lien c'était ca: http://www.fredcavazza.net/doc/tutoriels/formulaire/SVF_etape3.htm et perso, je trouve cela un peu déroutant pour un novice. Et puis un exemple adapté permet aux débutants de s'initier... Mais ca, c'est que mon avis...

Ceci dit, c'est vrai que alsacreations, c'est un site génial, mais, qu'il est parfois difficile à suivre quand on débute en CSS [clindoeil]

Vrai pour Alsacréations, mais pas pour tous les liens vers lesquels il dirigeait... Celui-ci, par exemple : http://www.guiderdoni.net/Un-formulaire-en-pur-CSS.html

Modifié par elle le 20/09/2006 17:40

Il suffisait de cliquer sur "étape précédente" jusqu'à arriver au début de l'explication... [clindoeil]

Oh, ne te méprend pas… Ce n'était nullement une attaque, ni dirigée contre toi, ni dirigée contre alsacreations… C'était juste un avis qui tentait d'etre honnête [clindoeil]

Je sais, je suis entièrement d'accord avec toi : Alsacréations est assez hermétique et ce n'est pas avec ce site que j'ai appris. C'est en étudiant les codes sources et sur des sites anglophones, dont notamment [url="http://www.wpdfd.com/"]WPDFD[/url].

… Et tu avais oublié que la fainéantise naturelle des gens, surtout quand ils croient tout savoir ou qu'ils débutent, les incite à ne meme pas suivre un lien, si on ne leur fournit pas directement le lien qui répond à leur demande sans doute [question][bigsmile]

Modifié par koala01 le 20/09/2006 18:10

Il faut croire que je suis assez naïve pour penser que ça peut changer... [langue] Heureusement, il y a des exceptions. [bigsmile]

Modifié par elle le 20/09/2006 18:15

C'est pour cela que j'ai dit que tu l'avais oublié [clindoeil] Au fait, t'as vu[question] notre (léger) HS t'a porté à passer les 6000 messages… [fete][bierre][birthday]

Bof.... Quantité n'est pas gage de qualité, du moins en ce domaine. [clindoeil] Je te remercie de l'avoir noté [chinois], mais je n'y attache pas beaucoup d'importance (je vais quand même prendre la bière [bigsmile]).

Un excellent site pour voir les differences de mises en page rien qu'en changeant la feuille de style. En plus, la page html et une ébauche de feuille css sont à disposition en téléxhargement! le p'tit soucis pour nous les francophones, c'est qu'il est en anglais, mais bon, on s'y fait... En tous cas, c'est à voir, ne serait ce que pour ce rendre compte de la difference que peut apporter la seule feuille css. Bon, la plus part des pages sont réalisées par des graphistes confirmés, mais vraiment, si vous ne connaissez pas, c'est à voir ! http://www.csszengarden.com/

Bonjour papyboingtown Ton lien est bluffant. Je commence à entr'apercevoir le potentiel du CSS. J'allais droit dans le mur avec mes tableaux... Sinon Loupirotof, si tu passes dans le coin, vu les passions que tu as déclenché, ce serait sympa de nous dire quelle méthode tu vas utiliser, pour voir comment un non initié percoit le débat. @+

Quand on te le disait [bigsmile] (personnellement, j'aimerais une réaction de olivier7500, qui semblait "si sur de lui", mais bon, on l'a sans doute dégouté [clindoeil])

ben c'est vrai qu'à mes débuts en info, tout ce qui était nouveau était de la merde. La peur de l'inconnu, et la vieille tradition française à pas trop aimer le changement (Cf pub Renault : Ca ne marchera jamais). Mais dans nos boulots, si on ne se remet pas perpetuellement en question, ben on stagne, et comme tu le disais stagner un an, c'est prendre 10 ans de retard. Pour la défense d'Olivier7500, faut dire qu'il y a beaucoup de tableaux encore sur internet, et mon prmeier réflexe a été de consulter ton site, et celui de Elle en me disant, pffft, ils doivent faire comme tout le monde, avec des tableaux, mais là stupeur! plus de tableau, et une mise en page tres précise. Donc, remise en question et hop! j'en oublie mon dev actuel (recupération de variables en php) auquel je n'ai pas eu le temps de répondre hier car trop pris par le CSS. Et pour se persuader de l'existence des tableaux, Affichage/Source sur le site de PC Astuces et le résultat est probant. Il tend même à prouver que les tableaux ne sont pas réservés à la présentation de données tabulaires. Par contre je ne contredirais pas que les tableaux ne sont plus destinés à mettre en forme. Pour terminer, il est vrai qu'une réaction des premiers protagonistes de cette discussion fleuve permettrait de clore le débat...