Объединенная энергосистема CSS для (многостолбцовых) форм
Зависит, какова Ваша цель. Если Вы хотите получить список объектов, и это происходит однажды во время всего выполнения Вашего приложения, например, это, вероятно, не стоит усилия по использованию хранимой процедуры. С другой стороны, запрос, который неоднократно работает и занимает (относительно) долгое время для выполнения, является превосходным кандидатом на устройство хранения данных базы данных, так как производительность будет лучше.
, Если Ваше приложение живет почти полностью в базе данных, хранимые процедуры являются легкой задачей. Если Вы пишете настольное приложение, которому база данных является только мимоходом важными, специальными запросами, может быть более оптимальный вариант, поскольку это сохраняет весь Ваш код в одном месте .
@Terrapin: Я думаю Ваше утверждение, что то, что Вы не должны перекомпилировать свое приложение для создания модификаций, делает хранимые процедуры, более оптимальным вариантом является обреченное на неудачу. Могут быть причины предпочесть хранимые процедуры специальным запросам, но в отсутствие чего-либо еще принуждение, проблема компиляции походит на лень, а не настоящую причину.
7 ответов
Что-то вроде этого может помочь. Вот как я это сделал в форме. Однако потребуется некоторая тонкая настройка, чтобы заставить его работать на желаемой ширине. Это может помочь вам начать работу.
CSS:
.contact ul {margin:0; padding:0; list-style:none;}
.contact li {margin-bottom:10px; overflow:hidden;}
.contact label {display:block; margin-bottom:2px;}
.contact label span {color:#999;}
.contact .input {width:592px; border:1px solid #E0E0E0; background:#F6F6F6;}
.contact select.input {border:1px solid #E0E0E0; background:#F6F6F6;}
.contact .third {float:left; width:193px; margin-right:10px;}
.contact .third .input {width:185px;}
.contact .half {float:left; width:294px; margin-right:10px;}
.contact .half .input {width:286px;}
.contact .half select.input {width:294px;}
.contact .omega {margin-right:0;}
HTML:
<form action="/contact-us" method="post" class="contact">
<ul>
<li>
<div class="half">
<label for="name">Name:</label>
<input type="text" id="name" name="name" class="input" />
</div>
</li>
<li>
<label for="address">Address:</label>
<input type="text" id="address" name="address" class="input" />
</li>
<li>
<div class="third">
<label for="city">City:</label>
<input type="text" id="city" name="city" class="input" />
</div>
<div class="third">
<label for="state">State:</label>
<input type="text" id="state" name="state" class="input" />
</div>
<div class="third omega">
<label for="zip">Zip:</label>
<input type="text" id="zip" name="zip" class="input" />
</div>
</li>
</ul>
</form>
Я думаю, это то, что вы ищете:
http://www.alistapart.com/articles/prettyaccessibleforms/
Это должно помочь немного упростить вашу структуру. Он не описывает явно, как создать несколько форм столбцов, но этот метод, вероятно, можно было бы расширить до этого с вашей стороны.
Здесь нет необходимости в системе Fluid 960, если вы не хотите, чтобы форма расширялась и сжималась вместе с браузером.
Я бы порекомендовал для этого обычную старую сетку 960 . Ширина 960 отлично подходит для сеток, потому что она равномерно делится на 12 и 16, что позволяет настраивать идеальные макеты с тремя и четырьмя столбцами.
Лучший способ познакомиться с сеткой 960 - это посмотреть исходные CSS и источник демонстрации html
<div class="grid_6">
<p>
contact form
</p>
</div>
<div class="grid_3">
<p>
name
</p>
</div>
Вот базовый пример начала, который может быть полезен:
<!doctype html>
<html lang="en">
<head>
<style>
fieldset { width: 400px; padding: 1%; }
input[type=text], select, textarea { width: 98%; }
.half { float: left; width: 48%; padding: 1%; }
.full { clear: both; width: 98%; padding: 1%; }
.right { text-align: right; }
</style>
</head>
<body>
<fieldset>
<legend>Contact form</legend>
<form>
<div class="half">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half right">
<input type="submit" value="send">
</div>
</form>
</fieldset>
</body>
</html>
Обратите внимание, что я использую плавающие влево div половинной ширины вместо неупорядоченных элементов списка.
Как вы настаиваете в используя проценты, не ожидайте, что он будет идеальным по пикселям во всех браузерах. Если вы хотите, чтобы все было безупречно, вам действительно нужно использовать пиксели.
Мне пришлось сделать что-то подобное, и в итоге я установил полуколонки на 46%. Это оставляет немного места для заполнения и обеспечивает одинаковый размер всех ваших полей ввода.
Один из ответов - Blueprint . Я читал, где вы не думаете, что это ответ, но я бы все равно сделал это так. Вся простота таблиц со всей мощью CSS.
С blueprint математика довольно проста. Допустим, ваша форма занимает 10 столбцов.
<div id="contact-form" class="span-10">
<h3>Contact Form</h3>
<form action="contact">
<div id="form-sec-1" class="span-5">
<label>Name</label> <br/>
<input type="text" name="name" /> <br/>
<label>ZIP code</label> <br/>
<input type="text" name="zipcode" />
</div>
<div id="form-sec-2" class="span-5 last">
<label>Email</label> <br/>
<input type="text" name="email" /> <br/>
<label>Country</label> <br/>
<input type="text" name="country" />
</div>
<div id="form-sec-3" class="span-10 last">
<label>Message</label> <br/>
<textarea name="message" />
</div>
<div id="form-sec-4" class="span-8">
<input type="checkbox" name="copy"/>
<label>Send me a copy</label>
</div>
<div id="form-sec-5" class="span-2">
<input type="submit"/>
</div>
</form>
</div>
Во-первых, не используйте таблицу. Размещение элементов формы в таблице не решает вашей проблемы и усложняет обслуживание. Использование таблиц для дополнения формы представления - признак некомпетентности и сложности. Это также совершенно несемантично. Вместо этого вам, возможно, придется написать немного CSS. Честно говоря, если вы собираетесь использовать таблицы для нетабличных данных, даже не беспокойтесь об использовании CSS, поскольку это увеличивает сложность обслуживания.
Вот некоторые вещи, о которых следует помнить:
1) Определите все свои единицы в единицах "em". Большинство элементов формы предназначены для содержания текста. Эти элементы, такие как текстовые поля и блоки textarea, могут быть увеличены или уменьшены как функция доступности. Это означает, что ваша пиксельная красивая CSS-сетка сломается в тот момент, когда пользователь изменит размер текста на странице.
2) Не оборачивайте элемент формы в div. Как и div, ваша форма является элементом уровня блока. Если форма не имеет одноранговых узлов под родительским элементом div, просто направьте любую презентацию непосредственно на элемент формы, а не на родительский элемент, который существует только для содержания формы.
3) Сгруппируйте элементы формы. Если вы используете плавающие текстовые поля, все может испортиться, если формы будут перемещаться независимо от соответствующих им элементов меток. Будет проще поместить в форму упорядоченный список, а затем заключить каждый элемент формы в элемент списка. Таким образом, вам нужно только позаботиться об определении макета элемента метки относительно его элемента управления формой, а затем о макете их вместе, определяя представление элемента списка. Этот метод также является семантическим и информирует читателей о порядке в элементах управления вашей формы.
4) Не используйте! важное заявление. Это позволяет быстро исправить ваш CSS, но полностью портит наследование и абсолютно усложняет обслуживание. Вместо этого потратьте дополнительное время на то, чтобы правильно написать свой код в первый раз, чтобы дальнейшее обслуживание было быстрым и незначительным событием.
5) Не используйте абсолютную позицию, если вы действительно не знаете, что делаете, даже если ваша форма устанавливается относительное положение. Позиционируйте абсолютные результаты в неожиданном поведении во многих случаях и непредвиденных проблемах.
6) Чтобы убедиться, что ваш код CSS действительно определяет истинную сетку, используйте плагин Firefox MeasureIt. Это поможет вам достичь потрясающей точности и сэкономить невероятное время при создании grid.
7) Делайте все правильно с первого раза, используя как можно меньше кода, чтобы завершить работу и идеально представить вашу форму. Только после этого проверьте свою форму на точность кроссбраузерности. Вносите по одной поправке на точность кроссбраузерности за раз, чтобы ограничить ненужное раздувание кода CSS.