Augmenter la largeur des input

**laurentSc** · 19/03/2023, 11h14

Bonjour,
dans mon formulaire (https://pasdpanique.fr/?action=Nous-contacter), les champs de saisie ne sont pas assez larges et quand on saisie un texte assez long, il n'est pas entièrement visible. J'ai donc essayé d'augmenter cette largeur par CSS, mais ça bouge pas. Comment faire ?

Nous-contacter.php :

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
<section class="nous-contacter">
 
    <h2>Nous contacter</h2>
    <div class="divcontact">
        <p>Arnaud Brun<br />
            38880 Autrans-Méaudre<br></p>
 
        <p>Par téléphone : <a href="tel:0123456789">01 23 45 67 89</a><br>
            ou par formulaire de contact :</p>
    </div>
 
    <form id="rappel" action="?action=Action-form-contact" 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&nbsp;:</label>
                <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>
 
</section>

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
47
48
49
50
51
52
53
54
55
56
57
58
59
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;
    display: inline-block;
    min-width: 20em;
}
 
fieldset input {
    border-radius: 5px;
    border: 1px solid grey;
    min-width: 50em; /*j'ai beau mettre une valeur énorme, ça change rien...*/
}
 
.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;
}
 
.etre-rappele p,
.nous-contacter p {
    line-height: 1.2;
}
 
.divcontact p {
    font-size: 2.2rem;
    line-height: 1.6;
}

**ddaweb** · 19/03/2023, 12h04

Tu pourrais essayer ceci :

Code :

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

fieldset input[type=text], fieldset input[type=email] { min-width: 20em; // ----- ou width }

Par contre tes label me semblent assez loin des champs, c'est certainement du à ton p, pour le déplacer vers la droite en dessous de ton input :

Code :

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

fieldset p { text-indent : 20em; ou margin-left : 20em; }

Tu pourras ainsi diminuer ton label et peut-être l'aligner vers les inputs :

Code :

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

1
2
3
4
5
6
7
fieldset label {
    margin-right: 0.5rem;
    display: inline-block;
    min-width: 20em;
    text-align: right;
    padding-right: 1em; // ----- espace entre label et input, ou margin-right ... pas obligatoire si tu mets un espace dans ton label
}

A toi d'ajuster les valeurs

**laurentSc** · 19/03/2023, 12h31

J'ai essayé ceci (en local donc non montrable) :

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
 
fieldset label {
    margin-right: 0.5rem;
    display: inline-block;
    min-width: 20em;
}
 
fieldset label {
    margin-right: 0.5rem;
    display: inline-block;
    min-width: 20em;
    text-align: right;
    padding-right: 1em; /* ----- espace entre label et input, ou margin-right ... pas obligatoire si tu mets un espace dans ton label*/
}
 
 
fieldset p {
    margin-left : 20em;/*ou text-indent : 20em;*/ }
 
fieldset input[type=text], fieldset input[type=email] { min-width: 500em; /* ----- ou width */}

j'ai mis 500em pour être sûr de voir...aucun changement

**ddaweb** · 19/03/2023, 12h43

Je viens de vérifier chez moi, j'utilise width et en changeant la valeur, la largeur change ... également avec min-width.
Mais je travaille en %, avec em cela fonctionne aussi.

Pourquoi tu as supprimé fieldset input { ... } ?

**ddaweb** · 19/03/2023, 13h34

Je viens de tester avec ton code et quelque modification qui le montre bien :

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 {
    margin-right: 0.5rem;
    display: inline-block;
    min-width: 10em;
    text-align: right;
}
 
fieldset input {
    border-radius: 5px;
    border: 1px solid grey;
}
fieldset input[type=text], fieldset input[type=email] { min-width: 25em; width: 50%; }
fieldset p { margin-left : 11em; margin-top: 2px; color: #999; }

Nom : form_LaurentSc.jpeg
Affichages : 398
Taille : 32,6 Ko

Nom : form_LaurentSc2.jpeg
Affichages : 398
Taille : 24,5 Ko

Pour le responsive, tu devras faire des adaptations dans ton CSS, je suppose que tu as du @media :

Code :

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

1
2
fieldset label { text-align: left; }
fieldset p { margin-left : 0; }

**laurentSc** · 20/03/2023, 11h26

Envoyé par ddaweb

Pourquoi tu as supprimé fieldset input { ... } ?

Je ne l'ai pas supprimé mais seulement enlevé dans cette discussion car ça ne concernait pas mon problème !

comment obtiens tu le texte Vérifiez bien etc avec une flèche devant dans le post 5 ?

Envoyé par ddaweb

Pour le responsive, tu devras faire des adaptations dans ton CSS, je suppose que tu as du @media :

Code :

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

1
2
fieldset label { text-align: left; }
fieldset p { margin-left : 0; }

Je viens de tester et ce formulaire n'est pas responsive ! Pour être sûr de voir, j'ai fait

Code css :

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

1
2
3
@media screen and (max-width: 770px) {
fieldset{ width:10px; }
}

mais ça n'a aucun effet...Comment faudrait-il faire ?

**ddaweb** · 20/03/2023, 12h38

Envoyé par laurentSc

comment obtiens tu le texte Vérifiez bien etc avec une flèche devant dans le post 5 ?

C'est juste un petit symbole à ajouter, mais tu devra tout coller car je mets un espace afin que le forum ne l'affiche pas : & #8618;

J'obtiens bien un formulaire responsive sur les inputs, je ne met que la partie concernée, je n'ai rien modifié d'autre :

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
fieldset {
    justify-content: space-between;
    margin: 5rem auto;
    border: 1px solid grey;
    border-radius: 15px;
    padding: 5rem;
}
fieldset label {
    margin-right: 0.5rem;
    display: inline-block;
    min-width: 13em;
    text-align: right;
}
 
fieldset input {
    border-radius: 5px;
    border: 1px solid grey;
}
fieldset input[type=text], fieldset input[type=email] { width: 60%; }
fieldset .info { margin-left: 14em; margin-top: 2px; color: #999; }
/* ----- les @media */
@media(max-width:1600px){
	fieldset { padding: 4rem; }
}
@media(max-width:1024px){
	fieldset { padding: 3rem; }
}
@media screen and (max-width: 960px) {
	fieldset { padding: 2rem; }
}
@media(max-width:767px){
	fieldset { padding: 1rem; }
	fieldset label { text-align: left; }
	fieldset input[type=text], fieldset input[type=email] { width: 100%; }
	fieldset .info { margin-left: 0; }
}

Le formulaire :

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>
                <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&nbsp;:</label>
                <input type="email" name="email" id="email">
                <p class="info"><strong>↪ </strong><em>Vérifiez bien votre email afin que l'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>

Pour le reste tu devras voir

Je ne suis pas un grand spécialiste du CSS, mais cela fonctionne, tu devra peut-être ajuster car je n'ai pas tout ton CSS.
J'ai ajouté une classe info car tu as d'autres p.

EDIT :
J'ai aligné les label à droite, si tu retire cette partie, il sera à gauche et pas besoin de le mettre dans le @media.
Tu ajustes à ta guise évidemment.

**laurentSc** · 21/03/2023, 00h06

Envoyé par ddaweb

Je ne suis pas un grand spécialiste du CSS, mais cela fonctionne

Augmenter la largeur des input

Dimensionnement en CSS

Discussions similaires

Partager

Partager