Longueur d'un champ texte qui rétrécit sous IE 8

**dev197** · 11/08/2009, 11h07

Bonjour,

J'ai créé une application PHP qui content 6 fichiers :

index.php
login.php
dbconnect.php
accueil.php
fonction1.php
deconnexion.php

L'accès à l'application se fait après identification par login/password sur la page index.php.

index.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
 
<title> Authentification</title>
<center>
<br>
<strong>Authentification</strong>
<br>
<?php
echo '<br><br>Veuillez saisir votre identifiant et mot de passe  :';
?>
<br><br>
<form action="login.php" method='post'>
<table align="center" border="0">
  <tr>
    <td>Identifiant :</td>
    <td><input type="text" name="login" maxlength="10"></td>
  </tr>
  <tr>
    <td>Mot de passe :</td>
    <td><input type="password"name="pass" maxlength="10"></td>
  </tr>
    <tr>
	<td></td>
    <td colspan="2" align="left"><input type="submit" value="Valider"></td>
  </tr>
</table>
</form>

Après post du formulaire (méthode POST), l'utilisateur est renvoyé sur la page login.php.

login.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
34
35
36
 
<?php
session_start();
header("Content-Type: text/html; charset=iso-8859-15");
include('dbconnect.php');
 
 
if(isset($_POST) && !empty($_POST['login']) && !empty($_POST['pass'])) {
  extract($_POST);
  // on recupère le password de la table associé au login du visiteur
  $sql = "select password from utilisateurs where login='".$login."'";
  $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
 
  $data = mysql_fetch_assoc($req);
 
  if($data['password'] != $pass) {
    echo '<p><font color="red">L\'identifiant et/ou le mot de passe sont incorrects.<br>Merci de recommencer votre saisie.</font></p>';
    include('index.php'); // On inclut le formulaire d'identification
	mysql_close($db);
    exit;
  }
  else {
    $_SESSION['login'] = $login;
 
    // lien pour renvoyer vers la page d'accueil
	include('accueil.php');
	exit;
  }   
}
else {
  echo '<p><font color="red">Un ou plusieurs champs n\'ont pas été remplis. <br>Merci de recommencer votre saisie.</font></p>';
   include('index.php'); // On inclut le formulaire d'identification
   mysql_close($db);
   exit;
}
?>

Voici la page de connexion à la Base de Données (dbconnect.php).

dbconnect.php :

Code :

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

1
2
3
4
5
6
7
8
 
<?php
// ouverture de connexion vers mysql
 
$db = mysql_connect('localhost', 'root', 'password');  
mysql_select_db('app_usr',$db);                    
 
?>

Voici la page d'accueil (accueil.php).

accueil.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
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
 
<?php
session_start();
header('charset=iso-8859-15; Content-Type: text/html'); 
 
/*
si la variable de session login n'existe pas cela siginifie que le visiteur
n'a pas de session ouverte, il n'est donc pas logué ni autorisé à
acceder à l'espace membres
*/
if(!isset($_SESSION['login'])) {
  echo 'Vous n\'êtes pas autorisé à accéder à cette zone';
  include('index.php');
  exit;
}
else {
    include('dbconnect.php');
	$login = $_SESSION['login'];
    $sql = "select pseudo from utilisateurs where login='".$login."'";
    $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
	$data = mysql_fetch_assoc($req);
	echo'<div style="text-align: right;">'.$data['pseudo'].'&nbsp</div>';
  }   
?> 
<html>
<head>
<style type="text/css">
ul
{
	list-style-type:none;
}
 
 
li
{
	display:inline;
}
 
a
{
	float:left;
	width:30%;
	text-align:center;
	text-decoration:none;
	color:white;
	font-weight:bold;
	background:#999900;
	padding:5px;
	margin: 0 auto;
	border-right:1px solid #FFFFFF;
}
 
a:hover
{
	background:#CCCC00;
}
</style>
<title>Accueil</title>
<center>
 
</head>
<body>
 
<strong>Accueil</strong>
<br><br></center>
<br>
<ul>
<li><a href="fonction1.php">Fonction 1</a></li>
<li><a href="fonction2.php">Fonction 2</a></li>
<li><a href="index.php">Se déconnecter</a></li>
</ul>
 
</body>
</html>

La Fonction 1 est la suivante : (fonction1.php).

fonction1.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
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
 
<?php
session_start();
header("Content-Type: text/html; charset=iso-8859-15");
 
/*
si la variable de session login n'existe pas cela siginifie que le visiteur
n'a pas de session ouverte, il n'est donc pas authentifié ni autorisé à
accéder à l'espace membres
*/
if(!isset($_SESSION['login'])) 
{
	echo 'Vous n\'êtes pas autorisé à accéder à cette zone';
	include('login.php');
	exit;
}
else 
{
    include('dbconnect.php');
	$login = $_SESSION['login'];
    $sql = "select pseudo from utilisateurs where login='".$login."'";
    $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
    $data = mysql_fetch_assoc($req);
	echo'<div style="text-align: right;">'.$data['pseudo'].'&nbsp</div>';
  } 
?>
 
<html>
<head>
<title> Fonction 1</title>
 
<style type="text/css">
ul
{
	list-style-type:none;
}
 
 
li
{
	display:inline;
}
 
.menuhaut
{
	position : relative;
	top:-45px;
	left:-48px; 
	float:left;
	width:20%;
	text-align:center;
	text-decoration:none;
	color:white;
	font-weight:bold;
	background:#999900;
	padding:5px;
	margin: 0 auto;
	border-right:1px solid #FFFFFF;
}
 
 
a
{
	float:left;
	width:18%;
	text-align:center;
	text-decoration:none;
	color:white;
	font-weight:bold;
	background:#999900;
	padding:5px;
	margin: 0 auto;
	border-right:1px solid #FFFFFF;
}
 
a:hover
{
	background:#CCCC00;
}
</style>
 
 
</head>
<body>
<ul>
<li><a class="menuhaut" href="accueil.php">Accueil</a></li>
<li><a class="menuhaut" href="fonction2.php">Fonction 2</a></li>
 
<li><a class="menuhaut" href="deconnexion.php">Se déconnecter</a></li>
</ul>
<br><br>
<center><strong>Fonction 1</strong></center>
<br><br>
</body>
</html> 
 
<?php
phpinfo();
?></center>

La fonction deconnexion.php est la suivante :

deconnexion.php :

Code :

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

1
2
3
4
5
6
7
8
 
<?php
session_start();
$_SESSION = array();
session_start();
 
header('Location: index.php');
?>

Lorsque je me trouve dans la page fonction1.php et que je clique sur Se déconnecter, je suis renvoyé vers la page index.php.

Problème sous Internet Explorer 8.0.6 : Si je clique sur le bouton Retour du navigateur, le champ texte pour le mot de passe se réduit par rapport à la fonction d'origine index.php.

Sauriez-vous comment rétablir la bonne dimension du champ texte pour le mot de passe après avoir cliqué sur le bouton Retour du navigateur ?

NB: Sous Firefox 3.5.2, le champ texte pour le mot de passe reste à la bonne dimension.
Pour des raisons de compatibilité, je dois absolument avoir les mêmes dimensions pour le champ texte de l'identifiant et du mot de passe sous Internet Explorer 8.0.6.

**bricecol** · 11/08/2009, 11h19

parenthèse : ton script de déconnexion est bizarre :p

sinon, je ne comprends pas ton problème, tu as mis beaucoup de choses
pour peut-être rien. expliques-moi, tu veux simplement avoir la même taille
de champs login et pass ? et si oui, cette taille doit être en rapport avec
quelque chose ?

si tu veux manipuler la taille de tes champs, insères-les en dur en xhtml,
ou via du CSS ou alors, utilises Javascript si tu as besoin de faire quelque
chose de plus dynamique. le back du navigateur n'y changera rien.

**dev197** · 11/08/2009, 11h24

Bonjour,

Tout d'abord, merci à bricecol pour sa réactivité.
Pour la parenthèse du script de déconnexion, je suis obligé de réinitialiser les variables de session pour forcer l'expiration. En tout cas, ce script fonctionne à merveille!

Pour en revenir au problème du champ texte qui rétrécit, quel exemple de code CSS intégrable à index.php permettrait de fixer la longueur du champ "Mot de passe"?

**bricecol** · 11/08/2009, 11h39

dans la feuille de style CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
/* cas où le formulaire à un ID */
#mon_form input[type=text], #mon_form input[type=password]{
width:120px;
}
 
/* ou plus généralement,
à tous les input de type text et password */
input[type=text], input[type=password]{
width:120px;
}

dans le XHTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form id="mon_form" ...>
  <p>
    <label for="login">Pseudo :</label><br/>
    <input type="text" id="login" name="login" .../>
  </p>
  <p>
    <label for="pass">Mot de passe :</label><br/>
    <input type="password" id="pass" name="pass" .../>
  </p>
  <p>
    <input type="submit"/>
  </p>
</form>

ou dans le xhtml directement

Code :

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

1
2
3
4
5
 
<p>
    <label for="pass">Mot de passe :</label><br/>
    <input type="password" id="pass" name="pass" style="width:120px;" .../>
</p>

**dev197** · 11/08/2009, 12h10

J'ai modifié le fichier index.php comme suit :

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
 
<html>
<title>Authentification</title>
<head>
<style type="text/css">
#mon_form input[type=text];
#mon_form input[type=password]{
width:120px;
}
 
/* ou plus généralement */
/*
input[type=text], input[type=password]{
width:120px;}
*/
 
</style>
</head>
<body>
<center>
<br>
<strong>Authentification</strong>
<br>
<?php
echo '<br><br>Veuillez saisir votre identifiant et mot de passe :';
?>
<br><br>
<form id="mon_form" action="login.php" method='post'>
<p>
    <label for="login">Identifiant :</label>
    <input type="text" id="login" name="login" type="text"/>
  </p>
  <p>
    <label for="pass">Mot de passe :</label>
    <input type="password" id="pass" name="pass" type="password"/>
  </p>
  <p>
    <input type="submit" value="Valider"/>
  </p>
</form>
</center>
</body>
</html>

Mais je n'arrive pas à aligner verticalement les 2 champs texte.

**dev197** · 11/08/2009, 12h13

En fait je viens de lire ta réponse sur le xhtml, c'était la bonne!
Merci encore!

**bricecol** · 11/08/2009, 12h20

attention, j'ai vu un ";" qui ne devrait pas être dans le CSS.
voilà la bonne version du css :

Code :

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

1
2
3
4
5
 
#mon_form input[type=text],
#mon_form input[type=password]{
width:120px;
}

pour aligner verticalement, c'est encore autre chose

voici un lien : http://a-pellegrini.developpez.com/t...ss/formulaire/

Longueur d'un champ texte qui rétrécit sous IE 8 [PHP 5.2]

Langage PHP

Discussions similaires

Partager

Partager