Docs: forms guide, menu examples, guide start page (C64, C71)

content/ru/guide/colour/forms.md

@@ -5,65 +5,67 @@ description: "На каком месте стоит форма, какое по
 
 # Формы: фон и группировка
 
-У формы нет своего фона: она стоит на месте, куда её поставили, — на
-странице, в карточке или в шторке. Поля по умолчанию с рамкой. Группы
-делит воздух и заголовок, а не рамка. Правило одно для всех проектов, поэтому
-формы в разных разделах выглядят одинаково.
+У формы нет своего фона: она стоит прямо на странице, в карточке или в
+шторке. Поля — с рамкой, группы делит воздух и заголовок. Ниже короткая
+форма, собранная по всем правилам страницы.
 
 ## Пример
 
-### Короткая форма на странице
+:::example {id="guide/colour/forms/page" label="Короткая форма на странице"}
+:::
 
-Форма об одном — создать проект, войти, оставить заявку — стоит прямо на
-странице. Карточка вокруг неё ничего не отделяет и только добавляет рамку.
+Что здесь видно:
 
-:::example {id="guide/colour/forms/page" label="Форма на странице"}
-:::
+- форма стоит прямо на странице, под заголовком страницы, — без карточки и
+  своего фона ([где стоит форма](#где-стоит-форма));
+- все поля с рамкой ([какое поле брать](#какое-поле-брать));
+- между полями малый отступ, перед кнопками — большой; группа одна, поэтому
+  заголовка у неё нет ([отступы и группы](#отступы-и-группы));
+- код короче названия — и поле у него короче ([строки и ширина](#строки-и-ширина)).
 
-### Страница настроек: карточка на раздел
+## Где стоит форма
+
+Короткая форма об одном — создать проект, войти, оставить заявку — стоит
+прямо на странице, как в примере выше. Карточка вокруг неё ничего не
+отделяет и только добавляет рамку.
 
 Разделы настроек меняют независимо, поэтому у каждого своя карточка с
 заголовком. Кнопки — одни на форму, под последней карточкой.
 
-:::example {id="guide/colour/forms/cards" label="Карточки разделов"}
+:::example {id="guide/colour/forms/cards" label="Страница настроек: карточка на раздел"}
 :::
 
-### В шторке и окне
-
 Шторка и окно сами уже карточка: внутри карточек нет. Группы — заголовком,
 между ними можно провести линию.
 
-:::example {id="guide/colour/forms/panel" label="Форма в панели"}
+:::example {id="guide/colour/forms/panel" label="Форма в шторке"}
 :::
 
-## Где стоит форма
-
-| Где | Место | Группы |
-|:---|:---|:---|
-| Короткая форма об одном | страница | заголовки и воздух |
-| Страница настроек | страница, карточка `sf-card` на раздел | карточка на раздел, кнопки под последней |
-| Шторка, окно | панель | заголовки, линия между группами; карточек внутри нет |
-| Серая область (боковая панель, подложка) | — | сначала поставьте карточку, потом форму в неё |
-| Серая плашка внутри карточки («Итого», условия) | плашка | поля с рамкой |
-
-Фон формы выбирает место, а не форма. Поэтому классы фона на самой форме не
-нужны: на серую область форму без карточки не ставят — поля на ней читаются
-как дыры. Какие места бывают и как они выглядят — в руководстве
+На серую область — боковую панель, подложку — форму без карточки не ставят:
+сначала карточка, потом форма. Какие места бывают — в руководстве
 [Фоны](/ru/guide/colour/surfaces/).
 
+:::example {id="guide/colour/forms/do-place" label="Как делать: место формы"}
+:::
+
 ## Какое поле брать
 
 Поле с рамкой — вид по умолчанию на любом месте и в любой форме: его край
 видно и на белом, и на сером, и на цветном фоне.
 
 Поле с заливкой (`appearance="filled"`) — только для поиска и фильтров над
 таблицей или списком и только на белом месте: на странице, в карточке, во
-всплывающей панели. В одной форме виды не смешивают. На серой области, серой
-плашке и цветном фоне заливку не берут: она сливается с местом.
+всплывающей панели. На серой области, серой плашке и цветном фоне заливку не
+берут: она сливается с местом.
 
 :::example {id="guide/colour/forms/filter" label="Фильтры над таблицей"}
 :::
 
+В одной форме виды не смешивают.
+
+:::example {id="guide/colour/forms/do-field" label="Как делать: вид поля"}
+:::
+
 ## Отступы и группы
 
 | Между чем | Отступ |
@@ -81,33 +83,44 @@ description: "На каком месте стоит форма, какое по
 `fieldset` рамки нет. Линию между группами проводят только вместе с
 заголовком и только в шторке, окне или одной карточке.
 
+:::example {id="guide/colour/forms/do-groups" label="Как делать: группы"}
+:::
+
 ## Строки и ширина
 
 В одну строку ставят только части одного ответа: фамилию и имя, город и
 индекс, «с» и «по». Ширина поля подсказывает длину ответа: индекс и код —
 короткие (`w-e6`, 8rem), телефон и дата — средние (`w-f6`, 16rem), имя,
-почта и адрес — во всю колонку. Колонка формы не шире `max-w-h0` (40rem). Ширину задаёт обёртка поля:
-`<div class="w-e6"><sf-input …></sf-input></div>`.
+почта и адрес — во всю колонку. Колонка формы не шире `max-w-h0` (40rem).
+Ширину задаёт обёртка поля: `<div class="w-e6"><sf-input …></sf-input></div>`.
 Подпись — над полем: глаз идёт одной линией, и на телефоне ничего не
-перестраивается. Колонка подписей слева подходит для чтения записи, а не для
-правки.
+перестраивается.
 
 :::example {id="guide/colour/forms/widths" label="Строки и ширина"}
 :::
 
+:::example {id="guide/colour/forms/do-widths" label="Как делать: строки"}
+:::
+
 На телефоне форма — одна колонка: строки складываются в столбик, подписи
 остаются над полями, карточки сохраняют свои поля, кнопки стоят в конце
 формы.
 
-## Как делать
-
-:::example {id="guide/colour/forms/do-dont" label="Как делать"}
-:::
-
-- **Поле с рамкой по умолчанию.** Заливка — только для поиска и фильтров
-  над таблицей.
-- **Форму на серую область не ставят.** Сначала карточка, потом форма.
-- **Группы делит воздух.** Рамка вокруг группы спорит с рамками полей.
+## Проверьте форму
+
+- **Место.** Форма стоит на странице, в карточке раздела или в шторке. Своего
+  фона у неё нет; на серую область — сначала карточка.
+  [Где стоит форма](#где-стоит-форма)
+- **Поле.** Все поля с рамкой. Залитые — только поиск и фильтры над таблицей.
+  [Какое поле брать](#какое-поле-брать)
+- **Отступы.** Между полями `gap-1`, между группами и перед кнопками `gap-3`.
+  [Отступы и группы](#отступы-и-группы)
+- **Группы.** Заголовок — когда групп больше одной. Рамок вокруг групп нет,
+  вопрос с вариантами — `fieldset` без рамки. [Отступы и группы](#отступы-и-группы)
+- **Ширина.** Поле по длине ответа, колонка не шире 40rem, в строку — только
+  части одного ответа. [Строки и ширина](#строки-и-ширина)
+- **Телефон.** Одна колонка, подписи над полями, кнопки в конце.
+  [Строки и ширина](#строки-и-ширина)
 
 ## См. также