Discussion :

[laurentSc]

Bonjour,

j'ai un formulaire dont la mise en page n'est pas esthétique à l'heure actuelle : https://pasdpanique.fr/Nous-contacter.php
Je voudrais aligner verticalement les 3 champs de saisie du début car la longueur différente des intitulés fait qu'ils sont décalés. Comment faire SVP ?

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
  <form id="rappel" action="Action-form-contact.php" method="post">
            <fieldset>
 
                <div>
                    <label for="nom">Votre nom :</label>
                    <input type="text" name="nom" id="nom" />
                </div>
 
                <div>
                    <label for="prenom">Votre prénom :</label>
                    <input type="text" name="prenom" id="prenom" />
                </div>
 
                <div>
                    <label for="email">Votre adresse email<br/> (vérifiez bien pour qu'on<br/> puisse vous répondre)&nbsp;:</label>
                    <input type="email" name="email" id="email" />
                </div>
 
                <div class="message">
                    <textarea name="message" id="message" placeholder="Votre message"></textarea>
                </div>
 
                <button class="buttonform" type="submit">Envoyer</button>
 
                <p><em>En remplissant ce formulaire, vous consentez à ce que
                        Pas d’panique, en sa qualité de responsable de traitement,
                        collecte vos données afin de pouvoir répondre à votre message.<br>
                        Pour faire valoir votre droit d’accès ou d’effacement,
                        consultez notre <a href="./politique-de-confidentialite.php" target="_blank"
                                           alt="Lien vers la politique de confidentialité du site Pas d'Panique" rel="noopener">politique de
                            confidentialité</a>.</em></p>
 
            </fieldset>
        </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
fieldset {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 5rem auto;
    border: 1px solid grey;
    border-radius: 15px;
    padding: 5rem;
    /* width: 80%; */
}
 
fieldset div {
    margin: 1rem 0;
}
 
fieldset label {
    margin-right: 0.5rem;
}
 
fieldset input {
    border-radius: 5px;
    border: 1px solid grey;
}
 
.message textarea {
    height: 20rem;
    width: 100%;
    padding: 1rem;
    border: 1px solid grey;
    border-radius: 15px;
}
 
.buttonform {
    margin: 1rem auto;
    width: 8em;
    background-color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 15px;
    cursor: pointer;
}
 
.buttonform:hover {
    text-decoration: underline;
}

[ddaweb]

Je vois plusieurs solutions simples :

1. mettre un <br /> après le <label> et travailler sur 2 lignes
2. faire 2 div avec un float left et largeur pour label et input (attention au responsive)
3. faire un tableau (bof)

Nos spécialistes auront certainement d'autres solutions

[laurentSc]

Merci de me répondre.
Solution 3 = bof ; d'accord
Solution 1 = bof aussi
Solution 2 = la seule qui retient mon intérêt, mais effectivement, je tiens au responsive et les 2 DIVs doivent être horizontalement alignés ; comment obtenir cela ?

[ddaweb]

Un exemple, mais je me doutait de la réponse :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
fieldset label {
    float :left;
    width: 10%;
    text-align: right;
    margin-right: 0.5rem;
}
 
fieldset input {
    float: left;
    width : 20%;
    border-radius: 5px;
    border: 1px solid grey;
}

A toi de choisir la largeur des colonnes et éventuellement les ajuster au responsive.
Pour le textarea tu peux également mettre un label (voir vide) pour l'aligner avec les autres, avec un float sur ce champs.

Avec ta div, je ne crois pas qu'il faille faire une div avec un clear : left; après chaque élément ... elle peut toutefois te faire un espace.

EDIT :
Un formulaire sur 2 lignes peux être pas mal non plus, voici un exemple avec un complément d'information avec un span et l'utilisation du code & #8618; pour la petite flèche (colle le & et # sinon le forum met la flèche ) :

[ddaweb]

Tant que j'y suis, le formulaire de contact du club du site que je refais, en 2 lignes :



Chaque site a son identité, mais je trouve que le tiens est bien équilibré

[NoSmoking]

Bonjour,
faire simple est souvent une bonne base de départ.

Code :

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

1
2
3
4
5
fieldset label {
  margin-right: 0.5rem;
  display: inline-block;
  min-width: 10em;
}

Concernant la structure, je modifierais au moins la partie email comme suit :

Code html :

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

1
2
3
4
5
<div>
  <label for="email">Votre adresse email&nbsp;:</label>
  <input type="email" name="email" id="email">
  <p><em>(vérifiez bien pour qu'on puisse vous répondre)</em></p>
</div>

[laurentSc]

Merci, mais même avec ce CSS, c'est pas aligné ; j'ai choisi de faire des retours à la ligne :

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
  <form id="rappel" action="?action=Action-form-contact" method="post">
        <fieldset>
 
            <div>
                <label for="nom">Votre nom :</label><br/>
                <input type="text" name="nom" id="nom" />
            </div>
 
            <div>
                <label for="prenom">Votre prénom :</label><br/>
                <input type="text" name="prenom" id="prenom" />
            </div>
 
            <div>
                <label for="email">Votre adresse email&nbsp;:</label><br/>
                <input type="email" name="email" id="email">
                <p><em>(vérifiez bien pour qu'on puisse vous répondre)</em></p>
            </div>
 
            <div class="message">
                <textarea name="message" id="message" placeholder="Votre message"></textarea>
            </div>
 
            <button class="buttonform" type="submit">Envoyer</button>
 
            <p><em>En remplissant ce formulaire, vous consentez à ce que
                    Pas d’panique, en sa qualité de responsable de traitement,
                    collecte vos données afin de pouvoir répondre à votre message.<br>
                    Pour faire valoir votre droit d’accès ou d’effacement,
                    consultez notre <a href="./politique-de-confidentialite.php" target="_blank"
                                       alt="Lien vers la politique de confidentialité du site Pas d'Panique" rel="noopener">politique de
                        confidentialité</a>.</em></p>
 
        </fieldset>
    </form>

[NoSmoking]

Sorry, je pensais que tu voulais aligner verticalement les <input>

j'ai choisi de faire des retours à la ligne

Beurk !!!!!

Passe tes <label> en display:block tout simplement.

Au passage mettre un modèle de boîte FLEX sur ton <fieldset> ne sert pas à grand chose.

[laurentSc]

Même en mettant les <label> en display:block , les <label> et les <input> sont sur la même ligne et les <input> sont décalés alors que je voudrais une mise en page tabulaire...

label1 court                      [input]
label2 très très très très long   [input]

[ddaweb]

Essaie d'augmenter le min-width, comme son nom l'indique, c'est une largeur min. ... si le texte est plus long, le label grandit tout de même.
Cela peut-être des em ou des % ou n'importe quelle valeur de grandeur.

[laurentSc]

Bien vu :

Code css :

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

1
2
3
4
5
fieldset label {
    margin-right: 0.5rem;
    display: inline-block; /* il a aussi fallu remettre ça */
    min-width: 20em;
}