Elaboration d'un Formulaire HTML

**Isma.S** · 13/08/2016, 10h34

Bonjour,

Je viens vers vous car j'aurais besoin d'un petit peu d'aide concernant mon projet de rédaction d'un formulaire via HTML. Don voilà j'aimerais idéalement avoir des champs dans la même ligne comme ce qui suit:
Nom: (case à remplir) Prénom

case à remplir)
J'ai effectue mon programme avec des labels pour ces deux champs insérés dans une table mais le problème c'est que le sous-titre: "Coordonnées Personnelles" qui est censé englober ces champs (avec le fieldset) ne prend pas en compte le prénom qui est placé comme si il y avait une délimitation avec le nom. Je vous fais un aperçu de ce que cela donne sur Internet ci-dessous:
Nom : Capture Formulaire HTLM.PNG
Affichages : 444
Taille : 15,3 Ko

Nom : Capture Formulaire HTLM.PNG
Affichages : 444
Taille : 15,3 Ko

Idéalement j'aimerais que mon "Coordonnées Personnelles" englobe tous les champs saisis puisque c'est un sous-paragraphe mais je n'y arrive pas

, voici mon code ci-dessous:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title></title>
</head>
<body>
<form id= formulaire  methode= post action="">
<div style=" position: absolute left: 25px; height: 25px; margin:auto;">
<h1 style="text-align:center"> Demande d'inscription </h1>
</div>
 
 
<table style="width: 150%">
	<tr>
	<th style="width:440px; "><fieldset>	
 	<legend style="text-align: center; font-size: 160%; font-weight: bold">Coordonnées personnelles</legend>	
 	<tr><td style="width: 477px; height: 87px; "><p><label for="nom", style="margin-right: 10px">Nom : </label><input type="text" id="nom" /><p></td>
 	<td><label for="prenom"; style="margin-right: 10px">Prenom :</label><input type="text" id="prenom"/></td></tr>
 	<tr><td><p><label for="adresse"; style="margin-right: 10px">Adresse :</label><input type="text" id="adresse"/></p></td></tr>
 	<tr><td><p><label for="code postal";style="margin-right: 10px">Code Postal :</label><input type="text" id="code postal"/></p></td>
 	<td><label for="ville";style="margin-right: 10px"> Ville :</label><input type="text" id="ville"/></td></tr>
 	<tr><td><p><label for="telephone fixe";style="margin-right: 10px" >Téléphone fixe :</label><input type="text" id="telephone fixe"/></p></td>
 	<td><label for="telephone portable";style="margin-right: 10px" > Téléphone portable :</label><input type="text" id="telephone portable"/></td></tr>
 	<tr><td><p><label for="fax";style="margin-right: 10px" >Fax :</label><input type="text" id="fax"/></p></td>
 	<td><label for="e-mail";style="margin-right: 10px" > Email :</label><input type="text" id="e-mail"/></td></tr>
 
 
 	</fieldset></th></tr>	
</table>
 
</form>
</body>
</html>

Voilà si vous pouvez me donner un petit coup de main, ça serait vraiment sympa!
Merci d'avance!

**Isma.S** · 13/08/2016, 17h11

Bonjour à nouveau!

Juste pour vous dire que j'ai résolu le problème mon formulaire n'est encore pas parfait, je vous montre un aperçu de ce dernier en suivant le lien ci-dessous, si vous avez des conseils à me donner pour le rendre plus beau visuellement essentiellement dans les positions des champs et les couleurs des titres, je suis prenante!

http://file:///C:/DevFormation/GITAc...ormulaire.html

Suivez plutôt ce lien: C:\DevFormation\GITActivFormationParis\ProjectHtml\html\com\formation\issa\MaPageFormulaire.html car l'autre ne fonctionne pas!

A +!

**Escapetiger** · 13/08/2016, 18h08

Bonjour Isma.S,

Je ne sais pas pourquoi tu es arrivée dans la rubrique Emploi mais il existe un domaine plus approprié à ton besoin d'aide :

http://www.developpez.net/forums/f17...ns-x-html-css/
Publications (X)HTML et CSS

Cordialement,

[Edit]
Et pour le code à poster, merci d'utiliser les balises ton code, en abrégé c et /c (entre crochets).

**Isma.S** · 13/08/2016, 18h25

Ok dsl pour le post au mauvais endroit

!

**Isma.S** · 13/08/2016, 21h50

Au cas où voici mon code final:

Code HTML :

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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
 
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title></title>
</head>
<body>
	<form id=formulaire methode=post action="">
		<div
			style="position: absolute left: 25px; height: 25px; margin: auto;">
			<h1 style="text-align: center">Demande d'inscription</h1>
		</div>
 
 
		<table style="width: 150%">
			<fieldset>
 
				<legend
					style="text-align: center; font-size: 160%; font-weight: bold">Coordonnées
					personnelles</legend>
			<tr>
				<td><p>
						<label for="nom" style="margin-right: 10px">Nom : </label><input
							type="text" id="nom" />
					</p></td>
				<td>Prenom :<input type="text" id="prenom"
					style="margin-left: 10px" /></td>
			</tr>
 
			<tr>
				<td><p>
						<label for="adresse" style="margin-right: 10px">Adresse :</label><input
							type="text" id="adresse" />
					</p></td>
			</tr>
 
			<tr>
				<td><p>
						<label for="code postal" style="margin-right: 10px">Code
							Postal :</label><input type="text" id="code postal" />
					</p></td>
				<td>Ville :<input type="text" id="ville"
					style="margin-left: 10px" /></td>
			</tr>
 
			<tr>
				<td><p>
						<label for="telephone fixe" style="margin-right: 10px">Téléphone
							fixe :</label><input type="tel" id="telephone fixe" />
					</p></td>
				<td>Téléphone portable :<input type="tel"
					id="telephone portable" style="margin-left: 10px" /></td>
			</tr>
 
			<tr>
				<td><p>
						<label for="fax" style="margin-right: 10px">Fax :</label><input
							type="text" id="fax" />
					</p></td>
				<td>Email :<input type="email" id="e-mail"
					style="margin-left: 10px" /></td>
			</tr>
 
			</fieldset>
		</table>
 
		<table>
			<fieldset>
 
				<legend
					style="text-align: center; font-size: 160%; font-weight: bold">Etat
					Civil</legend>
				<tr>
					<td><p>
							<label for="date" style="margin-right: 10px">Date de
								Naissance : </label><input type="date" id="date"
								; placeholder="DD/MM/YYYY">
						</p></td>
					<td>Lieu :<input type="text" id="lieu"
						style="margin-left: 10px" /></td>
				</tr>
 
				<tr>
					<td><p>
							<label for="text" style="margin-right: 10px">N° de
								sécurité sociale :</label><input type="text" id="text" maxlength="15" />
						</p></td>
				</tr>
 
				<tr>
					<td><p>
							<label for="text" style="margin-right: 10px">Nationalité
								:</label><input type="text" id="text" />
						</p></td>
				</tr>
 
			</fieldset>
		</table>
 
		<table>
			<fieldset>
 
				<legend
					style="text-align: center; font-size: 160%; font-weight: bold">Situation
					actuelle</legend>
				<tr>
					<td><p>
							<label for="salarie">Salarié :</label><input type="checkbox"
								name="salarie" value="1" id="salarie">
						</p></td>
					<td>Auto-entrepreneur :<input type="checkbox"
						name="auto-entrepreneur" value="1" id="auto-entrepreneur"></td>
					<td>Freelance :<input type="checkbox" name="freelance"
						value="1" id="freelance"></td>
				</tr>
 
				<tr>
					<td><p>
							<label for="demandeur d'emploi">Demandeur d'emploi :</label><input
								type="checkbox" name="demandeur d'emploi" value="1"
								id="demandeur d'emploi">
						</p></td>
					<td>Retraité :<input type="checkbox" name="retraite" value="1"
						id="retraite"></td>
					<td>Autre :<input type="text" id="text"
						style="margin-right: 10px"></td>
				</tr>
 
			</fieldset>
		</table>
 
		<table>
			<fieldset>
 
				<legend
					style="text-align: center; font-size: 160%; font-weight: bold">Fonction
					/ Rémunération</legend>
				<tr>
					<td><p>
							<label for="fonction occupée" style="margin-right: 10px">Fonction
								occupée :</label><input type="text" id="fonction occupée">
						</p></td>
					<td>Cadre :<input type="checkbox" name="cadre" value="1"
						id="cadre"></td>
					<td>Non cadre :<input type="checkbox" name="non cadre"
						value="1" id="non cadre"></td>
				</tr>
 
				<tr>
					<td><p>
							<label for="position" style="margin-right: 10px">Position
								:</label><input type="text" id="position">
						</p></td>
					<td><label for="coefficient" syle="margin-left: 10px">Coefficient
							:</label><input type="text" id="coefficient"></td>
				</tr>
 
				<tr>
					<td><p>
							<label for="salaire souhaité" style="margin-right: 10px">Salaire
								souhaité :</label><input type="text" id="salaire souhaité">
						</p></td>
				</tr>
 
				<tr>
					<td><p>
							<label for="mutuelle" style="margin-right: 10px">Mutuelle
								souhaitée :</label> <label for="mutuelle-oui">Oui</label> <input
								type="checkbox" value="oui" id="mutuelle-oui"> <label
								for="mutuelle-non">Non</label> <input type="checkbox"
								value="non" id="mutuelle-non">
						</p></td>
					<td>Ticket resto :<label for="ticket resto-oui"
						style="margin-left: 10px">Oui</label> <input type="checkbox"
						value="oui" id="ticket resto-oui"> <label
						for="ticket resto-non">Non</label> <input type="checkbox"
						value="non" id="ticket resto-non"></td>
				</tr>
 
				<tr>
					<td><p>
							<label for="date de la derniere VM" style="margin-right: 10px">Date
								de la dernière visite médicale :</label><input type="text"
								id="date de la derniere VM">
						</p></td>
				</tr>
 
				<tr>
					<td><p>
							<label for="montant" style="margin-right: 10px">Montant
								Carte d'abonnement transport :</label><input type="text" id="montant">
						</p></td>
				</tr>
 
				<tr>
					<td><p>
							<label for="vehicule personnel" style="margin-right: 10px">Véhicule
								personnel :</label><input type="text" id="vehicule personnel">
						</p></td>
					<td>Nombre de CV :<input type="number" id="nb CV"
						style="margin-left: 10px"></td>
					<td>km mensuel estimé :<input type="number" id="km"
						style="margin-left: 10px"></td>
				</tr>
 
			</fieldset>
		</table>
	</form>
</body>
</html>

**Isma.S** · 14/08/2016, 14h21

Rebonjour,

Voici les deux captures d'écran de mon formulaire Nom : Capture.HTML1.PNG
Affichages : 363
Taille : 22,4 Ko

Nom : Capture.HTML2.PNG
Affichages : 369
Taille : 27,1 Ko

**Isma.S** · 14/08/2016, 22h13

Vous n'avez pas de critique à faire sur mon questionnaire?

Invité · 15/08/2016, 16h17

Bonjour,

1/ Inutile de "Répondre avec citation" un message complet : cliquez sur le bouton "+Répondre à la discussion" (en bas à gauche)
Merci

2/ Concernant ton formulaire :
le code HTML est une véritable horreur !

Les balises sont imbriquées n'importe comment => il faut revoir/apprendre les bases du HTML !

Les tableaux (XHTML & CSS)
l'utilisation de <table> pour de la mise en page n'est plus recommandé.

Personnalisation d'un formulaire XHTML avec CSS

Enfin, soigne l'INDENTATION du code : il sera plus facile à lire et à déboguer.

**Isma.S** · 15/08/2016, 16h34

Concernant mes balises, je ne pense pas les avoir mis n'importe comment, vu que le rendu ne donne pas quelque chose d'inexploitable et pour les tables c'était surtout pour avoir des délimitations entre chaque sous-partie, si c'était catastrophique, je n'aurais même pas eu ce rendu, je pensais surtout à ajuster la localisation de certains champs pour avoir un rendu meilleur visuellement

**Isma.S** · 15/08/2016, 16h50

Concernant mes balises, je ne pense pas les avoir mis n'importe comment, vu que le rendu ne donne pas quelque chose d'inexploitable et pour les tables c'était surtout pour avoir des délimitations entre chaque sous-partie, si c'était catastrophique, je n'aurais même pas eu ce rendu, je pensais surtout à ajuster la localisation de certains champs pour avoir un rendu meilleur visuellement

Invité · 15/08/2016, 17h05

Oui, c'est possible...

Je retire ce que j'ai dit.
L'indentation du code ne permet pas une bonne lecture...

En l'indentant correctement, on peut mieux voir et corriger :

1/ -> mets les balises <fieldset><legend> en-dehors des <table>

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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="ISO-8859-1">
  <title></title>
</head>
 
<body>
  <form id=formulaire methode=post action="">
    <div style="position: absolute left: 25px; height: 25px; margin: auto;">
      <h1 style="text-align: center">Demande d'inscription</h1>
    </div>
 
 
    <fieldset>
      <legend style="text-align: center; font-size: 160%; font-weight: bold">Coordonnées personnelles
      </legend>
 
      <table style="width: 150%">
        <tr>
          <td>
            <p>
              <label for="nom" style="margin-right: 10px">Nom : </label><input type="text" id="nom" />
            </p>
          </td>
          <td>Prenom :<input type="text" id="prenom" style="margin-left: 10px" /></td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="adresse" style="margin-right: 10px">Adresse :</label><input type="text" id="adresse" />
            </p>
          </td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="code postal" style="margin-right: 10px">Code Postal :</label><input type="text" id="code postal" />
            </p>
          </td>
          <td>Ville :<input type="text" id="ville" style="margin-left: 10px" /></td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="telephone fixe" style="margin-right: 10px">Téléphone fixe :</label><input type="tel" id="telephone fixe" />
            </p>
          </td>
          <td>Téléphone portable :<input type="tel" id="telephone portable" style="margin-left: 10px" /></td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="fax" style="margin-right: 10px">Fax :</label><input type="text" id="fax" />
            </p>
          </td>
          <td>Email :<input type="email" id="e-mail" style="margin-left: 10px" /></td>
        </tr>
 
      </table>
 
    </fieldset>
    <fieldset>
      <legend style="text-align: center; font-size: 160%; font-weight: bold">Etat Civil</legend>
 
        <table>
      <tr>
        <td>
          <p>
            <label for="date" style="margin-right: 10px">Date de Naissance : </label><input type="date" id="date" ; placeholder="DD/MM/YYYY">
          </p>
        </td>
        <td>Lieu :<input type="text" id="lieu" style="margin-left: 10px" /></td>
      </tr>
 
      <tr>
        <td>
          <p>
            <label for="text" style="margin-right: 10px">N° de sécurité sociale :</label><input type="text" id="text" maxlength="15" />
          </p>
        </td>
      </tr>
 
      <tr>
        <td>
          <p>
            <label for="text" style="margin-right: 10px">Nationalité :</label><input type="text" id="text" />
          </p>
        </td>
      </tr>
 
      </table>
 
    </fieldset>
    <fieldset>
      <legend style="text-align: center; font-size: 160%; font-weight: bold">Situation actuelle</legend>
 
      <table>
        <tr>
          <td>
            <p>
              <label for="salarie">Salarié :</label><input type="checkbox" name="salarie" value="1" id="salarie">
            </p>
          </td>
          <td>Auto-entrepreneur :<input type="checkbox" name="auto-entrepreneur" value="1" id="auto-entrepreneur"></td>
          <td>Freelance :<input type="checkbox" name="freelance" value="1" id="freelance"></td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="demandeur d'emploi">Demandeur d'emploi :</label><input type="checkbox" name="demandeur d'emploi" value="1" id="demandeur d'emploi">
            </p>
          </td>
          <td>Retraité :<input type="checkbox" name="retraite" value="1" id="retraite"></td>
          <td>Autre :<input type="text" id="text" style="margin-right: 10px"></td>
        </tr>
 
      </table>
 
    </fieldset>
    <fieldset>
      <legend style="text-align: center; font-size: 160%; font-weight: bold">Fonction / Rémunération</legend>
 
      <table>
        <tr>
          <td>
            <p>
              <label for="fonction occupée" style="margin-right: 10px">Fonction occupée :</label><input type="text" id="fonction occupée">
            </p>
          </td>
          <td>Cadre :<input type="checkbox" name="cadre" value="1" id="cadre"></td>
          <td>Non cadre :<input type="checkbox" name="non cadre" value="1" id="non cadre"></td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="position" style="margin-right: 10px">Position :</label><input type="text" id="position">
            </p>
          </td>
          <td><label for="coefficient" syle="margin-left: 10px">Coefficient :</label><input type="text" id="coefficient"></td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="salaire souhaité" style="margin-right: 10px">Salaire souhaité :</label><input type="text" id="salaire souhaité">
            </p>
          </td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="mutuelle" style="margin-right: 10px">Mutuelle souhaitée :</label> <label for="mutuelle-oui">Oui</label> <input type="checkbox" value="oui" id="mutuelle-oui"> <label for="mutuelle-non">Non</label> <input type="checkbox" value="non" id="mutuelle-non">
            </p>
          </td>
          <td>Ticket resto :<label for="ticket resto-oui" style="margin-left: 10px">Oui</label> <input type="checkbox" value="oui" id="ticket resto-oui"> <label for="ticket resto-non">Non</label> <input type="checkbox" value="non" id="ticket resto-non"></td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="date de la derniere VM" style="margin-right: 10px">Date de la dernière visite médicale :</label><input type="text" id="date de la derniere VM">
            </p>
          </td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="montant" style="margin-right: 10px">Montant Carte d'abonnement transport :</label><input type="text" id="montant">
            </p>
          </td>
        </tr>
 
        <tr>
          <td>
            <p>
              <label for="vehicule personnel" style="margin-right: 10px">Véhicule personnel :</label><input type="text" id="vehicule personnel">
            </p>
          </td>
          <td>Nombre de CV :<input type="number" id="nb CV" style="margin-left: 10px"></td>
          <td>km mensuel estimé :<input type="number" id="km" style="margin-left: 10px"></td>
        </tr>
 
      </table>
    </fieldset>
 
  </form>
</body>
 
</html>

2/ de plus, il manque des <label>...

Regarde quand même les liens que le t'ai donnés.

**Isma.S** · 15/08/2016, 21h16

OK merci pour les conseils

, et merci aussi pour les liens!

Elaboration d'un Formulaire HTML

HTML

Discussions similaires

Partager

Partager