Largeur des input dans un formulaire

Version imprimable

09/01/2018, 17h16
laurentSc

Largeur des input dans un formulaire
Bonjour,

je n'arrive pas à changer la largeur des input d'un formulaire que ce soit avec l'attribut size ou avec le width du CSS. Comment faire ?

Code:

<input class="left-margin width_form margin_top_form2" id="login2" type="text" size="1" value="" name="login2" />
Code:

1 2 3 .width_form { width:3px; }
09/01/2018, 18h19
JefReb
Bonjour Laurent
Suis pas expert et je n'ai pas fait beaucoup de formulaires, mais en essayant par exemple:
Code:

1 2 3 4 5 input { height: 50px; width: 3px; }
ou bien:
Code:

1 2 3 4 5 .taille { height: 50px; width: 3px; }
Code:

<input class="taille" type="text" />

Mais comme le dit Headmax dans le post suivant tu as peut être un conflit css qui contrarie ton code.
09/01/2018, 18h20
headmax

Salut as tu essayé min-width as regardé si tu as pas un conflit CSS aussi.
démo: input dynamique
https://codepen.io/headmax/pen/baLLzB

Pourquoi comme d'habitude JefReb ?

Ta réponse fonctionne bien, même mieux que celle de Headmax...https://codepen.io/laurentsc/pen/WdMzVg mais ça sent bien le conflit CSS car dans mon contexte, si je peux bien régler la hauteur des input, pas la largeur :aie:

Code:

<input class="width_form " id="login2" type="text" size="1" placeholder="" value="" name="login2" />
Code:

1 2 3 4 5 6 7 8 9 10 11 12 /*body {text-align:center; padding:20px}*/ .width_form { /*min-width:3px!important; max-width:99.99%!important; transition: width 0.25s; text-align:center;*/ height: 5px; width:5px; /*font-size: 3.5em;*/ }
et sinon, pour JefReb, je pensais régler un souci en une heure et passer à la V8 du menu : https://www.developpez.net/forums/d1.../menu-flex-ie/ mais justement, j'avais codé un site de test mais ça a été perdu ; j'avais une sauvegarde, sauf pour le menu (!). J'ai donc voulu mettre la V7 à la place mais je dois me battre avec des problèmes CSS et l'heure va en fait prendre plusieurs jours vu que j'y ai déjà passé la journée...:aie:

Avez-vous une idée pour trouver les conflits ? J'ai essayé de trouver avec Firebug mais rien trouvé..

Non Laurent, j'ai supprimé le "comme d'habitude", mais comme Jérôme me reprends régulièrement, je ne suis qu'un développeur du dimanche et parfois je ne vois pas le problème.
c'est un commentaire très amicale et j'aime bien être repris ...
Pour ton soucis, je viens de tester ton code et cela fonctionne. C'est donc certainement un conflit css.
Moi j'utilise f12 de Firefox pour chercher les conflits (anciennement Firebug je crois) et en général on trouve assez facilement les css en cascade qui se chevauchent.
Mais bon je suis prudent maintenant avec ce que j'avance.
J'espère que ça va t'aider.
Pour la V8, je regarderai quand tu t'y remettras.

Par contre, je rajoute que dans ton codepen, tu as un * devant min-width ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 /*body {text-align:center; padding:20px}*/ .width_form { *min-width:3px!important; max-width:99.99%!important; transition: width 0.25s; text-align:center; height: 5px; width:5px; /*font-size: 3.5em;*/ }

10/01/2018, 09h36
NoSmoking
Bonjour,
vous oubliez quelque chose de fondamental qui le style par défaut appliqué par les navigateurs en d'autre mot il vous faut faire un « reset » minimum, par exemple en ajoutant
Code:

1 2 padding: 0; box-sizing: border-box;
On peut toutefois s’interroger sur la nécessité d'une si petite largeur sur un <input> qui par défaut est un champ de saisie de texte !

Citation:

Envoyé par JefReb

Moi j'utilise f12 de Firefox pour chercher les conflits (anciennement Firebug je crois)

Pas si ancien que ça vu qu'il y a 30 secondes c'était encore le cas !

Citation:

Envoyé par JefReb

je ne suis qu'un développeur du dimanche

Bienvenu au club !

NoSmoking, je viens de tester ton retour.
D'abord, en quoi tes 2 lignes ressettent quelque chose ?

Le input de 1px, il est évident que ce n'est pas le but mais juste un essai pour être sûr de la prise en compte.

Mon souci actuel est que je n'arrive pas à modifier la largeur des inputs et elle est trop petite (!).

Pour investiguer, j'ai regardé ce que me disait Firebug (la touche F12 !) et :

Code:

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
#form-area1 input:not([type="submit"]) {
    border: 1px inset #decfbb;
    box-shadow: 0 10px 10px #6f5430 inset;
    padding: 6px 20px;
}
#form-area1 input {
    background: transparent none repeat scroll 0 0;
    border-radius: 50px;
    display: inline-block;
}
.margin_top_form1 {
    margin-top: 5px;
}
.width_form {
    box-sizing: border-box;
    font-size: 3.5em;
    height: 14px;
    padding: 0;/* barré */
    width: 50px;
}
.left-margin {
    margin-left: 120px;
}
* {
    border: 0 none;/* barré */
    margin: 0;/* barré */
    padding: 0;/* barré */
}
inherited from fieldset#form-area1
#form-area1 {
    color: #6f5430;/* barré */
    font-family: Arial,sans-serif;
}
 
inherited from body
html, body {
    font-family: Arial,sans-serif;/* barré */
    font-size: 100%;/* barré */
 
inherited from	html
html, body {
    font-family: Arial,sans-serif;/* barré */
    font-size: 100%;/* barré */
}

Faut faire gaffe car le copier-coller enlève les lignes barrées (obligé de rajouter les commentaires /* barré */) et les inherited from (remis à la main)

Pour que ce soit clair, voici le html complet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
			<form id="authform"  action="<?php echo SITE_URL_HTTP;?>/page/authenticate.php" method="post">
			<fieldset id="form-area1">
					<p>
			<a href="http://www.schneider-electric.com/b2b/en/campaign/life-is-on/life-is-on.jsp" target="_blank">
			<img  src="<?php echo SITE_URL_HTTP; ?>/images/logo/LifeIsOn1x30_transparent.jpg" alt=''/></a>
			<?php echo $str[323]; ?>  <h2><i class="fa fa-user-o" aria-hidden="true"></i>
		 LOGIN</h2></p>
			  <p>
				<label for="login2">Username</label>
				<input class="left-margin width_form margin_top_form1" id="login2" type="text" size="1" value="<?php echo "";?>" name="login2" />
			  </p>
			  <p>
				<label for="pwd2">Password</label>
				<input class="btsubmit left-margin width_form margin_top_form2" id="pwd2" type="text" size="5" value="<?php echo "";?>" name="pwd2" /></p>
				<p>
				<label for="goauth"><?php echo $str[351]; ?></label>
				<input  id="goauth" type="submit" value="<?php echo "";?>" name="goauth" />
 
			  </p>
			</fieldset>
			</form>

et le css donné par Firebug est celui appliqué au input Username

Citation:

NoSmoking, je viens de tester ton retour.
D'abord, en quoi tes 2 lignes ressettent quelque chose ?

simplement que si tu affectes ces propriétés/valeurs aux <input> cela annulera les valeurs par défaut des navigateurs.

exemple CSS issu du fichier FireFox resource://gre-resources/forms.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
input {
  -moz-appearance: textfield;
  /* The sum of border and padding on block-start and block-end
     must be the same here, for buttons, and for <select> (including its
     internal padding magic) */
  padding: 1px;
  border: 2px inset ThreeDLightShadow;
  background-color: -moz-Field;
  color: -moz-FieldText;
  font: -moz-field;
  text-rendering: optimizeLegibility;
  line-height: normal;
  text-align: start;
  text-transform: none;
  word-spacing: normal;
  letter-spacing: normal;
  cursor: text;
  -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
  text-indent: 0;
  -moz-user-select: text;
  text-shadow: none;
  overflow-clip-box: content-box;
}

Bonjour,
hier après-midi, pas eu le temps d'avancer sur le sujet. J'ai créé un codepen pour reproduire mon souci, qui prouve que ce n'est pas un conflit CSS vu que ici aussi je ne peux pas modifier hauteur et largeur des inputs : https://codepen.io/laurentsc/pen/RxMxaV/

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form id="authform"  action="" method="post">
			<fieldset id="form-area1">
					<p>
	  <h2>
		 LOGIN</h2></p>
			  <p>
				<label for="login2">Username</label>
				<input class="left-margin width_form margin_top_form1" id="login2" type="text" size="1" value="" name="login2" />
			  </p>
			  <p>
				<label for="pwd2">Password</label>
				<input class="btsubmit left-margin width_form margin_top_form2" id="pwd2" type="text" size="5" value="" name="pwd2" /></p>
				<p>
				<label for="goauth"></label>
				<input  id="goauth" type="submit" value="" name="goauth" />
 
			  </p>
			</fieldset>
			</form>

Code:

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
212
213
214
215
216
217
218
219
220
221
222
 
 
/* for authentification */
#form-area1 {
  /*max-width: 600px;*/
  width: 100%;
  height:260px; /* for the height of the picture of the authentification's form (html2-milieu.php) (3 lines below) */
  width:440px;
  padding: 30px;
  margin: 20px auto;
  background: url(../images/Login-Page_gimp_extended.gif) no-repeat;
  /*background-repeat: */
  background: url(http://www.quebecwoodexport.com/images/stories/slideshow/resineux/cedre/_ccedre.jpg) no-repeat;
  font-family: Arial, sans-serif;
  color: #6f5430;/*marron*/
  border-radius:10px;
  box-shadow:5px 10px 10px #999;
  box-sizing : border-box;
}
 
 
 
#form-area1 h2 {
  font-size: 160%;
  font-weight: bold;
  text-shadow: 2px 2px 0px #decfbb;/*beige clair*/
}
 
#form-area1 h2 i.fa {
  font-size: 140%;
}
 
#form-area1 label {
  position: relative;
  display: inline-block;
  width: 30%;
  font-weight: bold;
  text-shadow: 2px 2px 0px #decfbb;/*beige clair*/
  padding-left: 20px;
}
 
#form-area1 label:before {
  position: absolute;
  display: block;
  content: '';
  top: 50%;
  margin-top: -6px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 12px;
  border-color: transparent transparent transparent #6f5430;/*marron*/
}
 
#form-area1 input {
  display: inline-block;
  border-radius: 50px;
  background: transparent;
}
#form-area1 input:not([type=submit]) {
  /*width: 60%;*/
  padding: 6px 20px;
  border: 1px inset #decfbb;/*beige clair*/
  box-shadow: 0 10px 10px #6f5430 inset;/*marron*/
}
 
 
 
.width_form {
  /* min-width:1px!important;*/
  height: 14px;
  width: 50px;
  font-size: 3.5em;
  padding: 0;
  box-sizing: border-box;
}
 
.margin_top_form2 {
	margin-top :30px;
}
 
.margin_top_form1 {
	margin-top :60px;
}
input {
	height:50px;
	width:50px;
}
 
* { 
  margin:0; 
  padding:0; 
  border:0; }
 
html, body { 
  font-family:Arial,sans-serif; 
  font-size:100%; }
 
#navMain li {
  position:relative; /* nécessaire pour positionner les sous-menus et les flèches ! */
  width:500px;
}
 
#navMain a {
  display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
  padding:10px;
  font-family:Arial, sans-serif;
  color: #fff;
  background: #2980b9;
  text-decoration: none; /* ne pas souligner les liens */
}
 
 
#navMain a:hover {
  background: #20638f; /*change la couleur de fond*/
}
 
 /* MENU */
 #navMain ul {
	 height:120px;
 }
 
 
#navMain ul,
#navMain li {
  list-style: none;
  top:100%; left:0; /* sous le niveau 1 */
}
 
#navMain ul ul,#navMain ul ul ul {/* menus de niveau 2*/
  position:relative;
  width:100%;
  display:none;
  } 
 
#navMain ul ul a {
   background:#333;
  }
 
#navMain ul ul ul a {
   background:#444;
  }
 
#navMain ul li:hover > ul {
  display:block;/*on affiche menu niveau 2 au survol */
}
 
/* flèche */
#navMain li.hasSub:after {
    position:absolute;
    content:"\25BC";
    color:#fff;
    top: 10px;
  right: 10px;
}
 
#navMain li:hover.hasSub:after {
  color:yellow;
   -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
 
 
 
 
 
/*---------------- */
 
/* ------------------------------------------------------ */
/* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
/* on utilise les media queries pour modifier les styles  */
/* ------------------------------------------------------ */
/* MENU HORIZONTAL, centré - largeur 100%  */
@media screen and (min-width: 641px) 
{
  #navMain > ul {/* slt niveau 1 */
    display:table; /* se comporte comme une table */
    width:100%; /* largeur du menu */
    margin:0 auto;/* centrage. Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.*/
    min-width:640px;
  }
  #navMain > ul > li { 
    display:table-cell; /* se comporte comme une cellule de table */
    width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
  }
  #navMain ul li {/* on positionne le parent des niveau 2 pour que le position de l'enfant soit pris en compte */
  position:relative;
}
   /* niveau 2 (et suivants) */
 
  #navMain ul ul {
    position: absolute;/* positionné en absolu (SORT DU FLUX) */
    width: 100%;
    top:100%; /* positionné en absolu SOUS le niveau 1 */
    left:0;
  }
  /* niveau 3 (et suivants) */
  #navMain ul ul ul {
    position: absolute;/* positionné en absolu (SORT DU FLUX) */
    top:0;
    left:100%; /* A DROITE du niveau 2 */
 
}
  #navMain li li.hasSub:after {
 
   -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
#navMain li li:hover.hasSub:after {
  color:yellow;
   -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
 
}

Pour le CSS, j'ai laissé tout ce qui concerne le menu donc c'est assez long...Ma tentaive (vaine) pour fixer les dimensions des input est lignes 86 à 89. Comment faire pour les fixer ?

Laurent,
Il me semble que ton problème vient de ton padding et de ton font-size.
Ainsi tu mets padding:6px 20px;
Et font-size:3.5em;
Or 1em=100%=16px en général donc ton font-size= 52px; et cela ne peut pas rentrer dans une zone de 14px par 50px.
car height = 52px + 2 fois le padding de 6px=64px
et le width = 52px + 2 fois 20px = 92px
en purgeant ton code du php voila ce que cela donne:

Code:

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
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
#form-area1 input:not([type="submit"]) {
    border: 1px inset #decfbb;
    /*box-shadow: 0 10px 10px #6f5430 inset;*/
    padding: 6px 20px;
}
#form-area1 input {
    /*border-radius: 50px;*/
    display: inline-block;
}
.margin_top_form1 {
    margin-top: 5px;
}
.width_form {
	font-size: 3.5em;		/* 1em=16px 3.5em=52px */
	height: 64px;			/* 14px? 52px+12px (2x6px)=64px */
	width: 92px;			/* 50px? 42px+40px(2x20px)=92px */
}
.left-margin {
	margin-left: 120px;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<form id="authform"  action="/page/authenticate.php" method="post">
  <fieldset id="form-area1">
    <p>
      <label for="login2">Username</label>
      <input class="left-margin width_form margin_top_form1" id="login2" type="text" size="1" value="x" name="login2" />
    </p>
    <p>
      <label for="pwd2">Password</label>
      <input class="left-margin width_form margin_top_form1" id="pwd2" type="text" size="1" value="x" name="pwd2" />
    </p>
  </fieldset>
</form>

Si ça peut t'aider ... en modifiant un peu ton dernier post
https://codepen.io/JefReb/pen/EoEBMJ

11/01/2018, 10h37
laurentSc

Merci au développeur du dimanche :mouarf: qui a identifié ce qui posait problème dans mon code (le font-size).