Я пытаюсь создать простой 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> следует использовать только для табличных данных, но использование
метка каким-либо другим способом, похоже, мешает размеру/ширине полей пароля и имени пользователя (для этого также требуется больше стилей).
Неправильная практика кодирования для использования <table> в форме? Будущие браузеры неправильно отображают страницы, если я использую <table>? Сохраняет ли name и id формы ту же самую плохую идею? Я чувствую, что сохраняю их одинаково, не создает никаких проблем (даже с использованием jQuery на той же странице).