Création d'un formulaire de connexion simple
J'essaie de créer une simple connexion HTML qui est placée dans une boîte. Je veux avoir quelque chose comme ceci :
![entrer la description de l'image ici][1]
J'ai fait quelques essais, mais ils semblent tous avoir été vains. Voici mon code jusqu'à présent. HTML :
<div id="login_form">
<form name="f1" method="post" action="login.php" id="f1">
<table>
<tr>
<td class="f1_label">User Name :</td><td><input type="text" name="username" value="" />
</td>
</tr>
<tr>
<td class="f1_label">Password :</td><td><input type="password" name="password" value="" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="login" value="Log In" style="font-size:18px; " />
</td>
</tr>
</table>
</form>
</div>
CSS :
#login_form {
position: absolute;
top: 20%;
left: 30%;
right: 30%;
bottom: 20%;
font-size: 18px;
}
#f1 {
background-color: #ccc;
border-style: solid;
border-width: 1px;
}
.f1_label {
white-space: nowrap;
}
Je veux que la boîte de connexion soit au centre du navigateur, j'ai donc utilisé #login_form
. J'ai quelques questions : l'utilisation de la balise fieldset
est-elle une meilleure solution ? Lorsque j'utilisais la balise fieldset
, cela créait plus de problèmes ; l'apparence du formulaire et la taille du texte & ; les champs de mot de passe changeaient.
Je comprends que la balise "table" ne doit être utilisée que pour les données tabulaires, mais l'utilisation de la balise "label" d'une autre manière semble perturber le fonctionnement du formulaire. label d'une autre manière semble perturber la taille/largeur des champs de mot de passe et de nom d'utilisateur (cela nécessite également plus de style).
Est-ce une mauvaise pratique de codage que d'utiliser "table" dans un formulaire ? Les navigateurs futurs rendront-ils mal les pages si j'utilise <table>
? Est-ce une mauvaise idée de garder le "nom" et l'"identifiant" du formulaire identiques ? J'ai l'impression que le fait de les garder identiques ne crée aucun problème (même avec l'utilisation de jQuery dans la même page).
Bon début pour apprendre les formulaires de connexion. Vous avez raison, fieldset n'est peut-être pas la meilleure balise.
Cependant, je vous suggère fortement de le coder en HTML5 en utilisant ses fonctions de formulaire robustes.
HTML5 est en fait plus facile à apprendre que l'ancien HTML pour la création de formulaires.
Par exemple, lisez ce qui suit.
N'était-ce pas facile à comprendre pour toi ?
Essayez ce http://www.hongkiat.com/blog/html5-loginpage/ et faites-moi savoir si vous avez des questions.
édité la réponse de @Asraful Haque avec un peu de js pour montrer et cacher la boîte