シンプルなログインフォームの作成
ボックス内に配置されるシンプルなHTMLのログインを作成しようとしています。以下のようなものを作りたいと思っています。
いくつか試してみましたが、どれも無駄だったようです。これまでの私のコードは以下の通りです。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;
}
ログインボックスをブラウザの中央に表示させたいので、#login_form
を利用しています。いくつか質問があるのですが、fieldset
タグの使用はより良い方法なのでしょうか?私が fieldset
タグを使用したときには、フォームの外観やテキスト&スタンプ、パスワードフィールドのサイズが変わってしまうなど、さらなる問題が発生しました。
また、<table>
は表形式のデータにのみ使用すべきだと理解していますが、それ以外の方法での
labelを他の方法で使用すると、パスワードとユーザー名のフィールドのサイズや幅がおかしくなるようです(さらにスタイリングが必要になります)。
フォーム内で <table>
を使用することは、コーディングの習慣に反するのでしょうか?将来のブラウザでは、<table>
を使用するとページの表示がおかしくなりますか?フォームの name
と id
を同じにするのは良くないことですか?同じにしても問題はないような気がします(同じページでjQueryを使っても)。
12
3
ログインフォームを学ぶための素晴らしいスタートとなりました。おっしゃる通り、fieldsetは最適なタグではないかもしれません。
しかし、HTML5の強力なフォーム機能を利用して、HTML5でコーディングすることを強くお勧めします。
HTML5は旧来のHTMLよりもフォーム作成の習得が容易です。
例えば、次のように読んでみてください。
わかりやすかったでしょうか?
この http://www.hongkiat.com/blog/html5-loginpage/ を試してみて、何か疑問があれば教えてください。
編集 @Asraful Haque ボックスの表示と非表示を切り替えるために、ちょっとしたjsを使って回答しました。