Ошибка генерации элемента формы форма ширина формы меньше заданной

Растянуть комментарий на всю ширину формы

Ø [Фрэнки,
11.09.18 — 16:35]

Я

  

Zombi

11.09.18 — 09:56

Есть вот такая форма:

https://yadi.sk/i/tY4PT8zyk9feGg

Необходимо поле с комментарием растянуть во всю ширину. Сейчас структура вот такая:

https://yadi.sk/i/v0izlMURAHmgUw

Как растянуть комментарий на всю ширину формы?

  

triviumfan

1 — 11.09.18 — 09:58

растягивать по горизонтали?

  

D3O

2 — 11.09.18 — 09:59

(1) и отключить АвтоМаксимальнаяШирина

  

Фрэнки

3 — 11.09.18 — 10:00

так судя по структуре, свойства поля урезаны как минимум двумя группами : ГруппаОсновные и ГруппаЭлемента

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

  

Zombi

4 — 11.09.18 — 10:05

(1) Выставил «Да»

(2) Убрал галку.

Не помогло

  

Zombi

5 — 11.09.18 — 10:07

  

Фрэнки

6 — 11.09.18 — 10:15

(5) я даже отсюда вижу, что у тебя на форме две вертикально разделенные группы сидят — слева и справа. То что добавлено слева — оно осталось сидеть ВНУТРИ левой группы. И ясное дело, что не может растянуться за ее границы.

  

Фрэнки

7 — 11.09.18 — 10:16

левая группа — ГруппаОсновыные, а правая группа — Реквизиты договора

  

triviumfan

8 — 11.09.18 — 10:18

да, что-то он не договаривает)

  

Zombi

9 — 11.09.18 — 10:27

Есть группа «ГруппаОсновные», в ней «ГруппаЭлемента», в ней 2 группы «ГруппаЛево» и «ГруппаПраво». Я комментарий вынес в иерархию к «ГруппаОсновные», то есть к самой верхней на этой странице. Почему элемент все равно привязан к левой группе и как его отвязать от нее?

  

Фрэнки

10 — 11.09.18 — 10:30

(9) У тебя свойства группы ГруппаОсновные отделены вертикально справа группой РеквизитыДоговора — если я по твоим скринам это вижу, а ты по ним же этого не видишь, то я больше нечего посоветовать не могу

  

Фрэнки

11 — 11.09.18 — 10:31

засунь Комментарий в правую группу и будешь точно также сокрушаться, что не хочет он растягиваться на всю форму, но уже в другой ее стороне

  

Zombi

12 — 11.09.18 — 10:33

(10) РеквизитыДоговора это уже другая страница:

https://yadi.sk/i/-5VSiOFCEcDIkw

  

ribuh

13 — 11.09.18 — 10:36

ЛКМ взять поле Комментарий и утащить вверх, до Форма, тут бросить — он свалится вниз и будет по всей ширине формы …

  

Фрэнки

14 — 11.09.18 — 10:36

(12) ок. Смотри тогда на сымый первый свой скрин. Там есть элементы на правой сторонке формы.

Нижний из них — Способ проведения закупочной процедуры

Ниже идет пустое место. Вот это место — оно накрыто какой-то группой и именно она «не пускает» другие элементы туда растягиваться

  

Zombi

15 — 11.09.18 — 10:40

(14) Вот «ГруппаЭлемента» выделил. Но ворме внизу видно что никакой группой пустое место не накрыто.

  

Zombi

16 — 11.09.18 — 10:41

(13) Утащить вверх до формы понял. Дальше что сделать? как бросить?

  

triviumfan

17 — 11.09.18 — 10:41

пускай для начала покажет настройки расположения своего поля комментарий

  

triviumfan

18 — 11.09.18 — 10:42

ну да, либо «группаэлемента»  стоит «нерастягивать»

  

Zombi

19 — 11.09.18 — 10:43

  

triviumfan

21 — 11.09.18 — 10:46

Это документооборот?

  

Zombi

22 — 11.09.18 — 10:49

(21) Да

  

triviumfan

23 — 11.09.18 — 10:50

(19) у тебя вообще горит красная галка — сообщает о кривых привязках формы. тыкни на неё, что покажет?

  

triviumfan

24 — 11.09.18 — 10:50

(22) какой объект это?

  

Zombi

25 — 11.09.18 — 10:51

(23) Ошибка генерации элемента формы: «ГруппаАвтокатегоризацияВыполнена» — Высота группы больше заданной

Ошибка генерации элемента формы: «ГруппаКатегорииПроверены» — Высота группы больше заданной

Это к другим страницам относится

  

Zombi

26 — 11.09.18 — 10:52

(24) Справочник.ВнутренниеДокументы.

  

Zombi

27 — 11.09.18 — 10:53

Это свойства «ГруппаКомментарий». Ее же щас надо как то растянуть, за ней наверное и комментарий растянется.

https://yadi.sk/i/ZDMPriBZ1fsaMw

  

Zombi

28 — 11.09.18 — 10:55

Извиняюсь. Щас срочно уехать надо. После обеда подниму тему.

  

triviumfan

29 — 11.09.18 — 11:03

Парадокс, но комментарий на этой странице действительно не растягивается :)

  

ribuh

30 — 11.09.18 — 11:21

(16) Утащить до слова «Форма», бросить — отпустить левую кнопку мыши (ЛКМ)

  

Zombi

31 — 11.09.18 — 12:28

(30) Так он выносится за пределы страницы, соответственно двигает остальные старницы вверх. Нужно чтобы он остался в пределах «ГруппаОсновные» внизу во всю ширину и был виден только на этой странице.

  

Zombi

32 — 11.09.18 — 14:12

Апну, вдруг еще кто подскажет.

  

PR

33 — 11.09.18 — 14:35

Прекрасная ветка

Все предыдущие скрины удалены, форма в ДО не названа, то, что это ДО, выпытано в процессе, вопрос плевый, но памажите, кто может

Рукалицо

Никакого желания помогать

  

dmt

34 — 11.09.18 — 14:48

Вопрос не плевый. Какой-то глюк.

  

Zombi

35 — 11.09.18 — 14:49

(33) Сорян, что то ЯД глюканул, переустановил его и потерял скрины.

Есть такая форма:

https://yadi.sk/i/cEEhTxEto095RA

Вот так сейчас форма выглядит в конфигураторе:

https://yadi.sk/i/5fqXX24pTiYD3Q

Это форма элемента справочника «ВнутренниеДокументы» в ДО. Форма допиленная уже не одним человеком. Но надо вот еще допилить.

  

PR

36 — 11.09.18 — 15:13

(35) Кинь КомментарийРеквизит в ГруппаЭлемента

  

агент смит

37 — 11.09.18 — 15:24

(33) Да ты хоть раз кому-нибудь помог с 1С?

  

Zombi

38 — 11.09.18 — 15:26

  

PR

39 — 11.09.18 — 15:28

(38) Е мое, все перекурочили

Создай Группу1 без видимости, в нее кинь две группы, которые слева и справа

Создай Группу2 без видимости с вертикальным расположением реквизитов и кинь в нее Группу1 и Комментарий

  

PR

40 — 11.09.18 — 15:29

(37) Миша, иди спи, у вас там в Мордоре ночь глухая

  

triviumfan

41 — 11.09.18 — 15:34

У кого есть 1С:ДО — попробуйте проделать это сами) Там действительно не все так просто)

  

Zombi

42 — 11.09.18 — 15:35

(39) Оказалось достаточно создать группу и поместить в нее левую и правую. Комментарий остался в «ГруппаОсновные» и растянулся:

https://yadi.sk/i/uMMbZVyNQaqaEA

Спасибо!

  

PR

44 — 11.09.18 — 15:36

(41) Ты издеваешься что ли?

  

PR

45 — 11.09.18 — 15:37

(43) Беги скорее, твои друзья в овраге лошадь доедают, тебе не достанется

  

dmt

46 — 11.09.18 — 15:47

(42) Можешь обратно закинуть в прежнюю группу и установить для нее галку «Объединенная»

  

dmt

47 — 11.09.18 — 15:48

Расширение группы формы для обычной группы (Form group extension for a usual group)

Объединенная (United)

Использование:

Чтение и запись.

Описание:

Тип: Булево.

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

Для такой группы игнорируются все свойства, кроме свойств ЦветФона и Группировка.

  

triviumfan

48 — 11.09.18 — 15:52

(44) хм, что за фишка такая с лишними группами?

  

triviumfan

49 — 11.09.18 — 15:52

(39) Можешь пояснить для особо одаренных?

  

Zombi

50 — 11.09.18 — 15:56

(46) Да, так тоже сработало.

  

PR

51 — 11.09.18 — 16:05

(48) Давным давно известная тема, у группы же можно задавать ширину и горизонтальную/вертикальную группировку

  

PR

52 — 11.09.18 — 16:08

+(51) Ну то есть я могу сделать кучу вложенных групп, которые будут определять, как будут группироваться и отображаться элементы внутри этих групп

Деларативное описание формы

  

triviumfan

53 — 11.09.18 — 16:15

(52) Небо голубое. Понятно.

Ещё раз:

— Страница «ГруппаОсновное» вертикальная группировка

   — группа «ГруппаОсновное» горизонтальная

      — группа «ГруппаЛево» вертикальная

      — группа «ГруппаПраво» вертикальная

   — поле «Комментарий»

Почему оно не растягивается? в чем прикол дополнительных групп для сего поля?

  

triviumfan

54 — 11.09.18 — 16:16

Во всех документах такой вариант работает, а тут какаие то танцы с бубнами с доп. группами

  

PR

55 — 11.09.18 — 16:19

(53) А с какого хрена должно растягиваться, если группа «ГруппаОсновное» горизонтальная?

В ней все будет слева направо, а не сверху вниз

  

dmt

56 — 11.09.18 — 16:26

(53) см. 46

  

PR

57 — 11.09.18 — 16:27

(56) И че? Я ни разу не использовал это. Спроси 1С, почему у нее так.

  

dmt

58 — 11.09.18 — 16:30

(57) внимательно смотрим кому написано, выдыхаем

  

PR

59 — 11.09.18 — 16:31

(58) А, мои пардоны

19.05.2015

Новый механизм размещения элементов в форме

Реализовано в версии 8.3.7.1759.

Чтобы было понятно, о чём идёт речь в этой статье, необходимо сделать небольшое пояснение.

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

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

Почему понадобился новый механизм?

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

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

И, в-третьих, мы хотели заложить в новый механизм возможности будущего развития.

Основные изменения

Схематично представить работу прежнего механизма можно следующим образом:

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

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

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

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

В новом механизме генерацию описания визуальной формы, которая раньше целиком выполнялась на сервере, мы разделили на две части, серверную и клиентскую:

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

В результате получается некий «полуфабрикат» визуального представления формы, который передаётся на клиента.

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

Благодаря тому, что расчёт длин строк производится на клиенте, удалось избавиться от ненужных и неаккуратных «щелей» между элементами. А отработка видимости на клиенте без обращения к серверу позволила ускорить работу форм. Потому что включение/выключение видимости элементов формы это одна из наиболее частых операций.

Некоторые новые возможности

Элементы адаптивного интерфейса

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

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

Если в форме есть длинные строки, которые можно разбить на отдельные слова, то такие строки переносятся, если в этом есть необходимость. Соответственно высота формы увеличивается, потому что нижняя её часть «отъезжает» вниз. В результате форма будет выглядеть нормально даже на узких экранах. Более того, этот механизм работает динамически, а значит, вы можете сжимать форму в реальном режиме времени, и вместе с этим будут переноситься длинные строки.

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

Вторым элементом адаптивности является изменение ориентации групп. У групп и у формы в целом появился новый вариант ориентации — «Горизонтально, если возможно». В этом варианте, если клиентский дисплей позволяет расположить элементы горизонтально, они располагаются горизонтально. Если нет, то они располагаются вертикально.

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

Горизонтальное и вертикальное выравнивание

Раньше такая возможность отсутствовала, и для реализации нестандартного выравнивания приходилось выдумывать разные «хитрости». Теперь форме и группе можно указать, каким образом должны выравниваться её элементы по вертикали и по горизонтали. Например, на рисунке ниже, группа кнопок показывает три возможных варианта выравнивания: Лево, Центр и Право:

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

Управление внешним выравниванием

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

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

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

Выравнивание элементов и заголовков

Ещё одна новая возможность, которая появилась, это возможность управлять взаимным расположением элементов и заголовков. Как во всей форме, так и в отдельных группах. Например, заголовки и элементы вы можете «растянуть» к разным краям формы, или наоборот, «стянуть» их друг к другу, выровняв заголовки вправо, а элементы — влево.

Ограничение максимальной ширины элементов

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

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

Управление расстоянием между элементами

Также появилась возможность управлять горизонтальным и вертикальным интервалами между элементами. Например, на следующем рисунке у левой группы вертикальный интервал увеличен, а у правой — уменьшен.

Отключение растягивания формы

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

Отключение прокрутки у страниц

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

Резюме

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

Теги:
UI 
8.3.7 

Описание ошибки

Ошибка в том что, при заимствовании формы в расширение происходит потеря метаданных. Расширение с заимствованной формой становится нерабочим и EDT не может обновить разрабатываемое приложение после заимствования формы.

Как воспроизвести

Тестирование и изучение проблемы производилось на конфигурации
Демонстрационная конфигурация «Библиотека стандартных подсистем», редакция 3.1 версия: 3.1.6.180
Разрабатываемое приложение размещено в файловой информационной базе
Платформа 8.3.20.1789 64бит

Вводная:

Создано два рабочих пространства:

  • PEN007_WS — рабочее пространство в котором есть проект конфигурации и проект расширения который создан в EDT Это проблемное рабочее пространство.
  • PEN008_WS — рабочее пространство в котором есть проект конфигурации и проект расширения, причем расширение создано в конфигураторе и потом импортировано в EDT одновременно с основной конфигурацией.

В расширении, которое создано в EDT и в расширении, которое создано в конфигураторе было выполнено только одно действие, а именно заимствована ФормаЭлемента справочника Пользователи. Пример на скриншоте.
2022-04-09 22-03-11 PEN007_WS - 1C Enterprise Development Tools

Наблюдение 1

В рабочем пространстве PEN007_WS, где расширение было создано в EDT есть отличия в метаданных Базовой формы и Заимствованной формы. Важно то, что в расширении над формой никаких действий после заимствования не производилось. Проблема видна на скриншоте:
2022-04-09 22-11-51 PEN007_WS - Двухстороннее сравнение'PEN007_PFI_PROJECT src Catalogs Пользователи Forms ФормаЭлемента B

при этом, в рабочем пространстве PEN008_WS, где расширение было создано в конфигураторе такого отличия нет. Базовая форма в точности равна заимствованной форме. Это видно на скриншоте:
2022-04-09 22-16-47 PEN008_WS - Двухстороннее сравнение'SSL_31_PROJECT PEN008_PFI_CONF src Catalogs Пользователи Forms Фор

Наблюдение 2

В рабочем пространстве PEN007_WS, где форма была заимствована в EDT происходит некорректная обработка команд формы, а именно для команд, которые не были заимствованы в расширение существует возможность установить связь с методами команды. см. скриншот.
2022-04-09 22-54-15 Скриншот экрана

В рабочем пространстве PEN008_WS, где форма была заимствована в конфигураторе EDT не разрешает добавлять метод для незаимствованных элементов форм.
2022-04-09 23-12-33 Скриншот экрана

Наблюдение 3

При обновлении разрабатываемого приложения в рабочем пространстве PEN007_WS (где расширение было создано в EDT) получаем ошибку
Неверное имя команды элемента формы. — WriteAndClose
2022-04-09 23-30-15 PEN007_WS - 1C Enterprise Development Tools

При сравнении метаданных формы элемента справочника Пользователи через VSCode в узле

<items xsi:type="form:Button">
      <name>ФормаЗаписатьИЗакрыть</name>

обнаружено:

  1. в расширении, которое создано в конфигураторе отсутствует значение узла commandName
    2022-04-09 23-38-15 PEN007_Form form ↔ PEN008_Form form - EDT - Visual Studio Code

  2. в расширении, которое создано в конфигураторе отсутствуют узел excludedCommands
    2022-04-09 23-40-31 PEN007_Form form ↔ PEN008_Form form - EDT - Visual Studio Code

Что я попробовал

Закомментировать узел commandName

      <!--
      <commandName>Form.Command.ЗаписатьИЗакрыть</commandName>
      -->

Закомментировать узел excludedCommands

  <!--
  <excludedCommands>WriteAndClose</excludedCommands>
  -->

однако, это не привело к желаемому результату. Обновить конфигурацию так же не получается, однако ошибок на одну меньше.
2022-04-10 00-05-04 PEN007_WS - 1C Enterprise Development Tools

Скриншоты

No response

Ожидаемое поведение

После заимствования формы она работает и позволяет обновить приложение.

Лог рабочей области

  1. Лог области, где расширение создавалось в EDT и где есть проблемы
    metadata_PEN007.zip

  2. Лог области, где расширение создавалось в Конфигуратор
    metadata_PEN008.zip
    е

Версия 1С:EDT

Ruby 2021.2.12

Операционная система

Windows

Установленные плагины

Нет плагинов

Дополнительная информация

No response

Я разрабатываю веб-страницу, которая имеет много форм с некоторым текстом, близким к форме. Эта форма и текст генерируются функцией, но я получаю это

Как видите, формы и текст не выровнены с формами и текстом ниже. Я хотел бы иметь это:

(это работает, потому что я ставлю пробелы вручную). Вот как я создаю формы.

function add_form($product,$name,$productp)
{
  $productpt = "X";

  echo $name;
  echo '<input type = "text" name = "'. $product. '" id = "'. $product. '" style = "font-size:12pt;height:30px"/> x'.$productp. '€
  price:'.$productpt.'€<br>';
}

echo '<form  method = "post" name = "form1" id = "form1" autocomplete = "off">'; //start form    
echo '<div class = "leftpane">'; //start leftpane
echo '<h1>';

echo '<font size = "6" color = "red"> ALIMENTS </font><br>';

//ADD ELEMENTS IN MY MENU
//The first argument is the form name and id, the second is the name that will be printed(to the left of the form), the third argument is the price.
$menu[] = new Menu("pasta", "Pasta", 2);

$menu[] = new Menu("spaghetti", "Spaghetti", 1.50);

$menu[] = new Menu("pizza", "Pizza", 5);

$menu[] = new Menu("chicken_wings_x4", "Chicken Wings X4", 4.50);

$menu[] = new Menu("cheeseburger", "Cheeseburger", 6);

$menu[] = new Menu("Sandwich", "Sandwich", 2);

$menu[] = new Menu("hamburger", "Hamburger", 4.50);

$menu[] = new Menu("stuff", "stuff", 15.50);

//FOR EACH ELEMENT CREATE A FORM
for($i=0; $i<count($menu); $i++){
  add_form($menu[$i]->form_name, $menu[$i]->name, $menu[$i]->price);
}


echo '</h1>';
echo '</div>'; //Close leftpane
...Do Others stuff in middlepane and in rightpane

Чтобы было понятнее в html, например, первая форма будет:

<input type = "text" name = "pasta" id = "pasta" style = "font-size:12pt;height:30px"/> x2€ price:X€<br>

Я думал разделить левую панель на 3 части и разместить $name слева, форму посередине и цену справа. Но проблема в том, что я создаю форму в функции, поэтому я не знаю, как это сделать.
Это мой css:

<style>
input[type=text] {
    width: 10%;
    margin: 7.5px 0;
    box-sizing: border-box;
}
input[type=submit].class1 {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
input[type=submit].class2 {
    width: 50%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 33%;
    height: 100%;
    float: left;
    border-collapse: collapse;
}

.middlepane {
    width: 33%;
    height: 100%;
    float: left;
    border-collapse: collapse;
}

.rightpane {
  width: 33%;
  height: 100%;
  position: relative;
  float: right;
  border-collapse: collapse;
}
form {
    display: inline-block;
}
h1 {
    font-size: 19.5px;
}

</style>

Растянуть комментарий на всю ширину формы

Ø [Фрэнки,
11.09.18 — 16:35]

Я
   Zombi

11.09.18 — 09:56

Есть вот такая форма:

https://yadi.sk/i/tY4PT8zyk9feGg

Необходимо поле с комментарием растянуть во всю ширину. Сейчас структура вот такая:

https://yadi.sk/i/v0izlMURAHmgUw

Как растянуть комментарий на всю ширину формы?

   triviumfan

1 — 11.09.18 — 09:58

растягивать по горизонтали?

   D3O

2 — 11.09.18 — 09:59

(1) и отключить АвтоМаксимальнаяШирина

   Фрэнки

3 — 11.09.18 — 10:00

так судя по структуре, свойства поля урезаны как минимум двумя группами : ГруппаОсновные и ГруппаЭлемента

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

   Zombi

4 — 11.09.18 — 10:05

(1) Выставил «Да»

(2) Убрал галку.

Не помогло

   Zombi

5 — 11.09.18 — 10:07

   Фрэнки

6 — 11.09.18 — 10:15

(5) я даже отсюда вижу, что у тебя на форме две вертикально разделенные группы сидят — слева и справа. То что добавлено слева — оно осталось сидеть ВНУТРИ левой группы. И ясное дело, что не может растянуться за ее границы.

   Фрэнки

7 — 11.09.18 — 10:16

левая группа — ГруппаОсновыные, а правая группа — Реквизиты договора

   triviumfan

8 — 11.09.18 — 10:18

да, что-то он не договаривает)

   Zombi

9 — 11.09.18 — 10:27

Есть группа «ГруппаОсновные», в ней «ГруппаЭлемента», в ней 2 группы «ГруппаЛево» и «ГруппаПраво». Я комментарий вынес в иерархию к «ГруппаОсновные», то есть к самой верхней на этой странице. Почему элемент все равно привязан к левой группе и как его отвязать от нее?

   Фрэнки

10 — 11.09.18 — 10:30

(9) У тебя свойства группы ГруппаОсновные отделены вертикально справа группой РеквизитыДоговора — если я по твоим скринам это вижу, а ты по ним же этого не видишь, то я больше нечего посоветовать не могу

   Фрэнки

11 — 11.09.18 — 10:31

засунь Комментарий в правую группу и будешь точно также сокрушаться, что не хочет он растягиваться на всю форму, но уже в другой ее стороне

   Zombi

12 — 11.09.18 — 10:33

(10) РеквизитыДоговора это уже другая страница:

https://yadi.sk/i/-5VSiOFCEcDIkw

   ribuh

13 — 11.09.18 — 10:36

ЛКМ взять поле Комментарий и утащить вверх, до Форма, тут бросить — он свалится вниз и будет по всей ширине формы …

   Фрэнки

14 — 11.09.18 — 10:36

(12) ок. Смотри тогда на сымый первый свой скрин. Там есть элементы на правой сторонке формы.

Нижний из них — Способ проведения закупочной процедуры

Ниже идет пустое место. Вот это место — оно накрыто какой-то группой и именно она «не пускает» другие элементы туда растягиваться

   Zombi

15 — 11.09.18 — 10:40

(14) Вот «ГруппаЭлемента» выделил. Но ворме внизу видно что никакой группой пустое место не накрыто.

   Zombi

16 — 11.09.18 — 10:41

(13) Утащить вверх до формы понял. Дальше что сделать? как бросить?

   triviumfan

17 — 11.09.18 — 10:41

пускай для начала покажет настройки расположения своего поля комментарий

   triviumfan

18 — 11.09.18 — 10:42

ну да, либо «группаэлемента»  стоит «нерастягивать»

   Zombi

19 — 11.09.18 — 10:43

   triviumfan

21 — 11.09.18 — 10:46

Это документооборот?

   Zombi

22 — 11.09.18 — 10:49

(21) Да

   triviumfan

23 — 11.09.18 — 10:50

(19) у тебя вообще горит красная галка — сообщает о кривых привязках формы. тыкни на неё, что покажет?

   triviumfan

24 — 11.09.18 — 10:50

(22) какой объект это?

   Zombi

25 — 11.09.18 — 10:51

(23) Ошибка генерации элемента формы: «ГруппаАвтокатегоризацияВыполнена» — Высота группы больше заданной

Ошибка генерации элемента формы: «ГруппаКатегорииПроверены» — Высота группы больше заданной

Это к другим страницам относится

   Zombi

26 — 11.09.18 — 10:52

(24) Справочник.ВнутренниеДокументы.

   Zombi

27 — 11.09.18 — 10:53

Это свойства «ГруппаКомментарий». Ее же щас надо как то растянуть, за ней наверное и комментарий растянется.

https://yadi.sk/i/ZDMPriBZ1fsaMw

   Zombi

28 — 11.09.18 — 10:55

Извиняюсь. Щас срочно уехать надо. После обеда подниму тему.

   triviumfan

29 — 11.09.18 — 11:03

Парадокс, но комментарий на этой странице действительно не растягивается :)

   ribuh

30 — 11.09.18 — 11:21

(16) Утащить до слова «Форма», бросить — отпустить левую кнопку мыши (ЛКМ)

   Zombi

31 — 11.09.18 — 12:28

(30) Так он выносится за пределы страницы, соответственно двигает остальные старницы вверх. Нужно чтобы он остался в пределах «ГруппаОсновные» внизу во всю ширину и был виден только на этой странице.

   Zombi

32 — 11.09.18 — 14:12

Апну, вдруг еще кто подскажет.

   PR

33 — 11.09.18 — 14:35

Прекрасная ветка

Все предыдущие скрины удалены, форма в ДО не названа, то, что это ДО, выпытано в процессе, вопрос плевый, но памажите, кто может

Рукалицо

Никакого желания помогать

   dmt

34 — 11.09.18 — 14:48

Вопрос не плевый. Какой-то глюк.

   Zombi

35 — 11.09.18 — 14:49

(33) Сорян, что то ЯД глюканул, переустановил его и потерял скрины.

Есть такая форма:

https://yadi.sk/i/cEEhTxEto095RA

Вот так сейчас форма выглядит в конфигураторе:

https://yadi.sk/i/5fqXX24pTiYD3Q

Это форма элемента справочника «ВнутренниеДокументы» в ДО. Форма допиленная уже не одним человеком. Но надо вот еще допилить.

   PR

36 — 11.09.18 — 15:13

(35) Кинь КомментарийРеквизит в ГруппаЭлемента

   агент смит

37 — 11.09.18 — 15:24

(33) Да ты хоть раз кому-нибудь помог с 1С?

   Zombi

38 — 11.09.18 — 15:26

   PR

39 — 11.09.18 — 15:28

(38) Е мое, все перекурочили

Создай Группу1 без видимости, в нее кинь две группы, которые слева и справа

Создай Группу2 без видимости с вертикальным расположением реквизитов и кинь в нее Группу1 и Комментарий

   PR

40 — 11.09.18 — 15:29

(37) Миша, иди спи, у вас там в Мордоре ночь глухая

   triviumfan

41 — 11.09.18 — 15:34

У кого есть 1С:ДО — попробуйте проделать это сами) Там действительно не все так просто)

   Zombi

42 — 11.09.18 — 15:35

(39) Оказалось достаточно создать группу и поместить в нее левую и правую. Комментарий остался в «ГруппаОсновные» и растянулся:

https://yadi.sk/i/uMMbZVyNQaqaEA

Спасибо!

   PR

44 — 11.09.18 — 15:36

(41) Ты издеваешься что ли?

   PR

45 — 11.09.18 — 15:37

(43) Беги скорее, твои друзья в овраге лошадь доедают, тебе не достанется

   dmt

46 — 11.09.18 — 15:47

(42) Можешь обратно закинуть в прежнюю группу и установить для нее галку «Объединенная»

   dmt

47 — 11.09.18 — 15:48

Расширение группы формы для обычной группы (Form group extension for a usual group)

Объединенная (United)

Использование:

Чтение и запись.

Описание:

Тип: Булево.

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

Для такой группы игнорируются все свойства, кроме свойств ЦветФона и Группировка.

   triviumfan

48 — 11.09.18 — 15:52

(44) хм, что за фишка такая с лишними группами?

   triviumfan

49 — 11.09.18 — 15:52

(39) Можешь пояснить для особо одаренных?

   Zombi

50 — 11.09.18 — 15:56

(46) Да, так тоже сработало.

   PR

51 — 11.09.18 — 16:05

(48) Давным давно известная тема, у группы же можно задавать ширину и горизонтальную/вертикальную группировку

   PR

52 — 11.09.18 — 16:08

+(51) Ну то есть я могу сделать кучу вложенных групп, которые будут определять, как будут группироваться и отображаться элементы внутри этих групп

Деларативное описание формы

   triviumfan

53 — 11.09.18 — 16:15

(52) Небо голубое. Понятно.

Ещё раз:

— Страница «ГруппаОсновное» вертикальная группировка

   — группа «ГруппаОсновное» горизонтальная

      — группа «ГруппаЛево» вертикальная

      — группа «ГруппаПраво» вертикальная

   — поле «Комментарий»

Почему оно не растягивается? в чем прикол дополнительных групп для сего поля?

   triviumfan

54 — 11.09.18 — 16:16

Во всех документах такой вариант работает, а тут какаие то танцы с бубнами с доп. группами

   PR

55 — 11.09.18 — 16:19

(53) А с какого хрена должно растягиваться, если группа «ГруппаОсновное» горизонтальная?

В ней все будет слева направо, а не сверху вниз

   dmt

56 — 11.09.18 — 16:26

(53) см. 46

   PR

57 — 11.09.18 — 16:27

(56) И че? Я ни разу не использовал это. Спроси 1С, почему у нее так.

   dmt

58 — 11.09.18 — 16:30

(57) внимательно смотрим кому написано, выдыхаем

   PR

59 — 11.09.18 — 16:31

(58) А, мои пардоны

 

Делаю внешнюю печатную форму для счета на оплату, зарегистрировал для документа «СчетНаОплату» в справочнике ВПФ, при попытке напечатать вот такая ошибка:

При печати Счет на оплату 0000000001 от 24.08.2010 11:50:41 обнаружены ошибки :
Обработчик печатной формы Счет (внешняя): {Справочник.ВнешниеПечатныеФормы(100)}: Метод объекта не обнаружен (Печать)

В чем проблема? В модуле ВПФ функция «печать» есть.

 

Разобрался. При разработке ВПФ любая ошибка при заполнении макета приводит к вышеописанной ошибке.

 

Функция печати должна быть в модуле обработки, называться Печать с двумя параметрами документ объект и табличный документ. вот прототип:

Функция Печать(ДокументОбъект, ТабДокумент) Экспорт

  ……
 Возврат ТабДокумент;

КонецФункции

 

Dmitry Popov

Пользователь

Сообщений: 3
Авторитет:

0

Регистрация: 25.08.2010

Добрый день, возникла проблема при создание внешней печатной формы, для документа «Реализация товара»
конфигурация: Альфа-Авто: Автосервис+Автозапчасти.
Внешняя форма должна печатать немного доработанную версию формы торг-12. Необходимо именно внешнуюю печатную форму разработать.
Функцию взял с общего модуля документа ПечатьТорг12.

При запуске внешней обработки получаю ошибку:
«Получение элемента по индексу для значения не определенно»

{ОбщийМодуль.обПроцедурыОбщегоНазначения(1536)}: Получение элемента по индексу для значения не определено
Результат = ЗначенияПрав[ПравоСсылка];

С формы документа эта функция работает отлично, но вот с обработки никак. В чем заключается разница и как эту разницу устранить?

Изменено: Dmitry Popov25.08.2010 17:30:44

 

Наверно ошибка при получении права

Вместо переменной Права надо передать глПрава или ДокументОбъект.Права
ФорматВыводаСуммы = обПраво(«ФорматВыводаСуммы», глПрава,,ДокументОбъект);
ФорматВыводаКоличества = обПраво(«ФорматВыводаКоличества», глПрава,,ДокументОбъект);

Если не получится вот рабочий пример внешней печатной формы ТОРГ 12.

 

Dmitry Popov

Пользователь

Сообщений: 3
Авторитет:

0

Регистрация: 25.08.2010

Спасибо, что отозвались. Но проблема не решилась.
В переменной Права передавалось значение «глПрава».
Прикрутил данную печатную форму, в результате такая же ошибка.

Возможно проблема в том, что в обработке я создаю Форму в которой по реквизиту СсылкаНаОбъект (с типом данных документ реализация товара) указываю какой документ необходимо сформировать.

Ошибка эта возникает в функции и в подобных этой функции.
СтруктураСтроки = дкПолучитьПредставлениеДанныхТоварнойСтроки(СтрокаТоваров,ДокументОбъект);

Так как значения получаются следующими при выполнение:

ОбъектДанных Неопределено
ЗначениеПрава Неопределено
ОбъектДанныхИмя Неопределено
ПравоНаименование Неопределено

Результат = ЗначенияПрав[ПравоСсылка]; <- И в этой строке возникает конфликт.

Изменено: Dmitry Popov26.08.2010 10:14:06

 

Из Ссылки надо получить объект: ДокументОбъект = СсылкаНаОбъект.ПолучитьОбъект();
В некоторых функциях из ДокументОбъект получают права из ссылки их не получить.

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

 

Dmitry Popov

Пользователь

Сообщений: 3
Авторитет:

0

Регистрация: 25.08.2010

Большое спасибо за быстрые и информативные ответы все заработало.

 

Катя Тихонова

Заглянувший

Сообщений: 91
Авторитет:

0

Регистрация: 22.03.2010

Пытаюсь сделать внешнюю печатную форму таким образом как вы написали. теперь мне нужно сделать запрос чтобы получить сведения из регистра сведений.
С текстом запроса все нормально, даже с установкой параметров.
Но вот когда говорю
Результат = Запрос.Выполнить();
начинаю проверять работает или нет — выдает ошибку  Справочник.ВнешниеПечатныеФормы(100)}: Метод объекта не обнаружен (Печать)
получается во внешних отчетах нельзя делать запросы???

 

#10



0


02.03.2011 11:38:12

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

Но точно установить в чем дело можно только посмотрев на вашу обработку.
Если решите ее выложить то сообщите версию конфигурации и компоненты.

 

Катя Тихонова

Заглянувший

Сообщений: 91
Авторитет:

0

Регистрация: 22.03.2010

#11



0


02.03.2011 13:23:08

Вот форма заказ-наряда которая нужна салону

конфигурация Альфа-Авто: Автосалон+Автосервис+Автозапчасти. Редакция 4.1 (4.1.01.18)
компонента  8.0.7.102

 

#12



0


02.03.2011 14:25:28

Вы подключаете форму к базе на 1С предприятие 8.1 или 8.2?

 

#13



0


02.03.2011 14:40:13

Попробуйте эту печатную форму.

 

Катя Тихонова

Заглянувший

Сообщений: 91
Авторитет:

0

Регистрация: 22.03.2010

#14



0


03.03.2011 17:07:30

так то 8.2 простите забыла написать((((
спасибо за обработку!!!! попробую эту потом отпишусь!!

 

#15



0


09.03.2011 07:10:00

А отлаживать печатные формы можно, добавив форму внешней обработки.

 

#16



0


09.03.2011 10:31:50

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

 

agile_roman

Заглянувший

Сообщений: 227
Авторитет:

10

Регистрация: 06.05.2011

#17



0


20.05.2011 09:48:37

Здравствуйте. Конфигурация Альфа-Авто 4.1. Внешняя печатная форма. В качестве макета — документ Word. В модуле обработки описана функция Печать() Экспорт. и в ней написано «возврат неопределено». А перед этим код, вызывающий вордовский макет, заполняющий его и активизурующий. В документе при попытке напечатать — сообщение «Обработчик печатной формы БланкНаСервис (внешняя): {Справочник.ВнешниеПечатныеФормы(100)}: Метод объекта не обнаружен (Печать)». Подскажите, пожалуйста, в чем может быть дело.
Сейчас переписал под два параметра, как описано в примере. та же ошибка

 

#18



0


20.05.2011 10:29:58

Пришлите обработку внешней печатной формы.

Изменено: Александр Яблочкин20.05.2011 10:31:17

 

agile_roman

Заглянувший

Сообщений: 227
Авторитет:

10

Регистрация: 06.05.2011

#19



0


20.05.2011 10:32:38

 

agile_roman

Заглянувший

Сообщений: 227
Авторитет:

10

Регистрация: 06.05.2011

#20



0


20.05.2011 11:04:32

Александр, я нашел сам. Нужно передавать мой реквизит ССылкаНаОбъект сразу в параметры:
Печать(ссылканаобъект, табдокумент)

 

#21



0


20.05.2011 11:04:46

Ошибка в самой обработке. Первая же строка
ДокументОбъект = СсылкаНаОбъект;
Попытка присвоить документу (ЭТО ОБЪЕКТ) некую ссылку. Вот тут сразу и падает.
Скорее должно быть как
СсылкаНаОбъект=ДокументОбъект.Ссылка;

Как уже писалось выше.
— Внешнюю печатную форму указываем как хранить во внешнем файле.
— Открываем эту обработку в конфигураторе.
— Ставим точку останова на первую же строку в функции Печать.
А дальше отлаживаем формирование печатной формы как обычный кусок кода.

P.S.: И еще замечание по коду. В заявке на ремонт автомобиль это не только ссылка на справочник автомобилей, но и строка, модель. Соответственно при такой типизации данного реквизита будет падать на строке «СсылкаНаОбъект.Автомобиль.ГодВыпуска» … может и еще где.

 

Александр Василельев

Заглянувший

Сообщений: 71
Авторитет:

0

Регистрация: 17.06.2014

#22



0


14.07.2014 11:02:16

Добрый день.

При загрузки внешней печатной формы выдает ошибку

Код
Обработчик печатной формы Заявка ПрофТон (внешняя): {Справочник.ВнешниеПечатныеФормы.МодульОбъекта(105)}: Метод объекта не обнаружен (Печать)

В чем ошибка?

Прикрепленные файлы

  • ПечатнаяФормаЗаявка.epf (174.82 КБ)

 

#23



0


14.07.2014 11:43:56

Добрый день, Александр!

Неправильное название функции.
Должно быть так:
Функция Печать(ДокументОбъект, ТабДокумент) Экспорт

 

#24



0


14.07.2014 12:10:21

Форму открывает но не выдает никаких данных

 

Полина Морозова

Администратор

Сообщений: 173
Авторитет:

50

Регистрация: 12.10.2011

#25



0


14.07.2014 12:40:44

Это означает, что Вы неверно разработали внешнюю печатную форму.

Рекомендуем ознакомиться со справочной информацией, относящейся к справочнику «Внешние печатные формы». Там же Вы найдете примеры кода.

Содержание:

1. Что такое реквизиты формы в конфигурации системы 1С

2. Ошибка «Нельзя изменять поле содержащее объект данных формы» и два способа ее решения

1.  Что такое реквизиты формы в конфигурации системы 1С

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

         Реквизиты формы 1С являются списком типизированных значений ДанныеФормыКоллекция 1С. Для того, чтобы оптимизировать передачу данных 1С между клиентом и сервером, в 1С используется особая передача объектов базы данных формы. Можно менять свойства и выполнять различные метода, но нельзя напрямую изменять само значение элемента данных формы.

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

         Реквизит формы 1С имеет имя Контрагент. При его изменении на форме вызывается серверная процедура 1С, которая в зависимости от переданного в параметрах данной процедуры контрагента будет искать по нему нужный договор и проставлять его в реквизит объекта 1С.

&НаКлиенте

Процедура КонтрагентПриИзменении(Элемент)

         КонтрагентПриИзмененииНаСервере(Контрагент);

КонецПроцедуры

&НаСервере

Процедура КонтрагентПриИзмененииНаСервере(ВыбранныйКонтрагент)

         // Вставить содержимое обработчика.

КонецПроцедуры  

2. Ошибка «Нельзя изменять поле содержащее объект данных формы» и два способа ее решения

         В описанном выше варианте реализации проставления договора вылетит ошибка «Нельзя изменять поле содержащее объект данных формы».    

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

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

&НаКлиенте

Процедура КонтрагентПриИзменении(Элемент)

         ПеременнаяКонтрагент = Контрагент;

         КонтрагентПриИзмененииНаСервере(ПеременнаяКонтрагент);

КонецПроцедуры

&НаСервере

Процедура КонтрагентПриИзмененииНаСервере(ВыбранныйКонтрагент)

         // Вставить содержимое обработчика.

КонецПроцедуры

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

&НаКлиенте

Процедура КонтрагентПриИзменении(Элемент)

         КонтрагентПриИзмененииНаСервере(Контрагент);

КонецПроцедуры

&НаСервере

Процедура КонтрагентПриИзмененииНаСервере(Знач ВыбранныйКонтрагент)

         // Вставить содержимое обработчика.

КонецПроцедуры

         Описанными выше способами можно избежать ошибок.

Специалист компании «Кодерлайн»

Александр Суворов

Создание HTML-формы – неотъемлемая часть сайта и важный навык веб-разработчиков. Используйте это руководство для изучения элементов HTML-форм.

HTML-формы

Введение

HTML-формы требуются для сбора данных от посетителей сайта. Например, при регистрации на Uber, Netflix или Facebook пользователь вводит свое имя, почту и пароль.

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

  • Пользовательские стили
  • Нормализация CSS

Элемент Form

Элемент Form (<form></form>) оборачивает все элементы внутри HTML-формы.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
      
      </form>
    </body>
</html>

Атрибуты:

  • action – это веб-адрес (URL) программы, которая обрабатывает данные формы.
  • Method – это HTTP метод, который используется браузером для отправки формы.
  • Возможные значения: POST или GET. POST – отправляет данные формы на сервер.
    GET – данные отправляются внутри URL, параметры разделяются знаком «?».

Примечание: Нельзя создать форму внутри формы. То есть использование элемента <form> внутри другого элемента <form> недопустимо.

Элемент Input

Это самый популярный элемент HTML-формы. Используется для создания текстовых полей, в которые пользователь вводит информацию (например: пароль, адрес почты и т. д.).

Создадим текстовое поле, в которое пользователь сможет ввести свое имя.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <input type="text" id="name" name="student_name">
      </form>
    </body>
</html>

В примере выше над тегом input были добавлены три атрибута.

type

Указывает на тип ввода. При значении text пользователь должен вводить текстовые данные. У этого атрибута имеется множество значений, например, email, tel (для номера телефона), password и т. д.

Пример: при попытке зайти в свой профиль на сайте (Amazon/Netflix) необходимо указать почту и пароль. Для этих целей используется элемент input. Атрибуты type будут иметь значения email и password соответственно.

id

Это не обязательное, но весьма полезное поле HTML-формы. Например, для определения элементов в CSS/JavaScript. Идентификаторы используются для сопоставления меток с нужными элементами управления формой.

name

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

placeholder

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

Примечание: Использование разных значений в атрибуте type выводит разный результат:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <input type="text" id="name" name="student_name">
          <input type="email" id="mail" name="student_email">
          <input type="password" id="password" name="student_password">
      </form>
    </body>
</html>

Элементы input без placeholder:

HTML-формы

Элементы input с placeholder:

HTML-формы

Элемент textarea

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

Элемент <textarea> не является самозакрывающимся тегом, поэтому требует открывающей и закрывающей скобки.

Атрибуты:

  • id – см. <input/>.
  • name – см. <input/>.
  • cols – задает видимую ширину текстовой области.
  • rows – задает видимое количество строк в текстовой области.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <textarea id="bio" name="student_bio"></textarea>
      </form>
    </body>
</html>

HTML-формы

Примечание: В большинстве браузеров можно изменять размер элемента.

Элемент button

Один из важнейших элементов HTML-формы. Без кнопки вы не сможете отправить и обработать данные формы на сервере.

В элементе задается атрибут type, который может принимать три разных значения: submit, reset и button.

Атрибуты:

  • type=”reset” – при нажатии очищает все данные формы.
  • type=”button” –  в нем нет какого-то стандартного поведения. В основном используется в JavaScript для программирования настраиваемого поведения.
  • type=”submit” – стандартное поведение кнопки «Отправить», т. е. передача данных на сервер.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
        
          <input type="text" id="name" name="student_name">
          <input type="email" id="mail" name="student_email">
          <input type="password" id="password" name="student_password">
          
          <textarea id="bio" name="student_bio"></textarea>
          
          <button type="submit">Submit</button>
        
      </form>
    </body>
</html>

HTML-формы

Элемент label

Пока что пользователь не сможет понять, для чего нужен каждый элемент HTML-формы. Вы не можете предугадать, куда вводить адрес почты, а куда – пароль. Формы смотрятся недоделанными и непонятными.

Каждую строку HTML-формы можно отметить элементом label.

Наиболее популярным атрибутом label является for.

Атрибуты:

for – связывает метку строки с определенным элементом формы. Соответствие проверяется по ID. Значением атрибута ID для элемента input в примере выше является email. Оно совпадает со значением атрибута for для элемента label. Таким образом, оба элемента связаны.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <label for="name">Name</label>
          <input type="text" id="name" name="student_name">

          <label for="mail">Email</label>
          <input type="email" id="mail" name="student_email">

          <label for="password">Password</label>
          <input type="password" id="password" name="student_password">

          <label for="bio">Biography</label>
          <textarea id="bio" name="student_bio"></textarea>

          <button type="submit">Submit</button>
      </form>
    </body>
</html>

HTML-формы

Примечание: если навести мышкой на метку (название строки), то активируется поле ввода, связанное с данной меткой Это стандартное поведение элемента.

Меню select

Иногда требуется создание HTML-формы, в которой пользователь будет выбирать определенные значения.

Для экономии места в интерфейсе рекомендуется выносить все списки длиннее 4-5 пунктов в меню select.

Пример: форма для поступления в университет, в которой студенты выбирают нужный профиль подготовки.

Элементу <select> нужны открывающие и закрывающие теги.

<select> отображает выпадающее меню с заданными значениями. Сам по себе элемент select не выполняет никаких действий, т.к. ему нужны дополнительные теги (элементы option). Здесь можно провести параллель с тегом <ul>, которому необходимы элементы <li>.

Атрибуты:

  • name – см. <input/>.
  • <option> – вариант выбора из меню select. Использует атрибут value.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h2>Your basic info</h2>

          <label for="name">Name</label>
          <input type="text" id="name" name="student_name">

          <label for="mail">Email</label>
          <input type="email" id="mail" name="student_email">

          <label for="password">Password</label>
          <input type="password" id="password" name="student_password">

          <h2>Your profile</h2>

          <label for="bio">Biography</label>
          <textarea id="bio" name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select id="courses" name="student_courses">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
          </select>
          
        <button type="submit">Submit</button>
      </form>
    </body>
</html>

HTML-формы

Для формы выбора курса также задается элемент label. Кроме того, списки можно упорядочить по логическим группам. Для этих целей используется элемент <optgroup>.

Атрибуты:

label: – название группы опций (вариантов). В примере ниже варианты выбора делятся на две группы с меткой Engineering (Проектирование) и Management (Управление).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h2>Your basic info</h2>

          <label for="name">Name</label>
          <input type="text" id="name" name="student_name">

          <label for="mail">Email</label>
          <input type="email" id="mail" name="student_email">

          <label for="password">Password</label>
          <input type="password" id="password" name="student_password">

          <h2>Your profile</h2>

          <label for="bio">Biography</label>
          <textarea id="bio" name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <label for="courses">Select Courses</label>
          <select id="courses" name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science</option>
              <option value="electrical_engineering">Electrical</option>
              <option value="mechanical_engineering">Mechanical</option> 
              <option value="chemical_engineering">Chemical</option>
              <option value="civil_engineering">Civil</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology</option>
              <option value="marketing_management">Marketing</option>
              <option value="business_administration">Business</option>     
            </optgroup>
          </select>

        <button type="submit">Submit</button>
      </form>
    </body>
</html>

Радиокнопки

Меню select – это идеальное решение для HTML-формы с объемным списком. Однако при наличии 5 и менее вариантов выбора, лучше реализовать их через радиокнопки.

В отличие от меню select, радиокнопки (radio button) сразу показывают все доступные опции. Пользователь по-прежнему может выбрать только один вариант.

Атрибуты:

  • name – см. <input/>.
  • value – определение значений заданных вариантов.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          <h2>Your basic info</h2>

          <label for="name">Name</label>
          <input type="text" id="name" name="student_name">

          <label for="mail">Email</label>
          <input type="email" id="mail" name="student_email">

          <label for="password">Password</label>
          <input type="password" id="password" name="student_password">

          <label>Age:</label>
          <input type="radio" id="under_16" value="under_16" name="user_age"><label for="under_16" class="light">Under 16</label><br>
          <input type="radio" id="over_16" value="over_16" name="user_age"><label for="over_16" class="light">16 or Older</label>

          <h2>Your profile</h2>

          <label for="bio">Biography</label>
          <textarea id="bio" name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select id="courses" name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology Management</option>
              <option value="marketing_management">Marketing Management</option>
              <option value="business_administration">Business Administration</option>
            </optgroup>
          </select>

        <button type="submit">Submit</button>
      </form>
    </body>
</html>

HTML-формы

Примечание: Внутри одной группы радиокнопок атрибут name должен быть одинаковым.

Чекбоксы

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

Атрибуты:

  • name – см. <input/>.
  • value – определение значений заданных вариантов.
  • checked – отметка о предвыборе данного варианта, т.к. по умолчанию у чекбоксов нет выбранного значения. Важно помнить, что это логический атрибут (boolean).
<input type="checkbox" checked id="name" value="abhishek" name="user_name" />

В примере ниже каждый отдельный вариант использовался с метками (элементом label). Для объединения чекбоксов и меток внутри HTML-формы использовался атрибут for для label и атрибут id для checkbox.

Примечание: поскольку кликать по маленьким чекбоксам неудобно, лучше оборачивать элемент <label>  вокруг каждого чекбокса. Тогда при клике в области метки выделение чекбокса будет добавляться или сниматься. Однако в примере ниже этого не сделано.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sign Up Form</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <form action="index.html" method="post">
          
          <h2>Your basic info</h2>
          
          <label for="name">Name</label>
          <input type="text" id="name" name="student_name">

          <label for="mail">Email</label>
          <input type="email" id="mail" name="student_email">

          <label for="password">Password</label>
          <input type="password" id="password" name="student_password">

          <label>Age:</label>
          <input type="radio" id="under_16" value="under_16" name="user_age"><label for="under_16" class="light">Under 16</label><br>
          <input type="radio" id="over_16" value="over_16" name="user_age"><label for="over_16" class="light">16 or Older</label>

          <h2>Your profile</h2>
          
          <label for="bio">Biography</label>
          <textarea id="bio" name="student_bio"></textarea>

          <label for="courses">Select Courses</label>
          <select id="courses" name="student_courses">
            <optgroup label="Engineering">
              <option value="computer_engineering">Computer Science Engineering</option>
              <option value="slectrical_engineering">Electrical Engineering</option>
              <option value="mechanical_engineering">Mechanical Engineering</option>
              <option value="civil_engineering">Civil Engineering</option>
              <option value="chemical_engineering">Chemical Engineering</option>
            </optgroup>
            <optgroup label="Management">
              <option value="finance_management">Finance Management</option>
              <option value="technology_management">Technology Management</option>
              <option value="marketing_management">Marketing Management</option>
              <option value="business_administration">Business Administration</option>
            </optgroup>
          </select>

          <label>Interests:</label>
          <input type="checkbox" id="engineering" value="interest_engineering" name="user_interest"><label class="light" for="engineering">Engineering</label><br>
          <input type="checkbox" id="business" value="interest_business" name="user_interest"><label class="light" for="business">Business</label><br>
          <input type="checkbox" id="law" value="interest_law" name="user_interest"><label class="light" for="law">Law</label>
        
        <button type="submit">Submit</button>
      </form>
    </body>
</html>

HTML-формы

Чекбокс может существовать сам по себе. Радикнопки появляются только в качестве группы (минимум 2 кнопки).
В отличие от радиокнопки выбор чекбокса не является обязательным.

Конечный результат

HTML-формы

В статье было представлено пошаговое руководство по созданию HTML-формы. Не старайтесь запомнить все и сразу – ни один разработчик не сможет назвать каждый атрибут или элемент. Гораздо важнее научиться ориентироваться в документации.

Вы можете добавить в эти примеры CSS и создать собственные формы.

Перевод статьи Abhishek Jakhar: A step-by-step guide to getting started with HTML forms

Другие статьи по теме:

  • 10 вещей в HTML, о которых вы вряд ли знали
  • 10 способов проверить знания HTML/CSS
  • Супершпаргалка по верстке для новичков: все основные HTML-теги

Возможно, вам также будет интересно:

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

  • Понравилась статья? Поделить с друзьями:
    0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии