Discussion :

[CCACC02]

Soit mon formulaire suivant :

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
<form action="#" method="post" name="contact-form">
			<p>Contactez-nous</p>
				<fieldset>
					<label for="nom">Nom* :</label>
					<input type="text" name="Nom" id="nom" placeholder="Entrez votre nom" required="">
				</fieldset>
				<fieldset>
					<label for="telephone">Téléphone :</label>
					<input type="tel" name="numTel" id="tel" placeholder="Indiquez votre numéro de téléphone">
				</fieldset>
				<fieldset>
					 <label for="e-mail">Email* :</label>
					<input type="email" name="Email" id="email" placeholder="Votre e-mail" required="">
				</fieldset>
				<fieldset>                                                                              
					<label>Message :</label>
					<textarea name="message" rows="6" cols="48" placeholder="Laissez-nous un message"></textarea>
				</fieldset>
				<fieldset class="action">
					<input type="submit" class="submit-button">
					<input type="reset" class="reset-button">
				</fieldset>
			</div>
		</form>

Code css :

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
#wrapper{
  margin: 0 auto;
  width: 1200px;
}
form{	
	width: 900px;
	margin: 0 auto;
	color: #669;
	background: rgba(250,250,250,0.5);
	padding: 20px 15px;
	border-radius: 15px;
}
form > p{
	margin-left: 25px;
}
label, input, textarea{
	margin-left: 10px;
	padding: 0.2em;
}
input{
  width: 400px;
  border-radius: 15px;
  border: none;
}
textarea{
	border-radius: 15px;
	border: none;
}
fieldset{
  display: inline;
  border: none;
  vertical-align: top;
}
label{
  display: block;
}
.action{
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content:​ center;
}
.action > input{
	width: 100px;
	margin: 0.3em;
}

Au niveau de mon CSS, l'action justify-content ou align-items ne me centre pas mes deux boutons dans le formulaire, ils restent décalés.
Pour le reste du formulaire, la présentation est conforme à mes attentes (même si je trouve mon html un peu lourd, je pense qu'il y a un moyen de simplifier) mais je ne parviens pas à centrer mes boutons.

Quelqu'un aurait une lumineuse idée?

Merci

[Invité]

Bonjour,

1- Tu abuses de la balise <fieldset> : "élément pour les ensembles de champs".

2-

Code :

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

justify-content:​ center;

: il y a un caractère non voulu

3- Le code n'est pas responsive (width en pixels )

4-

Code css :

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

1
2
3
4
.action > input{
	width: 100px;
	margin: 0.3em auto; /* auto : centrage */
}

[NoSmoking]

Bonjour,
j'ajouterais que l'élément <fieldset> est un mauvais candidat pour les modèles de boîtes flexibles : Some HTML elements can't be flex containers.

[CCACC02]

Peut-être que si je modifie comme cela :

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
<form action="#" method="post" name="contact-form">
			<p>Contactez-nous</p>
				<div class="form-item">
					<label for="nom">Nom* :</label>
					<input type="text" name="Nom" id="nom" placeholder="Entrez votre nom" required="">
				</div>
				<div class="form-item">
					<label for="telephone">Téléphone :</label>
					<input type="tel" name="numTel" id="tel" placeholder="Indiquez votre numéro de téléphone">
				</div>
				<div class="form-item">
					 <label for="e-mail">Email* :</label>
					<input type="email" name="Email" id="email" placeholder="Votre e-mail" required="">
				</div>
				<div class="form-item">                                                                              
					<label>Message :</label>
					<textarea name="message" rows="6" cols="48" placeholder="Laissez-nous un message"></textarea>
				</div>
				<div class="action">
					<input type="submit" class="submit-button">
					<input type="reset" class="reset-button">
				</div>
			</div>
		</form>

et le CSS :

Code css :

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
#wrapper{
  margin: 0 auto;
  width: 1200px;
}
form{	
	width: 900px;
	margin: 0 auto;
	color: #669;
	background: rgba(250,250,250,0.5);
	padding: 20px 15px;
	border-radius: 15px;
}
form > p{
	margin-left: 25px;
}
label, input, textarea{
	margin-left: 10px;
	padding: 0.2em;
}
input{
  width: 400px;
  border-radius: 15px;
  border: none;
}
textarea{
	border-radius: 15px;
	border: none;
}
.form-item{
  display: inline;
  border: none;
  vertical-align: top;
}
label{
  display: block;
}
.action{
  margin: 0 auto;
  display: flex;
  flex-direction: column;  
}
.action > input{
	width: 10%;
	margin: 0.3em auto;
}

Le boutons s'alignent donc ça c'est bon, et j'ai modifié le width pour le responsive (merci cela m'avait échappé )
Cependant mes items ne s'agencent plus comme il faut

[Invité]

Bonjour,

Tu cumules les lacunes.

LIS ou relis des tutos sur :

• Formulaire strcture html
• Mise en page CSS avec des div
• Flexbox CSS

Regarde et FAIS des EXERCICES de mise en page simple en HTML / CSS

Regarde aussi comment s'utilise <label for...>.

[Manequin]

Bonjour,
1) tu veux que tes boutons soient centrés comment ? Fait une capture.
2) jette un coup d'œil sur le CSS bootstrap.

Cordialement.

[CCACC02]

C'était finalement une coquille glissée dans mon CSS