CSS дизайн для большой формы - Консультации по дизайну - PullRequest
4 голосов
/ 20 октября 2010

У меня есть большая форма, которая состоит из всего ввода (текст, флажок, радио и т. Д.), Я сгруппировал их в тег fieldset и легенду для каждого набора полей.С каждым входом также связана метка.Мой вопрос заключается в том, каков наилучший подход для отображения информации на одном экране и использования преимуществ горизонтального пространства, которое пользователь может иметь или не иметь?

Мне бы хотелось, чтобы все CSS были минимальными (если они есть).) формат (ы) таблиц, как мне кажется, таблицы предназначены для табличных данных, а не для представления.Также приветствуются CSS3 и HTML5.

Также мне бы хотелось иметь возможность добавлять брендинг, поскольку для этого может потребоваться выглядеть как другой сайт вместо оригинального сайта, разработанного для.

Что быбыть лучшим подходом для этого?У меня есть идея, что я бы использовал теги li, чтобы сделать горизонтальный вид, но я хотел бы перейти к следующей строке в конце экрана (думаю, что прокрутка не горизонтальная, но вертикальная - это нормально)совет по шаблону дизайна

Это пример, но я думаю, что у меня есть около 50 полей

<!DOCTYPE HTML>
<html>
<head>
<title>Large Form</title>
</head>
<body>
<form action="">

<fieldset>
<legend>***</legend> 

<label for="fname">First Name</label><br />
<input type="text" name="fname" id="fname" value="" /><br /><br />

<label for="lname">Last Name</label><br />
<input type="text" name="lname" id="lname" value="" /><br /><br />

<label for="gender">Gender</label><br />
<select name="gender" id="gender">
    <option value="">-- select</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
</select>

</fieldset>

<br />
<input type="submit" value="Submit" />
</form>
</body>

</html>

Ответы [ 5 ]

8 голосов
/ 20 октября 2010

Первое, что приходит на ум, это то, что вы хотите удалить теги <br/> из формы. Если вам нужно вертикальное пространство, используйте отступы CSS и поля, так как их легче изменить и сделать интервалы согласованными.

Помимо всего прочего, помимо брендинга (который больше всего повлияет на внешний вид и форму), наиболее важными для вас являются доступность и простота использования. Использование вами ярлыков и нежелание использовать таблицы для разметки являются хорошим началом доступности, поэтому я не буду упоминать об этом дальше.

Для простоты использования вам необходимо убедиться, что каждое поле может быть снабжено вкладками (в порядке, имеющем смысл), имеет четкую значимую метку, не имеет ненужных правил проверки (например, запрещение пробелов в номер телефона - не заставляйте пользователя чистить данные, которые могут быть очищены автоматически), и те правила проверки, которые необходимы, имеют четкие, понятные сообщения, которые в идеале появляются, когда пользователь вводит данные, а не ждет пользователя отправить форму.

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

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

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

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

И не забудьте сделать несколько быстрых юзабилити-тестов, чтобы убедиться, что ваши проверки имеют смысл и понятны.

4 голосов
/ 20 октября 2010

Взгляните на CSS3 позиционирование сетки . Он имеет четкий, но мощный синтаксис, например по ссылке:

body {
    grid-columns: * * (0.5in * *)[2];
    grid-rows: 20% *;
    columns: 3;
    column-gap: 0.5in;
}

Элементы используют gr единиц, чтобы выбрать ячейку сетки:

img {
    position: absolute;
    left: 2gr;
    width: 3gr;
}

Вам нужно будет только дать id вашим fieldset с, затем установить их положение и экстенты в вашем файле стиля.

2 голосов
/ 20 октября 2010

Проверьте CSS Flexbox для некоторой гибкости при проектировании наборов. Я также рекомендовал бы выбрать «стиль» и придерживаться его. Согласен с Welbog.

2 голосов
/ 20 октября 2010

Один из моих любимых способов группировки больших форм - это гармошка в стиле jQuery.Это позволяет вам разделять форму на ключевые группы, сохранять форму на одной странице и избавлять от необходимости прокрутки страниц;все с интуитивно понятным пользовательским интерфейсом.

Хороший пример этого - процесс оформления заказа Barnes & Noble .

1 голос
/ 20 октября 2010

Полагаю, что если у вас есть форма с 50 полями, вам обязательно придется разделить ее на тематические вкладки . Скажите от 3 до 5 вкладок. Они могут быть реализованы с помощью Javascript.

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

Также учтите, что у пользователя должно быть место для отдыха, поэтому убедитесь, что между входами достаточно свободного места.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...