Criar um formulário de login simples
Estou tentando criar um simples log-in em HTML que é colocado em uma caixa. Eu quero ter algo como isto:
Eu tentei algumas coisas, mas todas parecem ter sido em vão. Aqui está o meu código até agora. 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;
}
Quero que a caixa de login esteja no centro do meu navegador, por isso fiz uso de #login_form_form
. Eu tenho algumas perguntas: a utilização da tag fieldset
é uma maneira melhor? Quando utilizei a tag fieldset
, ela criou mais problemas; a aparência do formulário e o tamanho do texto & os campos de senha mudaram.
Eu entendo que <table>
deve ser utilizado apenas para dados tabulares, mas a utilização de
de qualquer outra forma, parece que a etiqueta desorganiza o tamanho/largura dos campos de senha e nome de usuário (também requer mais estilo).
É uma má prática de codificação utilizar <table>
de uma forma? Os futuros navegadores renderizarão as páginas de forma errada se eu utilizar <table>
? Manter o name
e o id
do formulário é a mesma idéia ruim? Eu sinto que mantê-los iguais não cria nenhum problema (mesmo com o uso de jQuery na mesma página).
Óptimo Formulário de início de sessão de aprendizagem. Você está certo, o fieldset pode não ser a melhor tag.
No entanto, sugiro que o codifique em HTML5 utilizando as suas robustas funcionalidades de formulário.
HTML5 é realmente mais fácil de aprender do que HTML antigo para criar formulários.
Por exemplo, leia o seguinte.
Não foi fácil para você entender?
Tente este http://www.hongkiat.com/blog/html5-loginpage/ e me avise se tiver alguma dúvida.
editado @Asraful Haque responde com um pouco de js para mostrar e esconder a caixa