Page de connexion

HTML/CSS

12 août 2015 à 12:56:53

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:

Voici le code source :

<?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 !

philiga

12 août 2015 à 13:29:40

Bonjour,

Ouf, j'ai cru lire "Je voudrais qu'on me le rende plus convivial , beau, dynamique...",

mais en lisant mieux, je vois que tu as bien écrit "Je voudrais le rendre plus...".

En ce cas, tout va bien: vas-y !

On n'a rien contre, c'est promis !

Tu disposes au besoin de 45 cours sur le CSS rien que sur ce site...

et il y a même un forum où on aide ceux qui n'ont pas trouvé après avoir cherché et tenté par eux-mêmes ;

Que demander de plus...?

-
Edité par philiga 12 août 2015 à 13:30:12

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Bella18

12 août 2015 à 13:30:59

Salut,

Ouh lala ce qui serait mieux, c'est juste un conseil, c'est de séparer le css du code.. et tu inclus ton css dans ton code de bases ;-)

Ensuite que souhaites tu faire concrètement?

Car si c'est la mise en forme, le rendre plus beau.. je te conseille alors de séparer ton code css de ton code html/php, et de te concentrer sur le css :-)

tatsumisheva

12 août 2015 à 13:46:11

Oui le rendre plus beau... mais je suis encore on va dire un debutant en css. (Rendre les champs plus beaux , la liste deroulante etc..) voci un peu l'idée

Merci.

Lucky13

12 août 2015 à 13:53:44

Slt,

Comme tu débutes en css, c'est justement l'occasion pour toi de faire une copie du code et de procéder à des essais en t'aidant des divers tutos/exemples sur le web.

Tu y gagnera plus pour la suite, et ce que tu auras appris te servira pour tes futures scripts.

Tes champs sont alignés par une mise en page par tableau, pour commencer refais la même chose avec le positionnement des éléments en css (exit les td tr). Ensuite c'est de la déco et de la lisibilité avec color; background, margin, padding, etc..

support -> https://openclassrooms.com/courses/aligner-ses-formulaires-sans-tableaux

-
Edité par Lucky13 12 août 2015 à 13:56:53

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

tatsumisheva

12 août 2015 à 14:25:27

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

Et voici mes codes :

PHP :

<!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>

Et CSS :

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.

philiga

12 août 2015 à 17:02:07

Tu auras peut-être meilleur temps (et les utilisateurs aussi) en remplaçant ce menu déroulant par trois boutons radio

(en leur donnant bien le même name pour qu'ils soient mutuellement exclusifs) ;

petite demo ici: http://jsbin.com/ludocu/2/edit?html,css,output

A toi de modifier l'habillage selon tes préférences (j'ai interverti l'ordre des input et des label ; ça me semble plus clair ainsi avec le cercle à gauche du mot).

-
Edité par philiga 12 août 2015 à 17:04:21

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)