CSS-сетка для форм (многоколоночная)

Ответ 1

проверьте это: http://www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html

есть все, что вам нужно знать, включая css api и templates

ИЗМЕНИТЬ: вот мое окончательное решение с шаблоном css299

И вот графический пример. Конечно, вы можете легко изменить цвета, отредактировав css.

Ответ 2

Прежде всего, не используйте таблицу. Размещение элементов формы в таблице не решает вашу проблему и усложняет ваше обслуживание. Использование таблиц в дополнение к презентации формы является признаком некомпетентности и сложности. Он также совершенно не смысловой. Вместо этого вам действительно нужно написать некоторый CSS. Честно говоря, если вы собираетесь использовать таблицы для не табличных данных, тогда даже не пытайтесь использовать CSS, так как это увеличивает сложность обслуживания.

Вот некоторые вещи, которые следует иметь в виду:

1) Определите все единицы в единицах "em". Большинство элементов формы предназначены для размещения текста. Эти элементы, такие как текстовые поля и блоки текстового поля, могут быть увеличены и уменьшены как функция доступности. Это означает, что ваша идеальная сетка CSS для пикселя будет разорвать момент, когда пользователь изменит размер текста на странице.

2) Не заверните элемент формы в div. Как и div, ваша форма является элементом уровня блока. Если у формы нет узловых узлов под родителем div, просто направьте любое представление непосредственно на элемент формы, а не на родительский элемент, который существует только для того, чтобы содержать форму.

3) Группируйте элементы формы. Если вы являетесь плавающими текстовыми полями, все вещи могут быть испорчены, если формы перемещаются независимо от соответствующих элементов ярлыков. Будет проще разместить упорядоченный список внутри вашей формы, а затем обернуть каждый элемент формы в элемент списка. Таким образом, вам нужно только беспокоиться об определении макета элемента метки относительно элемента управления формой, а затем компоновке их вместе, определяя представление элемента списка. Этот метод также является семантическим и информирует читателей текста о заказе на ваших элементах формы.

4) Не используйте важное объявление. Это делает быстрое исправление в вашем CSS, но полностью замалчивает наследование и абсолютно усложняет обслуживание. Вместо этого возьмите дополнительное время, чтобы правильно записать свой код в первый раз, так что последующее обслуживание будет быстрым и незначительным событием.

5) Не используйте абсолютную позицию, если вы действительно не знаете, что делаете, даже если ваша форма настроена на относительную позицию. В большинстве случаев абсолютные результаты при неожиданном поведении и неожиданные проблемы.

6) Чтобы убедиться, что ваш код CSS фактически определяет истинную сетку, используйте подключаемый модуль Firefox MeasureIt. Это поможет вам достичь потрясающей точности и сэкономить вам невероятное время при создании сетки.

7) Сделайте все правильно в первый раз, используя как можно меньше кода, чтобы получить задание и представить свою форму. Только тогда проверьте свою форму на точность перекрестного браузера. Сделайте одну коррекцию для точности кросс-браузера за раз, чтобы ограничить излишнее вздутие вашего кода CSS.

Ответ 3

Что-то вроде этого может помочь. Так я сделал это на форме. Тем не менее, потребуется небольшая настройка, чтобы заставить ее работать с нужной шириной. Это может помочь вам начать работу.

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>

Ответ 4

Вот пример базового запуска, который может быть полезен:

<!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 полуширины вместо неупорядоченных элементов списка.

Как вы настаиваете на использовании процентов, не ожидайте, что он будет пикселем в любом браузере. Если вы хотите, чтобы все пиксель был лучше, вам действительно нужно использовать пиксели.

Ответ 5

Здесь создается структура форм CSS, которая делает то, что вы просили:

https://web.archive.org/web/20120503010054/http://formee.org/demo/index.htm

Ответ 6

Я думаю, что это то, что вы ищете:

http://www.alistapart.com/articles/prettyaccessibleforms/

Это поможет немного упростить структуру. В нем явно не описывается, как создавать несколько форм столбцов, но этот метод может, вероятно, расширяться до того, что с некоторыми креативами с вашей стороны.

Ответ 7

Нет необходимости в жидкостной системе 960 здесь, если вы не хотите, чтобы форма расширялась и заключалась с браузером.

Я бы порекомендовал для этого обычную старую 960 grid system. Ширина 960 отлично подходит для сеток, поскольку она равномерно разделяет 12 и 16, что позволяет настраивать идеальные три и четыре расположения столбцов.

Лучший способ познакомиться с сеткой 960 - посмотреть на css cce и источник html demo

<div class="grid_6">
        <p>
            contact form
        </p>
    </div>

<div class="grid_3">
        <p>
            name
        </p>
    </div>

Ответ 8

Мне нужно было сделать что-то похожее, и в итоге я установил половину столбцов на 46%. Он оставляет дополнительный бит пространства для заполнения и получает все ваши поля ввода последовательно.

Ответ 9

Один ответ Blueprint. Я прочитал, где вы не думаете, что это ответ, но это все равно, как я это сделал. Вся легкость таблиц со всей мощью CSS.

С планом математика довольно проста. Скажем, ваша форма охватывает 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>

Ответ 10

О, вау, я просто думал, что в мире есть вопрос с миром css, тогда я увидел этот проект редактора компоновки сетки CSS, http://dev.w3.org/csswg/css3-grid-align/

Я все еще не могу объяснить, почему css-мир действительно не думал об этом так, какое объяснение может быть связано с отсутствием такой функции в css.