Een eenvoudig inlogformulier maken
Ik probeer een eenvoudige HTML log-in te maken die in een box wordt geplaatst. Ik wil zoiets als dit hebben:
Voer hier de beschrijving van de afbeelding in
Ik heb een paar dingen geprobeerd maar ze lijken allemaal tevergeefs te zijn geweest. Hier is mijn code tot nu toe. 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;
}
Ik wil dat het inlogvak in het midden van mijn browser staat, dus heb ik gebruik gemaakt van #login_form
. Ik heb een paar vragen: is het gebruik van de fieldset
tag een betere manier? Toen ik de fieldset
tag gebruikte, veroorzaakte het meer problemen; het uiterlijk van het formulier en de grootte van de tekst & wachtwoord velden veranderden.
Ik begrijp dat <table>
alleen gebruikt moet worden voor gegevens in tabelvorm, maar het gebruik van
label op een andere manier lijkt te knoeien met de grootte/breedte van wachtwoord en gebruikersnaam velden (het vereist ook meer styling).
Is het een slechte manier van coderen om <table>
in een formulier te gebruiken? Zullen toekomstige browsers de pagina's verkeerd renderen als ik <table>
gebruik? Is het een slecht idee om de naam
en id
van het formulier hetzelfde te houden? Ik heb het gevoel dat ze hetzelfde houden geen problemen oplevert (zelfs niet met het gebruik van jQuery in dezelfde pagina).
Goed begin om login formulieren te leren. Je hebt gelijk, fieldset is misschien niet de beste tag.
Ik stel echter voor dat je het codeert in HTML5 door gebruik te maken van de robuuste formulierfuncties.
HTML5 is eigenlijk gemakkelijker te leren dan oudere HTML voor het maken van formulieren.
Lees bijvoorbeeld het volgende.
Was dat niet makkelijk voor je te begrijpen?
Probeer dit http://www.hongkiat.com/blog/html5-loginpage/ en laat het me weten als je vragen hebt.
bewerkt @Asraful Haque antwoord met een beetje js om de box te tonen en te verbergen