[Conception] Design d'un formulaire

Version imprimable

27/11/2007, 18h21
Ashgenesis

[Conception] Design d'un formulaire

Bonjour, je dois concevoir un formulaire contenant un champ input et 2 select
Au niveau de la conception pas de problème seulement c'est au niveau du design et du placement des selects que je bloque. Je n'arrive pas à trouver un design correcte pour les ordonner.

voilà l'url pour le code source il n'y a pas de design du tout
http://ashgenesis.free.fr/formulaire/index.html
Je ne demande pas de me concevoir un design mais quelques pistes pour la conception du design. le placement des selects etc...
Il faut savoir que le premier select à un rapport avec l'input et que le second à un rapport avec une valeur retournée sur cette même page.

J'espère ne pas être trop flou dans mes explications.

Merci d'avance pour toutes suggestions ou questions.
ashgenesis
28/11/2007, 07h31
Dsphinx

Salut, effectivement il manque un peu de mise en forme... Sans qu'il soit intégré dans un site c'est un peu dur de se faire une idée. Mais tu peux par exemple, l'aérer en séparent tes éléments. Essayer de les aligner différement et le structurer en mettant un titre au formulaire, des infos sur chaques éléments.

Tu peux agrémenter ton formulaire avec du CSS : Mise en forme d'un formulaire

Hello,

Ah là oui c'est sur...
Essaie ce que je te mets ci dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<center>
<table width="60%" cellspacing="2" cellpadding="2">
<tr>
     <td colspan="2">Titre du formulaire</td>
</tr>
<tr>
     <td colspan="2"><input style="width:100%; border:1px solid #000;" type="text" name="val" id="val" value="" /></td>
</tr>
<tr>
     <td align="center>
<select style="border:1px solid #000;" name="select1" id="select1" size="10">
	<option value="1" label="option1">Option 1</option>

	<option value="2" label="option2">Option 2</option>
	<option value="3" label="option3">Option 3</option>
	<option value="4" label="option4">Option 4</option>
	<option value="5" label="option5">Option 5</option>
	<option value="6" label="option6">Option 6</option>
	<option value="7" label="option7">Option 7</option>
	<option value="8" label="option8">Option 8</option>
	<option value="9" label="option9">Option 9</option>
</select>
</td>
<td>
<select style="border:1px solid #000;" name="select2" id="select2" size="10">
	<option value="11" label="option11">Option 11</option>
	<option value="21" label="option21">Option 21</option>
	<option value="31" label="option31">Option 31</option>
	<option value="41" label="option41">Option 41</option>
	<option value="51" label="option51">Option 51</option>
	<option value="61" label="option61">Option 61</option>
	<option value="71" label="option71">Option 71</option>
	<option value="81" label="option81">Option 81</option>
	<option value="91" label="option91">Option 91</option>
</select>
</td>
</tr>
<tr>
     <td colspan="2">
<input style="width:100%;" type="submit" name="submit" id="submit" value="sendmethat" />
</td>
</tr>
</table></center>

@+
cadou

28/11/2007, 10h09
Ashgenesis

Merci pour vos réponses, je n'ai pas pris le design par tableau car il manquait un champ et que je n'aime pas trop faire du design avec un tableau mais bon merci quand même pour le coup de main ça m'a aider à voir pour une mise en page.

Le fait est que le formulaire n'as pas besoin d'être intégré dans un site car c'est lui le site :D. Juste une page avec un formulaire. Enfin, si on peux appeler ça un site :D

Voilà, j'ai rajouté un petit css (même url qu'au dessus) mais les éléments sont encore mal placés. Je ne vois pas trop comment faire pour mieux positionner les labels pour les selects. Le premier select à un rapport avec l'input et le second select à un rapport avec le résultat (actuellement en fond rouge)

Je tiens à préciser que l'input et le résultat sont 2 éléments bien distincts.

Au niveau technique de mise en place, ça peux aller mais au niveau idées de design, je bloque pas mal.

Merci de votre aide :D
28/11/2007, 10h41
Zerbull

Sun Web Application Guidelines

http://developers.sun.com/docs/web-a...4_0/index.html
18/01/2008, 10h52
Mingain

Quelque chose de trés intéressant sur le sujet :
http://www.fredcavazza.net/doc/tutor.../SVF_intro.htm