Дизайн CSS для большой формы - Совет по дизайну

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

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

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

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

CSS Новичка ищет дизайн советы

Это пример, но я думаю, что у меня есть около 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>

источник

2010-10-19 Phill Pafford

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

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

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

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

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

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

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

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

источник

2010-10-19 21:06:07 Welbog

Ничего себе, большое спасибо! Я никогда не думал использовать подобные наборы полей. Итак, если я правильно вас понимаю, группируйте все связанные поля вместе в поле, установленном по вертикали, но группируйте поля в горизонтальной плоскости? Также порядок вкладок - это то, над чем я всегда выгляжу. Снова большие подсказки и спасибо !!! –

@Phill: Я не рекомендую конкретный стиль макета, так как это обычно покрывается брендингом того, что вы пытаетесь создать. Если стиль бренда диктует, что вам не следует тратить горизонтальное пространство, вы, вероятно, захотите пойти с макетом сетки, который предложил Фредерик Хамиди (если вы согласны с CSS3). Если вы хотите использовать низкотехнологичное решение, я бы пошел с плавающими наборами полей или простой вертикальной компоновкой. – Welbog

Меня интересует реализация Floating Field Set, есть ли хорошие примеры этого? Могу ли я обернуть их в div или ul? не сохранять с помощью CSS еще, но я думал, что это будет отличным упражнением для меня. Спасибо –

Посмотрите на CSS3 grid positioning. Он имеет ясный, но мощный синтаксис, например. по ссылке:

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 с затем установить их положение и экстентов в файле стиля ,

источник

2010-10-19 21:10:23

Я слышал о макетах сетки, выполненных в CSS, но никогда не видел (хорошо смотрел код) одного. Мой вопрос будет: «Будет ли сетка изменяться по разрешению экрана»? Поэтому, если у пользователя был экран 800x600, и у меня есть 4 сетки, будет ли они оставаться такими же, как 4 сетки, пересекающиеся или будут достаточно гибкими, чтобы складывать 2 сетки над 2 сетками? –

Модель сетки остается статической и подвержена «переполнению», как и другие элементы блока. Если вы определите сетку 4x1, она останется 4x1, когда пользователь изменит размер своего окна, либо уменьшит ширину ячейки, либо покажет полосу прокрутки в зависимости от того, используете ли вы относительные или абсолютные единицы в определении сетки. –

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

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

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

источник

2010-10-19 21:13:26 Moses

Я действительно люблю jQuery, но хочу сохранить как можно больше CSS и минимальный (если есть) JavaScript. Я реализовал что-то подобное в jQuery: http://jsbin.com/ezesi Stack: http://stackoverflow.com/questions/1126489/jquery-examples-horizontal-accordion-table-instead-of-un-ordered- lists-upda –

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

источник

2010-10-19 21:17:41 taylorjes

Выглядит отлично для новых браузеров и +1 для HTML5 –

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

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

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

источник

2010-10-19 21:18:35 bogatyrjov

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

Я думал о внесении вкладок, но ограничения/требования проекта ограничивают мою способность делать это. Он предназначен для внутреннего использования, поэтому ему не нужно выглядеть лучше, но поскольку у меня есть определенная гибкость в аспекте дизайна, я думал, что это будет отличным упражнением для меня, чтобы отточить мои навыки и учиться. Спасибо за совет –

Дизайн CSS для большой формы - Совет по дизайну

ответ

Смежные вопросы