Salut,

essaie avec ces codes.
html :

<form action="#">
	<fieldset>
		<legend>le voyage que j'aimerai faire</legend>
		<p>aujourd'hui
			<br />
			<input type="radio" id="aujourdhui1" name="aujourdhui" value="usa" />
			<label for="aujourdhui1">USA</label>

			<input type="radio" id="aujourdhui2" name="aujourdhui" value="chine" />
			<label for="aujourdhui2">CHINE</label>

			<input type="radio" id="aujourdhui3" name="aujourdhui" value="japon" />
			<label for="aujourdhui3">JAPON</label>

			<input type="radio" id="aujourdhui4" name="aujourdhui" value="laos" />
			<label for="aujourdhui4">LAOS</label>

			<input type="radio" id="aujourdhui5" name="aujourdhui" value="australie" />
			<label for="aujourdhui5">AUSTRALIE</label>
		</p>
		<p>l'année prochaine
			<br />
			<input type="radio" id="annee1" name="annee" value="usa" />
			<label for="annee1">USA</label>

			<input type="radio" id="annee2" name="annee" value="chine" />
			<label for="annee2">CHINE</label>

			<input type="radio" id="annee3" name="annee" value="japon" />
			<label for="annee3">JAPON</label>

			<input type="radio" id="annee4" name="annee" value="laos" />
			<label for="annee4">LAOS</label>

			<input type="radio" id="annee5" name="annee" value="australie" />
			<label for="aujourdhui5">AUSTRALIE</label>
		</p>
		<p>si j'avais les moyens
			<br />
			<input type="radio" id="moyens1" name="moyens" value="usa" />
			<label for="moyens1">USA</label>

			<input type="radio" id="moyens2" name="moyens" value="chine" />
			<label for="moyens2">CHINE</label>

			<input type="radio" id="moyens3" name="moyens" value="japon" />
			<label for="moyens3">JAPON</label>

			<input type="radio" id="moyens4" name="moyens" value="laos" />
			<label for="moyens4">LAOS</label>

			<input type="radio" id="moyens5" name="moyens" value="australie" />
			<label for="aujourdhui5">AUSTRALIE</label>
		</p>
		<p>si je gagnais au loto
			<br />
			<input type="radio" id="loto1" name="loto" value="usa" />
			<label for="loto1">USA</label>

			<input type="radio" id="loto2" name="loto" value="chine" />
			<label for="loto2">CHINE</label>

			<input type="radio" id="loto3" name="loto" value="japon" />
			<label for="loto3">JAPON</label>

			<input type="radio" id="loto4" name="loto" value="laos" />
			<label for="loto4">LAOS</label>

			<input type="radio" id="loto5" name="loto" value="australie" />
			<label for="loto5">AUSTRALIE</label>
		</p>
	</fieldset>
</form>

form p
{
width:25%;
float:left;
}
form p input
{
float:left;
clear:left;
}
form p label
{
float:left;
}

Il y a surement des pandas pour ne dépendre de rien

Re,

en vrai, c'est plus pratique…
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Merci Dalida pour ton aide précieuse !

j'ai essayé, c'est déjà beaucoup mieux que mes tentatives désastreuses avec tableau......au moins je peux avancer dans la consrruction de mon questionnaire !

pourtant, j'ai encore quelques questions de mise en forme ....
comment ferais-tu pour ne pas répéter les choix au niveau de cahaque lignes....je m'explique, dans mon exemple je suis obligée de répéter chaque fois les destinations possibles, d'où mon idée initiale de tableau pour mettre les choix en en tête, les boutons à cocher en colonnes dessous et correspondants aux différentes lignes (aujourd'hui, demain, dans un an, si je gagne au loto...)
autre chose, comment faire afficher le texte à gauche d'un bouton radio et non à droite ?
au fait, j'ai conservé ton script CSS, je ne comprends pas grand chose pour l'instant, mais çà doit servir, c'est certain....

je progresse lentement mais sûrement, si tu as des tuyaux sur des scripts (essentiellement HTML au départ....sinon je ne comprends plus grand chose !! je débute...) je prends, surtout sur des formulaires et/ou quetsionnaires un peu complexes (mise en forme, insertion diverses, traitement php et mysql....)

merci encore

Configuration: Windows XP
Internet Explorer 6.0

Salut,

"d'où mon idée initiale de tableau pour mettre les choix en en tête, les boutons à cocher en colonnes dessous et correspondants aux différentes lignes"
sémantiquement je pense que tu es obligé de passer par un tableau et pour le mise en page ce sera plus simple.

"comment faire afficher le texte à gauche d'un bouton radio et non à droite ?"
il faut mettre '<label>' avant '<input>'.
si j'ai utilisé les '<label>' c'est parce qu'ils rendent le texte actif (tu peux cliquer sur le texte pour cocher le radio).

"çà doit servir, c'est certain.... "
ça ne sert qu'à la mise en page !
-;o)

pour les formulaires je crois qu'il n'y a pas trop de secrets.
tout peut être mis en page avec CSS, sauf les balises rebelles comme '<input type="file" />'.
pour la mise en page, je pense qu'il ne faut pas hésiter à s'inspirer des grands sites quand ils te plaisent.
il faut favoriser au maximum l'ergonomie et ne pas hésiter à ajouter de l'aide pour l'utilisateur.
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Merci à toi......ton aide et tes conseils sont précieux......pour un pauvre "petit scarabé" que je suis dans la jungle du web (j'aimais bien la série Kung Fu quand j'étais gamine...il y a un moment déjà !) !!!

je vais suivre tes conseils et merci pour les "tuyaux".....
j'espère progresser dans mon apprentissage, car je m'intéresse énormement à l'impact sur les organisations (professionnelles) des "outils dits collaboratifs"....mon travail est orienté dans ce sens actuellement.
à bientôt....peut-être ? au grés de mes réussites ou de mes echecs.....
ce site est super, je trouve vraiment beaucoup d'infos, comme sur le site et les tutos du site du zéro (pub gratuite...) que je fréquente assiduement aussi.
et en plus, y'a des gens sympas qui nous aident ! c'est top...
merci encore à toi, en souhaitant pouvoir, moi aussi, un jour, apporter mon aide....

Configuration: Windows XP
Internet Explorer 6.0

Oki,

bonne route à toi, en attendant de te lire comme dépanneuse !
-;o)
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Coucou me revoilou...!

j'ai avancé dans mon script (HTML pour l'instant !) de questionnaire, j'ai (même) à peu près réussi à mettre en forme certaines parties (tableaux...)....MAIS j'ai encore un souci !

il s'agit des questions comportant plusieurs propositions en lignes et 2 ou plusieurs colonnes de réponses sous forme de boutons radio .....1 choix doit pouvoir être réalisé dans chaque colonne, or lorsque je teste mon questionnaire à ce niveau, je ne peux faire qu'un seul choix de proposition pour toutes les colonnes de bouton proposées.....j'ai forcément fait une boulette quelque part !?
au secours, car j'ai pas mal de questions qui se présentent sous cette forme.....

voici le script (en partie....) avec le type de zone en question, que puisse-je faire ? merci

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Questionnaire </title>
</head>

<body>

<form action="traitementQbesoins.php" method="post" name="Questionnaire Besoins" enctype="application/x-www-form-urlencoded">

<fieldset>
<legend> <p> <b>1/11 Votre activité professionnelle </b></p> </legend>
<p> <b>Q1 Vous qualifieriez votre activité professionnelle plutôt comme...:</b><br/>
<i>une seule réponse possible</i> <br/>
<p>
<b> Q3 Votre travail quotidien s'exerce plus...</b><br/>
<i>une seule réponse possible </i><br/>
<input type="radio" name="travail quotidien" value="de manière individuelle" id="de manière individuelle" /> <label for="de manière individuelle ">De manière individuelle </label><br/>
<input type="radio" name="travail quotidien" value="de manière collaborative " id="de manière collaborative" /> <label for="de manière collaborative ">De manière collaborative</label><br/>
</p>
</fieldset>

<fieldset>
<legend> <p><b>2/11 Préparation d'un document</b></legend></p>
<p>
essai1 à re travailler cf mise en forme fin du Q
<p>
<b>Q1 Lorsque vous devez remplir des documents (formulaires, bons, etc) administratifs, le plus souvent vous le faites...</b><br/>
<i>une seule réponse possible </i><br/>
<table>

<tr>
<td> </td>
<td><div style="text-align: center">Comment je travaille</div></td>
<td><div style="text-align: center">Comment je souhaite travailler</div></td>
</tr>
<tr>
<td><label for="à la main, sur un support papier">à la main, sur un support papier</label> </td>
<td><input type="radio" name="remplir un document administratif" value="à la main, sur un support papier " id="à la main, sur un support papier" /> <br/></td>
<td><input type="radio" name="remplir un document administratif" value="à la main, sur un support papier " id="à la main, sur un support papier" /> <br/></td>
</tr>
<tr>
<td><label for="à partir d'un document en version electronique que j'imprime puis que je rempli">à partir d'un document en version electronique que j'imprime puis que je rempli</label> </td>
<td><input type="radio" name="remplir un document administratif" value="à partir d'un document en version electronique que j'imprime puis que je rempli" id="à partir d'un document en version electronique que j'imprime puis que je rempli " /> <br/></td>
<td><input type="radio" name="remplir un document administratif" value="à partir d'un document en version electronique que j'imprime puis que je rempli" id="à partir d'un document en version electronique que j'imprime puis que je rempli " /> <br/></td>
</tr>
<tr>
<td><label for="à partir d'un document type en version electronique que je rempli et que j'envoie par email ">à partir d'un document type en version electronique que je rempli et que j'envoie par email </label> </td>
<td><input type="radio" name="remplir un document administratif" value="à partir d'un document type en version electronique que je rempli et que j'envoie par email " id="à partir d'un document type en version electronique que je rempli et que j'envoie par email " /> <br/></td>
<td><input type="radio" name="remplir un document administratif" value="à partir d'un document type en version electronique que je rempli et que j'envoie par email " id="à partir d'un document type en version electronique que je rempli et que j'envoie par email " /> <br/></td>
</tr>
<tr>
<td><label for="en remplissant directement un document sur mon intranet ">en remplissant directement un document sur mon intranet </label> </td>
<td><input type="radio" name="remplir un document administratif" value="en remplissant directement un document sur mon intranet " id="en remplissant directement un document sur mon intranet " /> <br/></td>
<td><input type="radio" name="remplir un document administratif" value="en remplissant directement un document sur mon intranet " id="en remplissant directement un document sur mon intranet " /> <br/></td>
</tr>
<tr>
<td><label for="en remplissant un document dans un fichier qui est automatiquement traité après validation par un bouton de commande dans le document">en remplissant un document dans un fichier qui est automatiquement traité après validation par un bouton de commande dans le document </label> </td>
<td><input type="radio" name="remplir un document administratif" value="en remplissant un document dans un fichier qui est automatiquement traité après validation par un bouton de commande dans le document" id="en remplissant un document dans un fichier qui est automatiquement traité après validation par un bouton de commande dans le document" /> <br/></td>
<td><input type="radio" name="remplir un document administratif" value="en remplissant un document dans un fichier qui est automatiquement traité après validation par un bouton de commande dans le document" id="en remplissant un document dans un fichier qui est automatiquement traité après validation par un bouton de commande dans le document" /> <br/></td>
</tr>
</table>

</form>
</body>
</html>

Salut,

tu tombes bien, je pensais à toi hier soir en voyant ce formulaire, il devrait te plaire !

tu devrais coder en DTD Strict, que ce soit avec HTML 4.01 ou XHTML 1.0.
le Transitional ne permet pas un affichage standard sur tous les navigateurs.

pour ton code je regarde, si tu avais une version en ligne ce serait plus pratique…
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Juste qqs conseils en passant:

value="à la main, sur un support papier " id="à la main, sur un support papier"

évites d'utiliser des caractères accentués et des espaces dans tes id="......" ça t'évitera des déboires au moment du traitement !

mets plutôt:

value="à la main, sur un support papier " id="a_la_main,_su_ un_support_papier"

<td>&nbsp;</td>

Bon pour les sélections c'est pas compliqué les radio sont groupés grâce à l'attribut 'name'
donc les radios avec un 'name' semblable fonctionnent ensemble.

pour le reste je reprends les remarques de Alain42.

pour les 'id', des noms courts (moins il y a de caractères moins il y a de fautes de frappe) mais assez explicites et j'ajouterai pas de chiffre au début.

pour les 'value' c'est ce que tu vas utiliser avec php donc pas de roman. tu vas faire du traitement de données, il faut être efficace avant tout donc il faut formater à mort.

tu verras comment j'ai formater, à toi de te trouver une convention de nommage qui te convienne.

j'ai mis un peu plus de temps à répondre car je me suis permis de te faire une version xhtml valide. j'ai ajouter le logo xhtml pour que tu puisse le soumettre à la validation en direct mais c'est pas obligatoire !

je sais que ce n'est encore qu'un brouillon mais il vaut mieux pour toi prendre l'habitude de coder propre dès les brouillons.

tu verras que mon code source est beaucoup plus léger, c'est parce que j'essaie de profiter au maximum du couple css/html et que je ne mets que l'essentiel. il faut y penser car à force les différence de poids de page (et donc de vitesse de chargement) riesquent de se faire sentir.
par ailleurs; il faut indenter le code, sinon ça devient vite le grand bordel. ton document est encore court mais imagine quand il y aura plusieurs centaines de lignes…

bon courage !
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Merci pour vos réponses...

je ne comprends pas tout très clairement ! DTD Strict, Transitional ? KESAKO ? c'est grave docteur ? j'ai fait (bêtement) un copier /coller d'une partie de mon script.....c'est pas le top, c'est certain.....comment faire plus pratique, et je m'exécute pour la suite....

mais bon, je vais retenir l'essentiel : alleger le code et particulièrement au niveau des ID et des values....merci Alain42 ! surtout en prévision du PHP derrière....OK Dalida
un grand merci Dalida pour le lien vers le formulaire et l'utilisation du CSS.....c'ets très sympa
OK aussi pour le fonctionnement des bouton radio, le name des différents groupes doit varier, compris 5/5.

Indenter le code ? c'est le simplifier....? c'est dur de débuter et de tout anticiper, et je vous remercie pour votre aide et vos conseils, autant essayer de faire à peu près "propre" assez rapidement, j'ai compris....[c'est parce que j'essaie de profiter au maximum du couple css/html et que je ne mets que l'essentiel.] je vais regarder ta proposition et te remercie à nouveau de me guider...je fais pas simple pour un début, je sais....et puis l'utilisation couplée CSS/HTML je sais pas encore faire....

Makila06

DTD | docType Definition | Document Type Definition
de la doc :
• Pompage
• Alsacreéations

Indenter le code
c'est mettre des tabulations dans le code pour mieux visualiser les imbrications des balises. ça permet de comprendre l'architecture d'une page en un coup d'oeil et surtout ça permet de repérer plus vite les erreurs de balisage.
une page type avec indentation (au passage ça peut te servir de page de base pour travailler…) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>

	<title>Titre de la page</title>

	<meta name="author" content="ton nom" />
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="content-language" content="fr" />

	<style type="text/css">

	</style>

</head>

	<body>

		<h1>Titre de la page</h1>

		<div id="navigation">
		
		    <ul>
		        <li><a href="#">Menu 1</a></li>
		        <li><a href="#">Menu 2</a></li>
		        <li><a href="#">Menu 3</a></li>
		    </ul>
		
		</div>

	</body>

</html>

Il y a surement des pandas pour ne dépendre de rien

Merci ....

çà s'éclaire peu à peu, je découvre beaucoup de choses, et parfois çà s'embrouille un peu ......je vais travailler sur ces aspects pendant 1 ou 2 jours, puis je reviendrai certainement vers le forum pour soumettre le résultat ....et mes angoisses de novice !!! il est vrai que mon script est déjà beaucoup plus conséquent que la petite partie que je vous ai envoyée, maladroitement.....donc, je vais simplifier avant de continuer et corriger en fonction de vos conseils et de ce que j'ai compris.

merci encore, je décroche du forum momentanéement......et je m'y remets !!!
A+
Makila06