Organisation d'un formulaire

**olibara** · 07/01/2010, 17h00

Bonjour

Je me bat toujours a la recherche de la bonne technique du meilleur forum et de la meilleures methode pour comprendre comment structurer correctement un WebForm

J'avais fait un post en ASP
http://www.developpez.net/forums/d85...el-div-tables/

Mais il me semble a nouveau que la base de connaissance qui me manque est plutot HTML ou CSS

Fondamentalement j'aimerais savoir comment on peut subdiviser une DIV en different segment pour y alligner plusieurs controles. Mon exemple est sur le post précité, si nécessaire je le remet ici (je ne sais pas si on peux faire des cross-link) de pieces jointes

Merci a ceux qui ont sufisemment de patience avec les débutants dans un domaines

**Vil'Coyote** · 08/01/2010, 09h03

salut,
on ne divise pas une div.
on créé un conteneur global auquel on va inclure d'autre conteneur ceux ci géré par css et donc le contenu de chacun seront les données de ton formulaire

<div>
<div></div>
<div></div>
<div></div>
</div>

**olibara** · 08/01/2010, 09h14

Merci Vil Coyote

Oui je m'etais mal exprimé j'avais bien capté que l'on pouvais inclure des sous container dans un container (c'est ce que j'avais appelé diviser )

Par contre tu m'apprends que je dois creer un CSS pour organiser le positionnement de ces sous-container

Ca je dois encore apprendre comment

Pour le moment il m'etait apparu relativement simple de de mettre des sous-container qui se positionnent d'office les uns en dessous des autres
Et d'organiser le contenu d'un container avec une table en spécifiant les tailles en %

Je pensais que le CSS etait utile pour le lay-out génerique de l'ensemble des pages d'un site mais pas pour l'organisation particuliere d'un container spécifique dans une page particuliere

Je me trompe ?

**sebhm** · 08/01/2010, 12h41

je dirais que oui tu te trompes.
Dans l'idéal, tu code ton HTML d'un coté, qui apparait alors tres basiquement à l'écran.
Et tu crées un fichier CSS qui gere toute la mise en page.

J'ai essayé de répondre à ta demande dans le code suivant (le CSS est compris dans l'entete du fichier HTML, on pourrait le mettre dans un fichier séparé).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>le titre</title>
		<style type="text/css">
                        form#le_form {
                                width : 100%
                        }
                        
                        fieldset {
                                width : 33%;
                                float : left;
                        }
                        h4 {
                                margin : 0;
                        }
                        div.demi_zone {
                                width : 48%;
                                border : none;
                                float : left;
                                margin : 0;
                        }
                         h4.centre {
                                text-align : center;
                         }
                        .mini_input {
                                width : 90%;
                        }
                </style>
	</head>
	<body>
	<form id="le_form" action="page_resu.html" method="post">
		<fieldset>
			<legend>Niet toegelaten periode</legend>
			<div class="demi_zone">
				<h4>Algemen</h4>
				<div>
					<input type="checkbox" id="algemen1" name="algemen1" /> <label for="algemen1">Zondag</label> <br />
					<input type="checkbox" id="algemen2" name="algemen2" /> <label for="algemen2">Maandag</label> <br />
					<input type="checkbox" id="algemen3" name="algemen3" /> <label for="algemen3">Dindsdag</label> <br />
					<input type="checkbox" id="algemen4" name="algemen4" /> <label for="algemen4">Woensdag</label> <br />
					<input type="checkbox" id="algemen5" name="algemen5" /> <label for="algemen5">Donderdag</label> <br />
					<input type="checkbox" id="algemen6" name="algemen6" /> <label for="algemen6">Vrijdag</label> <br />
					<input type="checkbox" id="algemen7" name="algemen7" /> <label for="algemen7">Zaterdag</label> <br />
				</div>
				<div class="demi_zone">
					<h4 class="centre">van</h4>
					<input type="text" class="mini_input" id="algemen_van1" name="algemen_van1" />
					<input type="text" class="mini_input" id="algemen_van2" name="algemen_van2" />
				</div>
				<div class="demi_zone">
					<h4 class="centre">tot</h4>
					<input type="text" class="mini_input" id="algemen_tot1" name="algemen_tot1" />
					<input type="text" class="mini_input" id="algemen_tot2" name="algemen_tot2" />
				</div>
			</div>
			<div class="demi_zone">
				<h4>Selected</h4>
				<div>
					<input type="checkbox" id="selected1" name="selected1" /> <label for="selected1">Zondag</label> <br />
					<input type="checkbox" id="selected2" name="selected2" /> <label for="selected2">Maandag</label> <br />
					<input type="checkbox" id="selected3" name="selected3" /> <label for="selected3">Dindsdag</label> <br />
					<input type="checkbox" id="selected4" name="selected4" /> <label for="selected4">Woensdag</label> <br />
					<input type="checkbox" id="selected5" name="selected5" /> <label for="selected5">Donderdag</label> <br />
					<input type="checkbox" id="selected6" name="selected6" /> <label for="selected6">Vrijdag</label> <br />
					<input type="checkbox" id="selected7" name="selected7" /> <label for="selected7">Zaterdag</label> <br />
				</div>
				<div class="demi_zone">
					<h4 class="centre">van</h4>
					<input type="text" class="mini_input" id="selected_van1" name="selected_van1" />
					<input type="text" class="mini_input" id="selected_van2" name="selected_van2" />
				</div>
				<div class="demi_zone">
					<h4 class="centre">tot</h4>
					<input type="text" class="mini_input" id="selected_tot1" name="selected_tot1" />
					<input type="text" class="mini_input" id="selected_tot2" name="selected_tot2" />
				</div>
			</div>
		</fieldset>
 
		<fieldset>
			<legend>bla bla ...</legend>
 
			à toi de jouer
		</fieldset>
	</form>
	<body>
</html>

j'espere que ca va t'aider.
N'hésite pas à demander si y'a un truc que tu piges pas

**olibara** · 08/01/2010, 12h49

Magnifique sebhm

Ca va beaucoup m'aider a comprendre la mécanique générale !!

Merci beaucoup

**olibara** · 09/01/2010, 21h55

Bonjour

Grace au précieux modéle de sebhm, j'ai entrepris de revoir completement le design de ma page avec le CSS modele de sebhm
J'ai pas encore tout compris mais ca aide beaucoup !!

Au passage j'ai remplacé les controles HTML par des controles ASPX

Voici ce que ca donne
J'en suis a la définition de la partie centrale

Suis-je dans le bon ?
Des remarques ?
Comment faire pour ajouter un petit bouton a coté de ma dropdownlist ?
Merci de votre aide

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">
 
<script runat="server">
 
  Protected Sub btnRemoveSel_Click(ByVal sender As Object, ByVal e As System.EventArgs)
 
  End Sub
 
  Protected Sub btnApplySel_Click(ByVal sender As Object, ByVal e As System.EventArgs)
 
  End Sub
 
  Protected Sub lstbVehi_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
 
  End Sub
</script>
 
<html>
<head>
  <title>le titre</title>
  <style type="text/css">
    form#le_form
    {
      width: 100%;
    }
    fieldset
    {
      width: 33%;
      float: left;
    }
    h4
    {
      margin: 0;
    }
    div.demi_zone
    {
      width: 48%;
      border: none;
      float: left;
      margin: 0;
    }
    h4.centre
    {
      text-align: center;
    }
    .mini_input
    {
      width: 90%;
    }
  </style>
</head>
<body>
  <form id="le_form" action="page_resu.html" method="post">
  <fieldset>
    <legend>Niet toegelaten periode</legend>
    <div class="demi_zone">
      <h4>
        Algemen</h4>
      <div>
        <asp:CheckBoxList ID="chklb_ForbidDays" runat="server">
          <asp:ListItem>Zondag</asp:ListItem>
          <asp:ListItem>Maandag</asp:ListItem>
          <asp:ListItem>Dindsdag</asp:ListItem>
          <asp:ListItem>Woensdag</asp:ListItem>
          <asp:ListItem>Donderdag</asp:ListItem>
          <asp:ListItem>Vrijdag</asp:ListItem>
          <asp:ListItem>Zaterdag</asp:ListItem>
        </asp:CheckBoxList>
      </div>
      <div class="demi_zone">
        <h4 class="centre">
          van</h4>
        <asp:TextBox ID="txbT1a" runat="server" class="mini_input"></asp:TextBox>
        <asp:TextBox ID="txbT2a" runat="server" class="mini_input"></asp:TextBox>
      </div>
      <div class="demi_zone">
        <h4 class="centre">
          tot</h4>
        <asp:TextBox ID="txbT1b" runat="server" class="mini_input"></asp:TextBox>
        <asp:TextBox ID="txbT2b" runat="server" class="mini_input"></asp:TextBox>
      </div>
    </div>
    <div class="demi_zone">
      <h4>
        Selected</h4>
      <div>
        <asp:CheckBoxList ID="CheckBoxList1" runat="server">
          <asp:ListItem>Zondag</asp:ListItem>
          <asp:ListItem>Maandag</asp:ListItem>
          <asp:ListItem>Dindsdag</asp:ListItem>
          <asp:ListItem>Woensdag</asp:ListItem>
          <asp:ListItem>Donderdag</asp:ListItem>
          <asp:ListItem>Vrijdag</asp:ListItem>
          <asp:ListItem>Zaterdag</asp:ListItem>
        </asp:CheckBoxList>
      </div>
      <div class="demi_zone">
        <h4 class="centre">
          van</h4>
        <asp:TextBox ID="txbS1a" runat="server" class="mini_input"></asp:TextBox>
        <asp:TextBox ID="txbS2a" runat="server" class="mini_input"></asp:TextBox>
      </div>
      <div class="demi_zone">
        <h4 class="centre">
          tot</h4>
        <asp:TextBox ID="txbS1b" runat="server" class="mini_input"></asp:TextBox>
        <asp:TextBox ID="txbS2b" runat="server" class="mini_input"></asp:TextBox>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend>Specifieke wagens</legend>
    <div>
      <asp:DropDownList ID="cmbVehi2" runat="server" Height="20px" Width="80%">
      </asp:DropDownList>
    </div>
    <div>
      <asp:ListBox ID="lstbVehi" runat="server" Height="233px" Width="100%" SelectionMode="Multiple"
        AutoPostBack="True" OnSelectedIndexChanged="lstbVehi_SelectedIndexChanged"></asp:ListBox>
    </div>
    <div class="demi_zone">
      <asp:Button ID="btnApplySel" runat="server" Text="Toev. aan selectie" Width="95%"
        OnClick="btnApplySel_Click" />
    </div>
    <div class="demi_zone">
      <asp:Button ID="btnRemoveSel" runat="server" Text="Verwijd. uit selectie" Width="95%"
        OnClick="btnRemoveSel_Click" />
    </div>
  </fieldset>
  <fieldset>
    <legend>Rapport settings</legend>les Mail
  </fieldset>
  </form>
</body>
</html>

Organisation d'un formulaire

HTML

Vue hybride

Discussions similaires

Partager

Partager