Formulaire de connexion

**Sheva07** · 12/08/2015, 11h38

Bonjour a tous,

J'ai besoin d'aide a propos de mon formulaire de connexion. je voudrais le rendre plus convivial , beau, plus dynamique.
Voici un apercu de mon formulaire:

Pièce jointe 185224

Voici le code source :

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
60
61
62
63
64
    <?php include ('election.php');
$requete="SELECT * FROM utilisateur";
$resultat=mysql_query($requete);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-image: url();
	background-repeat: no-repeat;
	background-color: #0033FF;
}
body,td,th {
	color: #FFFFFF;
}
-->
</style></head>
 
<body>
<div align="center"></div>
<form id="form1" name="form1" method="post" action="validation.php">
 
  <div align="center">
    <table width="400" border="2">
      <tr>
        <td colspan="2">Veuillez vous identifier </td>
      </tr>
      <tr>
        <td width="97">Login</td>
        <td width="285"><label>
          <input name="login" type="text" id="login" />
        </label></td>
      </tr>
      <tr>
        <td>Mot de passe </td>
        <td><label>
          <input name="passwd" type="text" id="passwd" />
        </label></td>
      </tr>
      <tr>
        <td>Type</td>
        <td><label>
          <select name="type" id="type">
            <option>Faites votre choix</option>
            <option value="administrateur">administrateur</option>
            <option value="Etudiant">Etudiant</option>
            <option value="Enseignant">Enseignant</option>
          </select>
        </label></td>
      </tr>
      <tr>
        <td><input name="btn_id" type="submit" id="btn_id" value="Valider" /></td>
        <td>&nbsp;</td>
      </tr>
    </table>
  </div>
</form>
<p align="center">&nbsp;</p>
</body>
</html>

Merci a vous !

**mathieu** · 12/08/2015, 12h38

déjà tu peux enlever le fond bleu et mettre le design de ton site autour du formulaire

et ensuite tu peux t'inspirer de formulaires déjà existants, comme le suivant par exemple ;-)
http://www.developpez.net/forums/login.php?do=login

**Sheva07** · 12/08/2015, 14h30

Merci a vous j'ai fait quelques modifications ! voici le resultats :

Nom : co.JPG
Affichages : 176
Taille : 70,4 Ko

Et voici mes codes :

-PHP :

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
 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>
 
<link rel="stylesheet" href="style.css" />
 
</head>
 
<body>
 
<nav><a href="#" class="focus">Log In</a> | <a href="register.html">Register</a></nav>
 
<form>
 
    <h2>Log In</h2>
 
    <input name="text" type="text" class="text-field" placeholder="Username" />
    <input type="password" class="text-field" placeholder="Password" />
    <select name="type" id="type">
            <option>Faites votre choix</option>
            <option value="administrateur">administrateur</option>
            <option value="Etudiant">Etudiant</option>
            <option value="Enseignant">Enseignant</option>
          </select>
    <input type="button" value="Log In" class="button" />
 
</form>
 
</body>
</html>

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
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
 
body {
    background: url(pictures/background.png) fixed 50% no-repeat white;
    font-family: Helvetica;
}
 
h2 {
    color: #a6a6a6;
}
 
/* NAVIGATION */
 
nav {
    position: fixed;
    top: 10px;
    left: 10px;
}
 
nav a {
    color: #4889C2;
    font-weight: bold;
    text-decoration: none;
    opacity: .3;
    -moz-transition: all .4s;
}
 
nav a:hover {
    opacity: 1;
}
 
nav a.focus {
    opacity: 1;
}
 
/* LOGIN & REGISTER FORM */
 
form {
    width: 280px;
    height: 260px;
    margin: 200px auto;
    background: white;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0,0,0, .4);
    text-align: center;
    padding-top: 1px;
}
 
form.register{                                                                              /* Register form height */
    height: 420px;
}
 
form .text-field {                                                                          /* Input fields; Username, Password etc. */
    border: 1px solid #a6a6a6;
    width: 230px;
    height: 40px;
    border-radius: 3px;
    margin-top: 10px;
    padding-left: 10px;
    color: #6c6c6c;
    background: #fcfcfc;
    outline: none;
}
 
form .text-field:focus {
    box-shadow: inset 0 0 2px rgba(0,0,0, .3);
    color: #a6a6a6;
    background: white;
}
 
form .button {                                                                              /* Submit button */
    border-radius: 3px;
    border: 1px solid #336895;
    box-shadow: inset 0 1px 0 #8dc2f0;
    width: 242px;
    height: 40px;
    margin-top: 20px;
 
    background: linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
    background: -o-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
    background: -moz-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
    background: -webkit-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
    background: -ms-linear-gradient(bottom, #4889C2 0%, #5BA7E9 100%);
 
    cursor: pointer;
    color: white;
    font-weight: bold;
    text-shadow: 0 -1px 0 #336895;
 
    font-size: 13px;
}
 
form .button:hover {
    background: linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
    background: -o-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
    background: -moz-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
    background: -webkit-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
    background: -ms-linear-gradient(bottom, #5c96c9 0%, #6bafea 100%);
}
 
form .button:active {
    background: linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
    background: -o-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
    background: -moz-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
    background: -webkit-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
    background: -ms-linear-gradient(bottom, #5BA7E9 0%, #4889C2 100%);
 
    box-shadow: inset 0 0 2px rgba(0,0,0, .3), 0 1px 0 white;

Ma questions est : comment faire pour que le menu deroulant ait la meme forme/couleur etc que celle des autres champs(Username , Password) ?

Merci.

Formulaire de connexion

JavaScript

Vue hybride

Discussions similaires

Partager

Partager