Taille champs formulaire

**el_profesor** · 21/02/2015, 23h26

Bonjour à tous,

J'ai un petit soucis, je n'arrive pas à mettre la bonne taille à mes champs de mon formulaire. Je précise que je suis un débutant de chez débutant. Je vous avoue que le but c'est que ça ressemble à peu près à ça : 37.140.224.89

Mon code HTML

Code php :

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
<?php
include('login.php'); 
 
if(isset($_SESSION['login_user'])){
header("location: profile.php");
}
?>
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Downloads</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
 
        <h1>Downloads</h1>
        <div id=login">
        <h2>Login</h2>
 
        <form action="" method="post">
 
        <label>Username :</label>
        <input id="name" name="username" type="text">
 
        <label>Password :</label>
        <input id="password" name="password" type="password">
        <a href="/account/password_reset/">Lost password</a>
 
        <input name="Connexion" type="submit" value=" Login" >
 
        <span><?php echo $error; ?></span>
 
        </form>
    </div>
</body>
</html>

Mon code CSS

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
body {
     background-color:#F3F6F8;
}
 
h1 {
   background-color:#FFFFFF;
   text-align:center;
   -moz-border-radius:3px 0 0 0;
   -webkit-border-radius:3px 0 0 0;
   margin:-10px -40px;
   padding:12px;
   color: #00669E;
 
  }
 
h2 {
        text-align:center;
        color:#4A4A4A;
}
label {
        color:#4A4A4A;
}
 
input[name=username],input[name=password] {
        margin-bottom:0px;
}
 
input[type=text],input[type=password] {
        width:90%;
        /*Epaisseur*/
        padding:8px;
        margin-top:8px;
        margin-bottom:0px;
        border:2px solid #E3EBEF;
        padding-left:20px;
        font-size:16px;
        font-family:raleway;
}
 
#login {
        background-color:#FFFFFF;
        text-align:center;
        -moz-border-radius:3px 0 0 0;
        -webkit-border-radius:3px 0 0 0;
        margin:-10px -40px;
        padding:15px;
}
 
body {
         width:300px;
 /*      float:left;*/
         -moz-border-radius:10px;
         -webkit-border-radius:10px;
         font-family:raleway;
         border:7px solid #DADDDE;
   padding:10px 40px 62px;
         margin:auto;
         margin-top:53px;
}

Je vous remercie.

**NoSmoking** · 21/02/2015, 23h36

Bonjour,
j'ai beau relire j'ai du mal à comprendre ce que tu cherches à faire !

**el_profesor** · 22/02/2015, 01h50

En faite le champs de mon formulaire ou on rentre username et password je souhaiterais qu'il prenne toute la largeur possible. Limite 2px à gauche et à droite.
De plus username et password doivent être coller au champs du formulaire et ça je n'y arrive pas.
Merci.

**NoSmoking** · 22/02/2015, 09h37

je n'avais pas vu que ta suite de chiffres était une adresse.

Pose toi la question à quoi servent les padding et notamment sur le BODY padding:10px 40px 62px; dans ton cas.

**el_profesor** · 22/02/2015, 23h09

Hum ... Je pense voir ce que tu veux dire. Mon padding de mon body est privilégié sur mon input. Donc il faudrait que je spécifie un padding plus précis pour mes input ? De plus est-ce une bonne idée d'appliquer mon CSS au body ?

**NoSmoking** · 22/02/2015, 23h38

Je partirais sur une structure de ce type, d'après la tienne

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="formulaire">
  <h1>Downloads</h1>
  <h2>Login</h2>
  <form action="" method="post">
    <label>Username :</label>
    <input id="name" name="username" type="text">
    <label>Password :</label>
    <input id="password" name="password" type="password">
    <a href="/account/password_reset/">Lost password</a>
    <input name="Connexion" type="submit" value=" login">
    <span><?php echo $error; ?></span>
  </form>
<div>

avec un CSS, sur base du tien, incomplet mais je te laisse le soin de le terminer et de la mettre à ta sauce

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
#formulaire {
  background-color:#FFF;
  text-align:center;
  color:#4A4A4A;
  width:300px;
  margin: 2em auto;
  padding:0.25em;
  border:7px solid #DADDDE;
}
h1 {
  background-color:#EEF;
  color: #00669E;
  padding:12px;
}
h2 {
  color:#4A4A4A;
}
label {
  display:block;
  text-align:left;
}
input {
  width: 90%;
  border:2px solid #E3EBEF;
}

Taille champs formulaire

CSS

Vue hybride

Discussions similaires

Partager

Partager