Хорошо, что вы не хотите использовать тег таблицы для разметки. При переключении следует помнить о том, чтобы сделать HTML как можно более семантическим. То, что это означает, может варьироваться, поскольку нет строгих строгих правил, но это может выглядеть примерно так:
<form [..]>
<ul>
<li class="hasError">
<em class="feedback">error message here</em>
<div class="attribute">
<label for="firstName">First name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="firstName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
<li>
<em class="feedback" />
<div class="attribute">
<label for="firstName">Last name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="lastName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
</ul>
</form>
Это обеспечивает следующее:
- Поместив сообщение об ошибке выше div, вы можете сделать произвольно длинное сообщение об ошибке без потери выравнивания
- Каждый элемент ввода (и метка) хранится в одном элементе списка, что позволяет сгруппировать их логически. Он также читает что-то вроде следующего в программе чтения с экрана: «Форма. Список из двух элементов. Метка [...]». Это дает пользователю подсказку о том, что форма содержит два ввода.
- Добавив класс hasError к элементу списка, вы можете легко настроить таргетинг на элементы-потомки с помощью CSS для стилизации с учетом ошибок.
Пример файла CSS может выглядеть примерно так (обратите внимание, что это не проверено):
form li {
width: 300px;
}
form li.hasErrors {
width: 298px;
border: 1px red;
background-color: #C55;
}
form .attribute {
float: left;
clear: left;
width: 60px;
}
form .input {
float: right;
clear: none;
width: 240px;
}
form .feedback {
display: block;
padding-left: 50px;
color: red;
}
form .description {
display: block;
clear: both;
color: #888;
}
.clearBoth { display: block; clear: both; }