Как бы вы достигли этой компоновки на основе таблиц, используя CSS вместо таблиц HTML?
Я хочу, чтобы на экране появился следующий макет:
FieldName 1 [Field input 1]
FieldName 2 is longer [Field input 2]
. .
. .
FieldName N [Field input N]
Требования:
- Имена полей и вводимые поля должны быть выровнены по левому краю.
- Оба столбца должны динамически изменяться в соответствии с их содержимым.
- Должен работать в кросс-браузерах
Я считаю, что этот макет чрезвычайно прост в использовании с использованием HTML-таблиц, но поскольку я вижу много сторонников CSS, настаивающих на том, чтобы таблицы использовались только для табличных данных, я решил, что узнаю, есть ли способ сделать это с помощью CSS.
Эмм, почему вся ненависть к столу, приятель? Похоже, молоток подходит для этого гвоздя?
возможный дубликат Допустимо ли использовать таблицы для форм? Или все-таки дивы правильнее использовать?
Ответы 7
Объекты FieldName должны содержаться в SPAN с атрибутами стиля float: left и шириной, достаточной для ваших меток.
Входные данные должны содержаться в диапазоне со стилем float: left. Поместите <div style = "clear: both"/> или <br/> после каждого ввода поля, чтобы прервать плавающий.
Вы можете заключить вышеупомянутые объекты в div с набором атрибутов стиля ширины, который достаточно широк как для меток, так и для входных данных, чтобы «таблица» оставалась маленькой и содержалась.
Пример:
<span style = "float: left; width: 200px">FieldName1</span><span style = "float: left"><input/><br/>
<span style = "float: left; width: 200px">FieldName2</span><span style = "float: left"><input/><br/>
<span style = "float: left">FieldName3</span><span style = "float: left"><input/><br/>
Я считаю, что он хотел бы, чтобы после каждого поля ввода присутствовал «div» со стилем «clear: both».
Каждую строку следует рассматривать как «div», который содержит два «промежутка»: один для имени поля и один для ввода. Установите float: left для обоих пролетов. Однако вам нужно установить некоторую ширину для диапазона 'fieldname'.
Кроме того, в целях предосторожности добавьте в div атрибут «clear: both».
лучше использовать список
<fieldset class = "classname">
<ul>
<li>
<label>Title:</label>
<input type = "text" name = "title" value = "" />
</li>
</ul>
</fieldset>
установите ширину тегов li, достаточную как для метки, так и для ввода, и поместите метку влево.
также для достижения этой таблицы, подобной блоку с таблицами, вы можете установить ширину метки, равную наибольшему имени поля, заставляя все метки или расширять эту ширину.
[править] это хорошее чтение на список отдельно
Я предполагаю, что селектор тегов ul li label должен иметь явную ширину, чтобы он отображался в виде таблицы.
правильно, вам может потребоваться ввести ввод в его собственное поле, например p, чтобы макет плавал правильно во всех браузерах
A List Apart - отличный сайт, я его очень рекомендую! Я также использовал эту статью в прошлом: websiteoptimization.com/speed/tweak/forms
Метка связана с полем ввода только в том случае, если он использует атрибут «для» или содержит поле ввода. Кроме того, когда метка связана с полем ввода, список на самом деле не требуется - форма, набор полей, метка и ввод имеют достаточное семантическое значение.
Я бы не стал, я бы использовал стол. Это классический пример табличного макета - именно для этого используются таблицы предполагаемый.
Я не согласен, по моему мнению, таблицы следует использовать только для табличных данных, а не для табличных макетов; есть большая разница.
Если это TABular, он подходит для TABle. Единственная разница между этим и «табличными данными» состоит в том, что правый столбец состоит из полей ввода. Пытаться вставить сюда что-нибудь еще просто глупо.
Неясно, что это табличные данные, как прокомментировали некоторые другие, хотя это могло быть. Таблица будет подразумевать семантическую связь между всеми элементами в соответствующих столбцах (кроме просто «все они - имена столбцов базы данных»). Во всяком случае, вот как я это делал раньше:
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
<head>
<title>Form layout</title>
<style type = "text/css">
fieldset {width: 60%; margin: 0 auto;}
div.row {clear: both;}
div.row label {float: left; width: 60%;}
div.row span {float: right; width: 35%;}
</style>
</head>
<body>
<form action = "#" method = "post">
<fieldset>
<legend>Section one</legend>
<div class = "row">
<label for = "first-field">The first field</label>
<span><input type = "text" id = "first-field" size = "15" /></span>
</div>
<div class = "row">
<label for = "second-field">The second field with a longer label</label>
<span><input type = "text" id = "second-field" size = "10" /></span>
</div>
<div class = "row">
<label for = "third-field">The third field</label>
<span><input type = "text" id = "third-field" size = "5" /></span>
</div>
<div class = "row">
<input type = "submit" value = "Go" />
</div>
</fieldset>
</form>
</body>
</html>
Обновлено: похоже, что «по замыслу» я не могу отвечать на комментарии к моему ответу, очевидно, это как-то менее запутанно. Итак, в ответ на комментарий 17 из 26 - ширина 60% полностью необязательна, по умолчанию набор полей наследует ширину содержащего элемента. Вы также, конечно, могли бы использовать min-width и max-width или любые правила компоновки таблиц, если бы их поддерживал только IE, но это не CSS, который с треском провалился;)
Недостатком этого является то, что макет не соответствует размеру данных, что является одним из моих требований. Это процент от размера экрана, который может стать действительно широким при широком разрешении экрана. На мой взгляд, именно в динамических макетах CSS терпит неудачу.
Фу. Слишком много div и span, слишком много разметки с пустым семантическим значением.
@ Джонатан: Совершенно верно. Это приносит в жертву чистую, содержательную разметку в пользу непонятной разметки во имя отказа от использования таблиц для чего-то, что явно им хорошо подходит.
Я думаю, что в большинстве ответов отсутствует то обстоятельство, что исходный вопросник хотел, чтобы ширина столбцов зависела от ширины содержимого. Я считаю, что единственный способ сделать это с помощью чистого CSS - использовать display: table, display: table-row и display: table-cell, но это не поддерживается IE. Но я не уверен, что это свойство желательно, я считаю, что создание широких столбцов из-за одного длинного имени поля делает макет менее эстетичным и сложным в использовании. На мой взгляд, обернутые строки - это хорошо, поэтому я думаю, что ответы, которые я только что предложил, были неправильными, вероятно, лучший способ.
Пример Роберта идеален, но если вам действительно необходимо использовать таблицы, я думаю, вы можете сделать его немного более «семантическим», используя <th> для имен полей. Я не уверен в этом, поэтому, пожалуйста, поправьте меня, если я ошибаюсь.
<table>
<tr><th scope = "row"><label for = "field1">FieldName 1</label></th>
<td><input id = "field1" name = "field1"></td></tr>
<tr><th scope = "row"><label for = "field2">FieldName 2 is longer</label></th>
<td><input id = "field2" name = "field2"></td></tr>
<!-- ....... -->
</table>
Обновление: я не следил за этим внимательно, но IE8, по-видимому, поддерживает таблицы CSS, поэтому некоторые предлагают нам начать их использовать. Есть статья о 24 способах, который содержит соответствующий пример в конце.
Я согласен, если бы у вас было одно имя поля, которое было бы длиннее много, оно стало бы некрасивым. Уловка состоит в том, чтобы использовать более короткие имена полей, а затем включать всплывающие подсказки, если короткое имя недостаточно хорошо описывает поле.
Но затем вы можете убедиться, что столбец достаточно широкий, задав ему достаточно большую ширину в EMS, и при этом он будет выглядеть разумно. Выровняйте метки по правому краю, если они слишком далеко от полей ввода.
Разметка, которую вы предоставляете, мне кажется идеальной. Это является табличный макет, и ваш пример добавляет соответствующие метки и т. д.
Эта разметка и CSS примерно достигают поставленных вами целей с учетом ограничений на этот вопрос ...
Предложение
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
<head>
<title>My Form</title>
<style type = "text/css">
#frm1 div {float: left;}
#frm1 div.go {clear: both; }
#frm1 label, #frm1 input { float: left; clear: left; }
</style>
</head>
<body>
<form id = "frm1" action = "#" method = "post">
<fieldset>
<legend>Section One</legend>
<div>
<label for = "field1">Name</label>
<label for = "field2">Address, City, State, Zip</label>
<label for = "field3">Country</label>
</div>
<div>
<input type = "text" id = "field1" size = "15" />
<input type = "text" id = "field2" size = "20" />
<input type = "text" id = "field3" size = "10" />
</div>
<div class = "go">
<input type = "submit" value = "Go" />
</div>
</fieldset>
</form>
</body>
</html>
Достоинства
... но я бы не рекомендовал его использовать. Проблемы с этим решением:
- очень раздражает перенос всей колонки при малой ширине браузера
- он отделяет метки от связанных с ними полей ввода в разметке
Приведенное выше решение должно быть (я не проверял это) доступным для пользователей, потому что программы чтения с экрана, как я читал, хорошо справляются с использованием атрибута for = "" при связывании меток с полями ввода. Визуально и доступно это работает, но вам может не понравиться перечисление всех ваших ярлыков отдельно от полей ввода.
Вывод
Вопрос в том виде, в каком он сформулирован, а именно требование автоматически изменять ширину всего столбца с метками разной длины до максимальной длины метки, смещает решение разметки в сторону таблиц. При отсутствии этого требования существует несколько отличных семантических решений для представления форм, как уже упоминалось и предлагалось другими в этой ветке.
Я хочу сказать следующее: существует несколько способов представления форм и сбора пользовательского ввода в приятной, доступной и интуитивно понятной форме. Если вы не можете найти макет CSS, который бы отвечал вашим минимальным требованиям, но таблицы могут, тогда используйте таблицы.
Хммм, почти немедленное голосование против без комментариев. Ребята, я зову их так, как вижу.
Попробуйте мое решение для помощника по размеру.