Ответ 1
Вы должны обернуть каждую комбинацию меток-ввод в элементе, а затем обернуть этот элемент в некоторый контейнер. Этот контейнер должен иметь min-width и display: inline-block;.
Затем вы позволяете всем элементам ввода плавать вправо, и все готово.
Это приводит к очень простой, чистой и семантической разметке с eqaully чистым и поддерживаемым CSS, и никаких требований для JavaScript, jQuery и других причудливых вещей.
Вы можете сделать что-то вроде:
<form>
<fieldset>
<p><label for="lorem">lorem</label><input type="text" id="lorem" /></p>
<p><label for="ipsum">ipsum</label><input type="text" id="ipsum" /></p>
<p><label for="li">li</label><input type="text" id="li" /></p>
</fieldset>
</form>
с помощью css
fieldset {
min-width: 100px;
display: inline-block;
}
fieldset input{
float: right;
}
Здесь вы можете видеть, как это выглядит. Очевидно, вы можете стилизовать свою форму с полями, прокладками и т.д.
Кроме того, если вы хотите иметь оболочку, которая семантически более точна, вы можете использовать упорядоченный список. Затем вы можете создавать все, что хотите, и иметь даже приятную дополнительную оболочку (<ol>), которую вы можете использовать без добавления семантического мусора.
Пример:
<form>
<fieldset>
<legend>First Example:</legend>
<ol>
<li><label for="lorem">lorem</label><input type="text" id="lorem" /></li>
<li><label for="ipsum">ipsum</label><input type="password" id="ipsum" /></li>
<li><label for="li">li</label><input type="text" id="li" /></li>
</ol>
</fieldset>
<fieldset>
<legend>Second Example:</legend>
<ol>
<li><label for="a">a</label><input type="text" id="a" /></li>
<li><label for="b">b</label><input type="number" id="b" /></li>
<li><label for="c">c</label><input type="range" id="c" /></li>
</ol>
</fieldset>
<fieldset>
<legend>Third Example:</legend>
<ol>
<li><label for="XXXXXXXX">XXXXXXXX</label><input type="email" id="XXXXXXXX" /></li>
<li><label for="YYYYYYYYYYYY">YYYYYYYYYYYY</label><input type="search" id="YYYYYYYYYYYY" /></li>
<li><label for="z">z</label><input type="text" id="z" /></li>
</ol>
</fieldset>
</form>
в стиле
fieldset {
border: 1px solid silver;
margin: 10px;
padding: 10px;
min-width: 100px;
display: inline-block;
}
fieldset li{
width: 100%;
display: block;
position: relative;
}
fieldset label{
margin-right: 10px;
position: relative;
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input{
float: right;
}
приведет к этому представлению. Вы можете даже поиграть с ним на этой скрипке: http://jsfiddle.net/ramsesoriginal/b6Taa/
EDIT, чтобы показать, как это добавляет разметку
Со следующим html:
<form>
<label for="lorem">lorem<input type="text" id="lorem" /></label>
<label for="ipsum">ipsum<input type="text" id="ipsum" /></label>
<label for="li">li<input type="text" id="li" /></label>
</form>
и следующий CSS:
form{
min-width: 100px;
display: inline-block;
}
form input{
float: right;
}
form label{
display:block;
margin-bottom: 2px;
}
Вы получаете эффект, который вы хотите. Вы можете поиграть с ним здесь. Но добавление <fieldsets> с <legend> не добавляет ненужной разметки, наоборот: оно помогает вам группировать входы. И добавление <ol> тоже семантически корректно, поскольку комбинации меток/ввода являются семантическими единицами, а форма представляет собой список полей, которые должны заполняться в логическом порядке.
Опять же, вы можете избежать полей, списков и всего остального и до сих пор добиться желаемого эффекта, но семантически было бы иметь смысл иметь хотя бы набор полей с меткой.
EDIT2: вот как выглядит "реальная" форма регистрации с хорошей семантической разметкой:
<form>
<ol>
<fieldset>
<legend>Account</legend>
<li><label for="username">Username</label><input type="text" id="username" required /></li>
<li><label for="password">Password</label><input type="password" id="password" required /></li>
</fieldset>
<fieldset>
<legend>Personal Data</legend>
<li><label for="name">Name</label><input type="text" id="name" /></li>
<li><label for="surname">Surname</label><input type="text" id="surname" /></li>
<li><label for="dob">Date of birth</label><input type="date" min="1900-01-01" max="2012-02-17" placeholder="YYYY-MM-DD" id="dob" /><span class="additionalInfo">Please input the date of birth in the following format: YYYY-MM-DD</span></li>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<li><label for="email">E-mail</label><input type="email" id="email" required placeholder="[email protected]" /></li>
<li><label for="tel">Telephone number</label><input type="tel" id="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><span class="additionalInfo">Please input the telephone number in the following format: (555) 555-5555</span></li>
<li><label for="url">Website</label><input type="url" id ="url" placeholder="http://www.example.com"></li>
</fieldset>
<li><input type="submit" /></li>
</ol>
</form>
и стиль:
fieldset {
border: 1px solid silver;
margin: 10px;
padding: 10px;
min-width: 100px;
display: inline-block;
}
fieldset li{
width: 100%;
display: block;
position: relative;
margin-bottom: 2px;
}
fieldset label{
margin-right: 10px;
position: relative;
}
fieldset label:after{
content: ": ";
position: absolute;
right: -0.2em;
}
fieldset input{
float: right;
}
fieldset li .additionalInfo{
position: absolute;
padding: 5px;
margin-top: 5px;
display: none;
background-color: white;
border: 1px solid black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
z-index: 10;
}
fieldset li:hover .additionalInfo{
display: block;
}
Я включил некоторую дополнительную информацию, чтобы показать вам, как все это будет объединяться в один логический объект. Аналогичным образом вы можете включить ошибки и все, что вы хотите включить. Это просто быстрый пример, который я собрал вместе, но он должен показать, что вы можете достичь интересных вещей с помощью этой техники. Я также изменил то, что я положил <ol> прямо под форму, поэтому вам не нужно повторять ее для каждого набора полей. Я лично считаю это каким-то образом.. неудобным, но поскольку вы хотите иметь минимальную разметку, это будет работать очень хорошо и будет очень доступным. Снова прочитайте эту статью, если вы этого не сделали. Он дает некоторое представление о правильной маркировке формы.
О, и пример "реальной жизни" можно увидеть здесь: http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/
И вы можете играть здесь: http://jsfiddle.net/ramsesoriginal/b6Taa/9/
EDIT: я обновил последний пример
В моем коде произошла ошибка. Элемент-обертка (<li> во втором и последнем примерах <label> в минимальном и <p> в первом должен иметь по крайней мере 1 пиксельный край внизу, или некоторые браузеры видят поля ввода как перекрывающиеся и не будут плавать их правильно. Я обновил последний пример, чтобы он работал там, везде, где вы должны помнить об этом.