У меня есть следующая область на форме:

enter image description here

Мне не нравятся повторяющиеся слова «Открыть» и «Свидание». Мне повторяющиеся слова только добавляют беспорядка.

Я хотел бы каким-то образом сгруппировать их вместе. Предпочтительно метка группировки, такая как «Диапазон открытых дат» и подметки «Начало» и «Конец».

Ставить метки над полями формы не вариант. Метки слева — это формат/шаблон, который мы используем для форм этого типа.

Каким образом я могу избежать повторения слов «Открыть» и «Дата»?

3
richard 5 Дек 2015 в 00:44

3 ответа

Лучший ответ

Можете ли вы настроить интервал и, возможно, стиль шрифта (например, курсив для дополнительного визуального разделения), чтобы текст «Открыть диапазон дат» располагался рядом с полем «Начало», но не рядом с полем «Конец»?

mockup

загрузить исходный код bmml — Каркасы, созданные с помощью Мокапы Balsamiq

3
Andy 5 Дек 2015 в 03:24
Мне это нравится... хорошее предложение.
 – 
richard
5 Дек 2015 в 03:31
Это будет проблематично на мобильных устройствах.
 – 
plainclothes
5 Дек 2015 в 10:20
Какие проблемы, связанные с мобильными устройствами, вы предвидите для этого конкретного примера? Можно ли решить эти проблемы, изменив размер шрифта и/или добавив разрывы строк?
 – 
Andy
5 Дек 2015 в 16:10
Чтобы разместить экран мобильного телефона с одной колонкой, вам нужно сложить строку на себя. Тогда у вас будет аранжировка, которую я разместил, которая, по-видимому, не понравилась Ричарду.
 – 
plainclothes
5 Дек 2015 в 20:03
В зависимости от контента, два столбца могут хорошо разместиться на экране мобильного устройства (метка помещается в левый столбец, а поле ввода — в правый столбец). @RichardDesLonde упомянул, что размещение меток над полями невозможно.
 – 
Andy
5 Дек 2015 в 23:25

Просто добавьте заголовки

Определите логический заголовок для связанных элементов и используйте его. Судя по предоставленной вами ограниченной информации, "открытые даты" кажутся логичными.

Inputs with a group heading

Я бы также добавил какое-то средство выбора даты календаря, доступ к которому в моем примере будет осуществляться через значок календаря.

5
Community 16 Июн 2020 в 13:51
Я люблю это. Но есть поля над и под ними. Как нам указать, что это только для этих двух полей, а не для тех, что под ними?
 – 
richard
5 Дек 2015 в 02:20
Ну нельзя начать создавать заголовки для одних полей, а не для других. Если вы пойдете по пути группировки, я бы рекомендовал делать это по всей форме.
 – 
plainclothes
5 Дек 2015 в 02:43
Если вы должны сделать это только в одном месте, вы можете заключить эту группу в цветовое поле или прямоугольник (и убрать правило ниже), чтобы отделить ее от других.
 – 
plainclothes
5 Дек 2015 в 02:44
Просто добавить разделительные строки (без заголовка) между другими полями?
 – 
Rolf ツ
5 Дек 2015 в 20:44
1
Я имею в виду: дайте датам разделительную строку и заголовок. Но сохраняйте согласованность и дайте понять, что другие поля не относятся к диапазону дат, добавив дополнительные разделительные линии.
 – 
Rolf ツ
5 Дек 2015 в 21:10

Почему бы не использовать <fieldset> и <legend>?

Их можно использовать с любым элементом формы — это не обязательно должны быть переключатели или флажки.

http://www.w3schools.com/tags/tag_fieldset.asp

По умолчанию браузеры рисуют рамку вокруг набора полей и помещают легенду в рамку рамки.

Это более семантично и доступно.

http://webaim.org/techniques/forms/controls

1
Yvonne Aburrow 7 Дек 2015 в 18:02