Я не уверен, является ли это настолько полным, как то, что вы просите, но мне нравится идти с чем-то простым, как это:
<fieldset>
<legend>New customer? Provide the following</legend>
<label for="FirstName">First Name:</label>
<input type="text" ID="FirstName" name="FirstName" />
<label for="LastName">Last Name:</label>
<input type="text" ID="LastName" name="LastName" />
<label for="Address">Address:</label>
<input type="text" ID="Address" name="Address" />
<label for="City">City:</label>
<input type="text" ID="City" name="City" />
<label for="State">State:</label>
<input type="text" ID="State" name="State" />
<label for="Zip">Zip:</label>
<input type="text" ID="Zip" name="Zip" />
<input type="submit" Text="Submit Order" />
</fieldset>
Используя CSS, как это:
fieldset {
overflow: hidden;
}
label {
clear: both;
float: left;
margin-top: 10px;
width: 125px;
/* If you want the labels flush along the right edge */
padding-right: 5px;
text-align: right;
}
input {
float: left;
margin-top: 10px;
}
/* Align the submit button under the fields */
input[type=submit] {
clear: both;
float: left;
margin-left: 135px;
margin-top: 10px;
}
Это создает макет, показанный в начале изображения в этом (совершенно не связанном) посте . Там также есть исходный код с разметкой и CSS, если вы не против ASP.NET.
Говоря о повторном использовании, я обнаружил, что базовая структура достаточно гибкая, чтобы ее можно было использовать где угодно. Например, мы использовали в основном ту же разметку и CSS для этой более настраиваемой формы контакта: http://www.thirtyfiveatlanta.com/meet/