Разворачивающийся список html: Как сделать выпадающий список с помощью HTML

Полное руководство по дизайну выпадающих списков

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

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

Выпадающие списки выделяются на фоне всех UI-элементов, которые облегчают жизнь пользователя. Почему? Они автоматизируют процесс: пользователи выбирают ответ из раскрывающегося списка и вуаля — нужное поле заполнено!

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

Не беспокойтесь — мы сейчас всё обсудим.

Содержание

• Элемент выпадающего списка — что это такое?
• Выпадающие списки в сравнении с другими UI-элементами
• Когда использовать многовариантные выпадающие списки
• Дизайн выпадающих списков для сайтов
• 5 вдохновляющих дизайнов выпадающих списков
• Выпадающие списки в мобильных приложениях

Элемент выпадающего списка — что это такое?

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

Выпадающее меню помогает в навигации по сайту или приложению. Оно предоставляет пользователю функции навигации при ховере на элемент меню. Замечательные примеры выпадающих меню можно найти в статье ‘Inspirational dropdown menu examples: web and mobile’.

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

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

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

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

Выпадающие списки облегчают жизнь (иногда)

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

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

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

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

Выпадающие списки в сравнении с другими UI-элементами

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

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

Переключатели (toggle switches)

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

Ещё можно учесть, что для светлой/ тёмной темы UI-элемент будет буквально похож на выключатель света и, следовательно, будет более интуитивно понятным.

Селекторы (radio buttons)

Теперь предположим, что пользователь указывает пол — «мужской», «женский» или выбирает «предпочитаю не указывать». Можно для этого использовать выпадающий список? Да. Это лучший вариант? Да, если мало свободного места.

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

Чекбоксы

Если пользователю нужно указать несколько возможных вариантов: например, если он женат/ холост, с детьми, живёт с родителями/один, то чекбоксы подойдут лучше всего.

При наличии свободного места — идеально, когда пользователь сразу видит все доступные варианты.

Выбор даты и времени

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

Оптимальным решением может стать выпадающий список для выбора года и календарь для месяца и дня.

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

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

Дайте пользователю возможность вводить текст всякий раз, когда спрашиваете у него что-то лёгкое для запоминания — например, дату рождения или номер телефона.

Поля поиска

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

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

СОВЕТ: для получения бонусных UX-очков попробуйте создать поле с предиктивным поиском.

Степперы

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

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

Когда использовать многовариантный выпадающий список

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

Или, когда пользователю предоставляется выбор, какие элементы он хочет видеть на странице — например, в редакторе WordPress. Другой пример: ПО или веб-приложение ERP для управления бизнесом: там от пользователя требуется выбрать то, что всегда будет видно на его панели управления, но нет места, чтобы разместить несколько чекбоксов — поэтому используется многовариантный выпадающий список..

Выпадающие списки на сайтах

Выпадающие списки имеют свои плюсы и минусы, а также своё место в дизайне веб-интерфейса.

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

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

Ответ прост. Сколько места нужно сэкономить? Приведёт ли это к повышению стоимости взаимодействия? Ведь самое главное — это пользовательский опыт. Использовать больше пространства = улучшить юзабилити? Тогда один из вышеупомянутых альтернативных элементов подойдёт лучше.

Сколько вариантов включать в выпадающий список?

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

Больше десяти — и список может получиться слишком длинным.

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

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

Недоступные параметры и сообщения об ошибках

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

Ещё лучше, если после достаточно долгого ховера на сером пункте пользователь увидит короткое всплывающее сообщение, которое объяснит, почему этот пункт недоступен и что можно сделать (если можно, конечно), чтобы он стал активным

Когда лучше позволить пользователю вводить данные самому?

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

5 примеров дизайна выпадающих списков для вдохновения

• House of FraserВсемирно известный интернет-магазин House of Fraser — отличный пример того, как ecommerce может использовать выпадающие списки для максимального удобства пользователя.

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

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

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

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

• UX Passion

  UX passion — ещё один пример сайта, который правильно использует выпадающие списки.

  Чтобы автоматизировать ответы на вопросы и не вынуждать пользователей вводить данные без необходимости, UX Passion предлагают два выпадающих списка: предполагаемый бюджет пользователя и желаемая дата начала работ.

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

  Это разумное планирование — но мы и не ожидали меньшего от сайта на домене UX Passion!

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

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

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

• Venture Harbour
  
  Venture Harbour — отличный пример сайта, который правильно применяет выпадающие списки. Он и должен — его задача лежит в создании новых онлайн-венчуров, которым нужно отличное качество. Собственно, приложение Leadformly, упомянутое выше, было создано с их помощью.

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

  Более того, поскольку Venture Harbour использует два выпадающих списка, их форма подписки занимает всего три поля и может находиться на главной странице. Эффективный способ извлечь выгоду из пространства!

Выпадающие списки в мобильных приложениях

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

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

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

Есть ещё один способ сделать выпадающие списки более интуитивно понятными и естественными в мобильных интерфейсах — добавить ощущение объёмности, особенно если речь об Android. В Material Design указано, что любой элемент списка или меню должен отображаться поверх других фиксированных UI-элементов. Для достижения наилучших результатов используйте небольшое затенение для объёма.

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

Выводы

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

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

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

Создание форм с помощью Acrobat

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

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

Теги позволяют задавать определенные свойства полей. Совместное использование тегов и инструментов размещения полей на формах Acrobat позволяет создавать полностью функциональные и профессионально оформленные документы.

Версия текстового тега

В этом документе описывается синтаксис текущей версии текстовых тегов Acrobat Sign (2.0). Этот синтаксис можно использовать в любых новых документах и в версиях существующих документов. Если вы еще не знакомы с текстовыми тегами Acrobat Sign, см. Руководство по текстовым тегам.

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

Подготовка формы

1. Откройте в приложении Acrobat документ PDF, который нужно преобразовать в форму Acrobat Sign.

2. Выберите Инструменты > Подготовить форму.

3. Нажмите Начать. Acrobat создает форму и открывает ее в режиме редактирования. На панели справа доступны параметры редактирования формы. На панели инструментов находятся кнопки для добавления дополнительных полей формы.

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

   Если в документе нет пробелов или областей для преобразования, появится диалоговое окно с сообщением о том, что поля формы не найдены. Нажмите ОК, чтобы продолжить.

4. На панели справа нажмите Дополнительно и выберите Преобразовать в форму Acrobat Sign.

5. Появится предупреждение о том, что Acrobat удалит поля формы, не поддерживаемые в Acrobat Sign. Нажмите Далее.

6. Если появится еще одно оповещение, нажмите ОК.

Корректировка автоматического размещения полей

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

 

 Проверьте форму, удалите лишние поля и переместите поля, которые были размещены неправильно.

Всем автоматически размещенным полям присваиваются уникальные имена. Некоторые из этих имен могут быть непонятными (например, fill_3).  

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

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

Размещение полей формы вручную

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

1. Чтобы добавить поле в форму, выберите соответствующий значок на панели инструментов.

   Доступны следующие значки полей (слева направо):

   • Выделение объекта — освобождение курсора для выделения любого объекта на странице.
   • Текстовое поле — универсальное текстовое поле для ввода данных. Это распространенное поле, используемое в большинстве форм.
   • Флажок — позволяет создать группу строковых элементов, среди которых пользователь может выбрать несколько вариантов.
   • Переключатели — позволяют создать группу строковых элементов, среди которых пользователь может выбрать только один вариант.
   • Раскрывающийся список — список элементов, в котором пользователь может выбрать один вариант.
   • Поле подписи — одиночное поле подписи.
   • Блок подписи — блок, содержащий несколько полей подписи (как минимум, «Подпись» и «Адрес электронной почты»). В зависимости от настроек учетной записи Acrobat Sign, используемой для отправки документа, в этот блок также можно включить поля «Должность» и/или «Организация» для подписывающей стороны.
   • Инициалы — одиночное поле инициалов, которое может содержать до четырех символов.
   • Должность — обязательное поле, где указывается должность получателя.
   • Организация — обязательное поле, где указывается название организации получателя.
   • Полное имя — поле, доступное только для чтения, где содержится расшифровка текста, введенного в поле «Подпись».
   • Адрес электронной почты — поле, доступное только для чтения, где содержится адрес электронной почты получателя.
   • Дата — поле, доступное только для чтения, где содержится метка текущей даты. Метка подставляется, когда получатель открывает соглашение
   • Удерживать выбранный инструмент — выберите этот значок, чтобы включить или отключить функцию размещения нескольких полей.  Когда эта функция отключена, после размещения поля курсор снова принимает форму стрелки выбора. Если эта функция включена, курсор сохраняет миниатюру поля, и вы можете разместить сразу несколько полей, не выбирая повторно один и тот же значок.

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

2. Курсор принимает форму выбранного поля. Нажмите, чтобы разместить поле. 

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

4. Нажмите и перетащите один из синих квадратов (или манипуляторов) по краям поля, чтобы изменить размер поля.

Выравнивание полей и сопоставление размеров

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

Чтобы выбрать одновременно несколько полей, удерживайте клавишу Ctrl/Cmd или щелкните в документе PDF и перетащите курсор, чтобы образовалась рамка. Будут выделены все поля, которые хотя бы частично находятся в пределах рамки. Чтобы отменить выбор полей, щелкните в любом месте документа PDF.

1. Перед выравниванием полей необходимо выбрать одно правильно размещенное поле. В приведенном ниже примере размер поля «Адрес» отрегулирован вручную путем перетаскивания.

   Можно визуально определить, что расположенное справа поле «Контакт» имеет такую же высоту, а поля «Телефон», «Факс» и «Номер заказа» — такую же ширину. 

2. Выберите поле «Адрес» и поле «Контакт». Границы выбранных полей изменят цвет.

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

3. В правой верхней части окна Acrobat находятся инструменты выравнивания. Выберите значок По ширине и высоте. 

   Размер поля «Контакт» изменится в соответствии с размером поля «Адрес»:

4. Оставьте оба поля выбранными и щелкните значок Выравнивание по верхнему краю, чтобы выровнять поле «Контакт» по верхнему краю других полей.

5. Нажмите поле «Контакт» левой кнопкой мыши, чтобы выбрать только это поле, затем отрегулируйте его размер с помощью манипуляторов слева и справа.

6. Затем выберите все поля в столбце. Убедитесь, что эталонное поле имеет правильные параметры.

7. Выберите значок По ширине, чтобы сделать ширину всех полей одинаковой.

8. Оставьте выбранными все поля и щелкните значок Выравнивание по левому краю.

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

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

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

11. Приведите остальные поля в соответствии с шаблонами, как указано выше.

    Пример:

    • Выберите поля «Контакт», «Адрес электронной почты» и «Веб-сайт» и приведите их к одной и той же ширине
    • Выровняйте поля по левому краю
    • Выберите строчные поля («Телефон» и «Адрес электронной почты») и приведите их к одной и той же высоте
    • Затем выровняйте эти поля с помощью инструмента «Выравнивание по верхнему краю».
    • Выполните аналогичные действия для строчных полей «Факс» и «Веб-сайт»

     

    Когда все поля правильно размещены, документ готов к отправке через Acrobat Sign.

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

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

     

     

Использование тегов в размещенных полях формы

В процессе добавления полей на правой панели страницы Acrobat отображается список с именами полей. Этот список можно использовать для быстрого доступа к любому полю формы в документе, даже если вы находитесь на другой странице. Если к имени поля добавлен суффикс #1, это означает, что поле неоднократно встречается на форме.

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

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

 

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

Присвоение имен полям формы

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

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

На вкладке «Общие» в окне «Свойства» отображаются следующие свойства поля: Имя, Подсказка, Тип поля, Роль участника и

Общие свойства.

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

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

Чтобы узнать, какие теги используются в полях формы в документе, см. Руководство по текстовым тегам.

В Руководстве по текстовым тегам все теги заключены в фигурные скобки {{}}, так как это необходимо для их обработки. Эти фигурные скобки не требуются при создании полей в приложении Acrobat, и их следует пропускать.

Размещение других объектов

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

Если вы хотите использовать свойства объекта в приложении Acrobat, убедитесь, что для имени объекта задан базовый тег. Например, если имеется флажок, и все параметры заданы в окне «Свойства», можно указать имя CB1_es_:signer1. Таким образом, объекту будет присвоено имя и он будет назначен нужному получателю.

Флажки

Если на панели «Выделение объекта» выбран значок «Флажок», курсор меняет форму, и вы можете разместить флажок. Дополнительные сведения см. в разделе Размещение полей формы вручную.

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

В разделе «Параметры» доступны следующие свойства: Стиль флажка, Значение экспорта и Флажок. Последнее свойство выбрано по умолчанию. Если изменить свойство «Стиль флажка», это не повлияет на вид флажка в Acrobat Sign, но выбранный стиль будет применен в документе PDF.

Переключатели

Если на панели «Выделение объекта» выбран значок «Переключатель», курсор меняет форму, и вы можете разместить переключатель. Дополнительные сведения см. в разделе Размещение полей формы вручную.

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

Чтобы добавить еще один переключатель, выберите ссылку «Добавить другую кнопку» или щелкните значок «Переключатель» на панели инструментов «Выделение объекта». Разместите объект и присвойте ему такое же имя группы.

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

В разделе «Параметры» доступны свойства Стиль кнопки и Выбор переключателя. Также доступны два параметра: Переключатель включен по умолчанию и Кнопки с одинаковыми названиями и содержимым выбираются одновременно. Последний параметр связывает кнопки с одинаковыми именами. Имя переключателя определяет, к какой группе он относится, поэтому при создании группы переключателей необходимо присваивать им одинаковые имена.

Если на панели «Выделение объекта» выбран значок «Раскрывающееся меню», курсор меняет форму, и вы можете разместить раскрывающееся меню. Дополнительные сведения см. в разделе Размещение полей формы вручную.

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

В разделе «Параметры» доступны следующие настройки: Элемент, Значение экспорта, Список элементов, Сортировать элементы, Разрешить пользователям вводить произвольный текст, Проверка орфографии и Подтвердить выбранное значение немедленно.

Введите имя пункта меню в поле «Элемент». Также рекомендуется указать значение экспорта. Например, если для элемента задано имя «Красный», то в качестве значения экспорта можно указать «R». Это значение можно будет экспортировать в процессе подписания.

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

Связанные материалы

• Как создавать электронные подписи
  

Вход в учетную запись

Войти

Управление учетной записью

Как указать имя для выпадающего списка в HTML5?

< html >     < head >    < style >        body{          background-color: голубой;}        h2{          цвет: зеленый;          text-align: center;        }        h3{          900 желтый цвет                    text-align: center;        }        p{          семейство шрифтов: verdana;          размер шрифта: 20 пикселей;        }    style > head >     < body >    < h2 >GeeksForGeeks h2 >    < h3 >GFG Contest h3 >    < h4 > «Вопрос кодирования дня» H4 > < P > с учетом сортированной колоды карт, пронумерованной от 1 до N. < BR > 1) Мы поднимаем 1 карту и положим IT на обратной стороне палубы. . < BR > < BR > 2) Теперь мы поднимаем еще одну карту, . Оказывается колода .. < .0007 br >< br >    p >            < form action = "/action_page. php" > < Метка для = " > Выберите язык программирования: Метка > < Выбрать = ". = "курс" >        < вариант значение > = 8 7 "1"0008 Опция > < Опция Значение = "2" > C Вариант > 9 9 > . Значение = "3" > Java Опция > < Опция 0008 = "4" > Python Опция > < Опция = "5" > C## 7 = " > C# 77 = " 5 " > C# = " 5 " > SELECT > < BR > < BR > < > < > > < > . 0007 Вход Тип = "Отправить" Значение = "Выбор" > Форма > 9 > 9 > > > HTML >

СПВОДОВ США.0528

Список штатов США

На эту страницу включены фрагменты кода выбора/раскрывающегося списка HTML для создания списка штатов для Соединенных Штатов.