Выбор пунктов списка


Содержание

Поле «Список со множественным выбором» #1763

Шаг 1

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

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

Шаг 2

Для изменения свойств поля наведите на него курсор и нажмите на пиктограмму карандаша в верхнем правом углу.

В открывшемся окне введите название поля, которое будет отображаться на сайте. Например, поле может называться «Заказать звонок».

Шаг 3

Активируйте «Обязательное поле», если желаете, чтобы данное поле на сайте было обязательным для заполнения.

Шаг 4

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

Шаг 5

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

Шаг 6

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

Шаг 7

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

После настроек поля не забудьте нажать на кнопку «Сохранить изменения».

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

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

JavaScript урок13. Объектная модель документа (продолжение) и идентификация

Событие javascript onresize объекта window

Событие onresize объекта window ответственно за изменение размеров окна браузера. Поэтому событие и принадлежит объекту окно — window .

Поскольку среди элементов html нету тега, отождествленного с окном браузера, то обработать в javascript событие onresize можно при помощи присваивания функции свойству объекта window.

Рассмотрим на примере:

window.onresize = message; function message()

window.onresize = function message()

HTML-код:

пожалуйста, измените размер этого окна.

Объект javascript выпадающий список — select

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


Свойства объекта select:

  • length — количество пунктов списка
  • name — атрибут name
  • options[] — массив пунктов
  • selectedIndex — индекс выбранного пункта option
  • defaultSelected — выбранный пункт option по умолчанию
  • selected — выбранный пункт

Получить значение выпадающего списка (select) в javascript можно через свойство value . Но есть и другие способы.

Идентификация значения списка:

  • Добавьте текстовое поле и список select с четырьмя пунктами option с текстом.
  • В открывающий тег select добавьте обработчик события onchange .
  • Отождествите обработчик события onchange с функцией, изменяющей текст в текстовом поле (в текстовое поле поместите значение выбранного пункта меню).

Рассмотрим пример использования свойства объекта select — selectedIndex — выбранный пункт option:

В данном примере при изменении пункта меню генерируется событие onChange . В качестве значения атрибута onChange выполняется скрипт: происходит обращение к текстовому полю через массив элементов формы (текстовое поле — это первый элемент массива, т.к. 0-й элемент — это выпадающий список select). В качестве значения текстового поля указывается номер выбранного пункта списка ( selectedIndex ).

Объект javascript option — пункт меню

Пункт меню select в javascript — option — рассматривается как отдельный объект со своими свойствами:

  • text — строка текста, которая размещается в контейнере LI
  • value — значение, которое передается серверу при выборе альтернативы, связанной с объектом OPTION
  • selected — альтернатива выбрана(true/false)

Доступ к конкретному пункту меню происходит через коллекцию (массив) options:

Рассмотрим пример использования свойства text объекта option:

Рассмотрим еще одно решение с использованием списка множественного выбора:

Свойства outerHTML и innerHTML в javaScript

innerHTML в javaScript — это директива для формирования или замены содержимого какого-либо элемента.
Рассмотрим выполненный пример:

outerHTML в javaScript — это директива для формирования или замены содержимого какого-либо элемента вместе с самим элементом.
Пример:

Выпадающий список в Excel с помощью инструментов или макросов

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

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

Создание раскрывающегося списка

Путь: меню «Данные» — инструмент «Проверка данных» — вкладка «Параметры». Тип данных – «Список».

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

  1. Вручную через «точку-с-запятой» в поле «Источник».
  2. Ввести значения заранее. А в качестве источника указать диапазон ячеек со списком.
  3. Назначить имя для диапазона значений и в поле источник вписать это имя.

Любой из вариантов даст такой результат.


Выпадающий список в Excel с подстановкой данных

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

  1. Выделяем диапазон для выпадающего списка. В главном меню находим инструмент «Форматировать как таблицу».
  2. Откроются стили. Выбираем любой. Для решения нашей задачи дизайн не имеет значения. Наличие заголовка (шапки) важно. В нашем примере это ячейка А1 со словом «Деревья». То есть нужно выбрать стиль таблицы со строкой заголовка. Получаем следующий вид диапазона:
  3. Ставим курсор в ячейку, где будет находиться выпадающий список. Открываем параметры инструмента «Проверка данных» (выше описан путь). В поле «Источник» прописываем такую функцию:

Протестируем. Вот наша таблица со списком на одном листе:

Добавим в таблицу новое значение «елка».

Теперь удалим значение «береза».

Осуществить задуманное нам помогла «умная таблица», которая легка «расширяется», меняется.

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

  1. Сформируем именованный диапазон. Путь: «Формулы» — «Диспетчер имен» — «Создать». Вводим уникальное название диапазона – ОК.
  2. Создаем раскрывающийся список в любой ячейке. Как это сделать, уже известно. Источник – имя диапазона: =деревья.
  3. Снимаем галочки на вкладках «Сообщение для ввода», «Сообщение об ошибке». Если этого не сделать, Excel не позволит нам вводить новые значения.
  4. Вызываем редактор Visual Basic. Для этого щелкаем правой кнопкой мыши по названию листа и переходим по вкладке «Исходный текст». Либо одновременно нажимаем клавиши Alt + F11. Копируем код (только вставьте свои параметры).
  5. Сохраняем, установив тип файла «с поддержкой макросов».
  6. Переходим на лист со списком. Вкладка «Разработчик» — «Код» — «Макросы». Сочетание клавиш для быстрого вызова – Alt + F8. Выбираем нужное имя. Нажимаем «Выполнить».

Когда мы введем в пустую ячейку выпадающего списка новое наименование, появится сообщение: «Добавить введенное имя баобаб в выпадающий список?».

Нажмем «Да» и добавиться еще одна строка со значением «баобаб».

Выпадающий список в Excel с данными с другого листа/файла

Когда значения для выпадающего списка расположены на другом листе или в другой книге, стандартный способ не работает. Решить задачу можно с помощью функции ДВССЫЛ: она сформирует правильную ссылку на внешний источник информации.

  1. Делаем активной ячейку, куда хотим поместить раскрывающийся список.
  2. Открываем параметры проверки данных. В поле «Источник» вводим формулу: =ДВССЫЛ(“[Список1.xlsx]Лист1!$A$1:$A$9”).

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

Как сделать зависимые выпадающие списки

Возьмем три именованных диапазона:

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

  1. Создадим первый выпадающий список, куда войдут названия диапазонов.
  2. Когда поставили курсор в поле «Источник», переходим на лист и выделяем попеременно нужные ячейки.
  3. Теперь создадим второй раскрывающийся список. В нем должны отражаться те слова, которые соответствуют выбранному в первом списке названию. Если «Деревья», то «граб», «дуб» и т.д. Вводим в поле «Источник» функцию вида =ДВССЫЛ(E3). E3 – ячейка с именем первого диапазона.

Выбор нескольких значений из выпадающего списка Excel

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

  1. Создаем стандартный список с помощью инструмента «Проверка данных». Добавляем в исходный код листа готовый макрос. Как это делать, описано выше. С его помощью справа от выпадающего списка будут добавляться выбранные значения.
  2. Чтобы выбранные значения показывались снизу, вставляем другой код обработчика.
  3. Чтобы выбираемые значения отображались в одной ячейке, разделенные любым знаком препинания, применим такой модуль.

Private Sub Worksheet_Change( ByVal Target As Range)
On Error Resume Next
If Not Intersect(Target, Range( «C2:C5» )) Is Nothing And Target.Cells.Count = 1 Then
Application.EnableEvents = False
newVal = Target
Application.Undo
oldval = Target
If Len(oldval) <> 0 And oldval <> newVal Then
Target = Target & «,» & newVal
Else
Target = newVal
End If
If Len(newVal) = 0 Then Target.ClearContents
Application.EnableEvents = True
End If
End Sub

Не забываем менять диапазоны на «свои». Списки создаем классическим способом. А всю остальную работу будут делать макросы.

Выпадающий список с поиском

  1. На вкладке «Разработчик» находим инструмент «Вставить» – «ActiveX». Здесь нам нужна кнопка «Поле со списком» (ориентируемся на всплывающие подсказки).
  2. Щелкаем по значку – становится активным «Режим конструктора». Рисуем курсором (он становится «крестиком») небольшой прямоугольник – место будущего списка.

  3. Жмем «Свойства» – открывается перечень настроек.
  4. Вписываем диапазон в строку ListFillRange (руками). Ячейку, куда будет выводиться выбранное значение – в строку LinkedCell. Для изменения шрифта и размера – Font.

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

Выбрать один элемент из списка значений

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

(1) Есть другой путь:
Создаете реквизит формы с типом строка, размещаете его на форме
Ставите у него свойство «Режим выбора из списка»

заполняете список выбора
Элементы.ВашРеквизит.СписокВыбора.Добавить(. )

(1) СписокЗначений (ValueList)
ВыбратьЭлемент (ChooseItem)
Синтаксис:
ВыбратьЭлемент( , )

СписокЗначений (ValueList)
ПоказатьВыборЭлемента (ShowChooseItem)
Синтаксис:
ПоказатьВыборЭлемента( , , )

(1) Есть другой путь:
Создаете реквизит формы с типом строка, размещаете его на форме
Ставите у него свойство «Режим выбора из списка»

заполняете список выбора
Элементы.ВашРеквизит.СписокВыбора.Добавить(. )

Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend

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

Сегодня мы разберем, как создавать выпадающие (раскрывающиеся) списки, в том числе со множественным выбором, при помощи select и option, каким образом сконструировать текстовое поле посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend.

Напомню, что любая форма, присутствующая на странице, создается при помощи основного тега form (который часто содержит элемент input) и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — форма обратной связи для сайта WP).

К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эту информацию, поэтому с помощью HTML мы создаем лишь внешний вид формы, а необходимые данные отправляются для обработки. С этой целью на вебсервере целенаправленно создается специальный файл, написанный на одном из серверных языков (чаще всего, PHP). Скажем, для обратной связи можно сотворить файлик mail.php, который и будет являться обработчиком.

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

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

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

Выпадающие списки с помощью select, option и optgroup

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

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

Атрибуты тега select

1. Name — в качестве значения (параметра) этого атрибута нужно добавить название списка (в приведенном примере это «list1») для его идентификации при обработке на сервере:

Ну и весь выпадающий список является одним из вариантов формы, а потому описывается тегом form, к которому добавляются необходимые атрибуты (action, method, name), обеспечивающие его корректное функционирование. С целью визуального показа кнопки для отправки данных на сервер здесь использован тег input с атрибутами «type=»submit»» и «value=»Отправить»». К слову, кнопочку можно оформить и посредством тега button.

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

3. Size — устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки, а, например, при size=»5″ будут видны уже пять:

4. Required [HTML5] (параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:

5. Autofocus [HTML5] (значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:

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


7. Form [HTML5] — осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера . При этом в роли значения атрибута form прописывается параметр глобального атрибута id, который добавлен к тегу form:

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

Атрибуты тега option

1. Value — определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value (для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка:

2. Disabled — блокирует для выбора элемент выпадающего списка.

Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.

3. Label — отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между вовсе отсутствует.

Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label=»Тег Option», в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label=»Textarea».

4. Selected — выделяет текущий пункт выпадающего списка:

Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:

Атрибуты тега optgroup

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

1. Label — устанавливает название каждой группы в качестве параметра:

То же самое, но с multiple и size=»7″ тега select:

2. Disabled (нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:

Небольшой видеоролик будет здесь как нельзя кстати:

Текстовое поле в форме посредством textarea

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

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

Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:

1. Name — определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.

2. Cols — ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20.

3. Rows — высота текстового поля, определяемое количеством строк. Если число строк текста, вводимого пользователем, окажется больше значения, заданного этим атрибутом, то справа появится вертикальная полоса прокрутки.

4. Maxlength [HTML5] — указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.

Ниже представлен пример со всеми выше перечисленными атрибутами, действие каждого из которых вы можете проверить самолично, просто поместив в область текста нужное количество букв и строк (можете просто ввести один и тот же символ несколько раз):

5. Minlength [HTML5] — указывает минимальное число знаков, которые необходимо ввести в текстовую область. Ежели пользователь попытается отправить текст с меньшим количеством символов, то браузер выведет краткое сообщение с информацией, в которой будет содержаться упоминание о необходимости дополнить содержание формы и о том, сколько знаков уже введено.

6. Placeholder [HTML5] — с помощью этого атрибута можно поместить текст в поле, являющийся параметром данного атрибута, который исчезнет, когда пользователь начнет вводить символы:

7. Readonly (без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст:

Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:

8. Autoсomplete [HTML5] — указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.

Имеет всего два параметра: on (включен) и off (выключен). Вот пример кода:

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


9. Wrap [HTML5] — устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:

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

Hard — переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols:

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

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

10. Autofocus [HTML5] (не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.

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

12. Form [HTML5] — связывает текстовое поле с формой в тех случаях, когда по тем или иным причинам оно расположено вне . Как и в случае с тегом select, связь осуществляется посредством глобального атрибута id для form. При этом параметры id и атрибута form тождественны:

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

Еще один видеоролик по созданию текстового поля:

Особенности тега label

По умолчанию элемент формы при щелчке по его текстовой составляющей не активируется. Возьмем сначала в качестве примера список (реализуемый с помощью атрибута type=»checkbox» тега input), нужные строки которого пользователь должен отметить, заполнив соответствующие чекбокс(-ы) галочками. Чтобы поставить галочку, необходимо щелкнуть по флажку мышкой, но клик по расположенному рядом тексту будет безрезультатным. Можете попробовать ниже:

Именно тег label позволяет реализовать активацию какого-либо элемента при клике по его названию. Есть 2 способа, с помощью которых можно связать элемент формы HTML и текст.

1 способ. Необходимо применить идентификатор id внутри элемента формы и указать его имя в качестве значения атрибута for тега label:

2 способ. Элемент формы поместить внутрь контейнера, созданного тегом label:

Теперь можете кликнуть не только по самой форме, но и по тексту, расположенному рядом. Итог будет идентичным. Другим примером может служить форма для ввода текста (создаваемая с помощью атрибута type=»text» того же input), где активация (помещение курсора в текстовое поле) будет происходить и после щелчка по надписи «Введите текст»:

Введите текст:

Итак, с помощью тега label можно успешно реализовать связывание элементов форм и текста.

Fieldset и legend — группировка элементов формы

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

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

Какую CMS вы используете?

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

1. Name [HTML5] — служит для наименования совокупности элементов, объединенных в контейнере . Название (как параметр этого атрибута) применяется в дальнейшем с целью идентификации конкретной группы при обработке формы, в том числе в скриптах, включая JavaScript.

Чтобы наглядно продемонстрировать действие name, заключим данную группу в тег form для корректной работы и добавим кнопку с помощью тега button, прописав к нему параметр HTML события onclick=»form.group1.style.backgroundColor=’#e1dccd'», в котором и присутствует значение этого атрибута. Данное событие позволяет пользователю с помощью созданной кнопочки изменить цвет фона в пределах области формы, заданной тегом fieldset:

2. Disabled [HTML5] — (нет значений) подобно одноименным атрибутам для уже рассмотренных тэгов деактивирует группу элементов (вас ждет неудача при попытке заполнить чекбоксы ниже):

3. Form [HTML5] — связывает вебформу, расположенную отдельно, с конкретной группой. Идентификация реализуется путем установки одинаковых значений form и универсального атрибута ):

Какую CMS вы используете?

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

В веб-браузере такая веб-форма будет выглядеть следующим образом:

Какую CMS вы используете?


Владельцем какого ресурса вы являетесь?

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

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

Как создать в HTML выпадающий список?

Приветствую вас, друзья и коллеги!

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

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

Как сделать раскрывающийся список html

Для создания в html выпадающего списка существует тег

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

Ширина элемента по умолчанию определяется исходя из ширины самой длинной записи. Так же ее можно изменять CSS-стилями.

HTML выпадающий список с множественным выбором

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

Работа с полем выбора

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

Установка значения в поле выбора

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

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

Представление значения, хранящегося в поле выбора

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

Поиск значения в поле выбора по введенному тексту

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

Связь поля выбора с данными

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

Особенности инициализации и использования списка выбора

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

Такая ситуация возникает из-за того, что данные устанавливаются в элементы управления формы, связанные с ними, в процессе создания формы. А обработчики событий ПередОткрытием(), ПриОткрытии() вызываются после создания самой формы, в процессе инициализации ее визуальной части. Получается, что при создании формы полю выбора поставили некоторое значение в момент, когда его список выбора пустой. При этом, поскольку список выбора пустой, вместо устанавливаемого значения в поле выбора будет сохранено значение «Неопределено».

При смене типа значения (свойство «ТипЗначения») для списка выбора, у которого есть элементы, будет выполнено преобразование их значений к новому типу. Может быть следующая ситуация: после смены типа значения для списка выбора некоторое значение, которое раньше удавалось успешно установить в поле выбора, после смены типа значения установить не получается. Причина такой ситуации в том, что в процессе установки типа значения для списка выбора, успешно устанавливаемое ранее значение было конвертировано в другое значение (в соответствии с новым типом значения). Соответственно, устанавливаемое значение в списке выбора больше найдено не будет.

Использование поля выбора: пример 1

Пусть есть форма, в которой размещены поле выбора (ПолеВыбора1), поле ввода (ПолеВвода1) и создан реквизит (Реквизит1: число, длина = 10, точность = 0). В качестве данных для редактирования в ПолеВвода1 и ПолеВыбора1 стоит реквизит Реквизит1. В теле модуля формы написан следующий код:


Открыв такую форму в режиме 1С:Предприятие, можно видеть, как будут устанавливаться значения в поле выбора:

1. В начальном состоянии поле выбора — пустое, поле ввода содержит значение 0.

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

3. Выбираем в поле выбора в выпадающем списке строку с надписью «Два»: в поле ввода помещается значение 2.

Перейдем в поле ввода и попробуем редактировать значения в нем:

1. Введем в поле ввода значение 3 и сойдем с поля ввода. В поле выбора запишется значение 3 и установится значение из соответствующей строки списка выбора поля выбора («Три»).

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

Использование поля выбора: пример 2

Пусть есть форма, в которой размещены поле выбора (ПолеВыбора1), поле ввода (ПолеВвода1) и создан реквизит (Реквизит1: СправочникСсылка.Номенклатура). В качестве данных для редактирования в ПолеВвода1 и ПолеВыбора1 стоит реквизит Реквизит1. В теле модуля формы написан следующий код:

Открыв такую форму в режиме 1С:Предприятие, можно видеть, как будут устанавливаться значения в поле выбора:

1. В начальном состоянии поле выбора и поле ввода — пустые:

2. Выбираем в поле выбора в выпадающем списке строку с надписью «Один»: в поле ввода помещается значение. Поскольку поле ввода и поле выбора связаны с одним и тем же реквизитом формы, при изменении значения в поле ввода оно устанавливается в поле выбора и наоборот. В данном случае в поле выбора выбрали строку «Один», значение для которой равно ссылке на на элемент справочника Справочники.Номенклатура.Элемент1. Оно и отобразилось в поле ввода.

3. Выбираем в поле выбора в выпадающем списке строку с надписью «Два»: в поле ввода помещается ссылка на элемент справочника Справочники.Номенклатура.Элемент2:

Перейдем в поле ввода и попробуем редактировать значения в нем:

1. Выберем в поле ввода значение Справочники.Номенклатура.Элемент1. В поле выбора запишется значение Справочники.Номенклатура.Элемент1 и установится значение из соответствующей строки списка выбора поля выбора («Один»).

2. Выберем в поле ввода значение Справочники.Номенклатура.Элемент2. В поле выбора запишется значение Справочники.Номенклатура.Элемент2 и установится значение из соответствующей строки списка выбора поля выбора («Два»).

3. Выберем в поле ввода значение Справочники.Номенклатура.Элемент3. В поле выбора значение Справочники.Номенклатура.Элемент3 записано не будет, поскольку оно не было добавлено в список выбора. Значением в поле ввода будет «Неопределено»:

Использование поля выбора: пример 3

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

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

В правой колонке — внешний вид второй формы внешней обработки. В ней размещены поле выбора и поле ввода; они оба связаны с реквизитом внешней обработки Реквизит1 по данным. Приведем текст модуля формы:

Мы видим,. что в модуле формы инициализируется список выбора для поля выбора: поле выбора может принимать значения Справочники.Номенклатура.Элемент1, Справочники.Номенклатура.Элемент2, Неопределено. При этом для двух первых значений явно указаны их представления — «Один» и «Два».

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

Значение реквизита — пустая ссылка:

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

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

В данном случае и в поле ввода, и в поле выбора значением будет ссылка на Элемент1 справочника. При этом для представления значения поле выбора воспользуется представлением установленного значения из списка выбора — строкой «Один».

Значение реквизита в списке выбора для поля выбора отсутствует:

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

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

Поле выбора


Как ограничить список выбора?

Ограничим список элементов, установив отбор в открываемой форме
Код 1C v 8.х

Использование выбора из списка
Код 1C v 8.х

Похожие FAQ

Еще в этой же категории

Как на управляемой форме разместить список регистра сведений с отбором? 14
Решение рассмотрено для элемента справочника (Контрагент и регистр КонтактнаяИнформация) 1. Создание реквизита: Добавляем новый реквизит формы (. не путать с реквизитом справочника . ) с типом » ДинамическийСписок» В поле » Основная табли Поле выбора

Заполнение списка значений в элементе поле выбора на форме 9
//Заполнение списка перебором данных // Элемент формы МетаданныеВыбор имеет тип — Произвольный, Использование — Режим выбора из Списка, кнопка списка Для Каждого Метаданное из Метаданные.РегламентныеЗадания Цикл ЭлементыФормы.МетаданныеВыбор.Спи Как установить параметр динамического списка? 8
Когда используете для вывода данных динамический список и произвольный запрос, то бывают ситуации когда надо указать параметр используемый в этом запросе. Ниже пример вывода данных регистра сведений в карточке клиента Для вывода используется исп Форма

Программное создание таблицы значений с условным оформлением 6
Как создать на форме таблицу и сделать для нее подсветку содержимого колонки в строке по условию? Итак для начала нам надо добавить реквизиты в форму. Для этого у нас есть метод: ИзменитьРеквизиты(). Перед тем как его использовать мы сформируем ма Форма

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.
Страница 1 из 3 1 2 3 >

Добрый день, Уважаемые.

Дан вот такой код:

Элемента не существует.

Сообщение от laimas
Элемента не существует.

Спасибо! Появляющийся блок Block5 при выборе, допустим, «Акт» не получится вывести?

Сообщение от MadMaxZZZ
Появляющийся блок Block5 при выборе, допустим, «Акт» не получится вывести?

Список actSelect связан значениями опций с соответствующими блоками, а значит и для их управления не требуется громоздких условий в коде. Но блока Block6 не существует, а посему опция с таким значением удалена из списка. Как в этом случае должно быть (?), я не в курсе.

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

$query = «SELECT `fullname` FROM `kontragent` WHERE `fullname` = ‘$fullname'»;
$result = mysql_query($query);
if(mysql_num_rows($result) > 0) echo ‘Контрагент с таким именем присутствует в базе’;

Не знаю, что есть fullname, но если Иванов Иван Иванович, то это еще не означает уникальность.

Сообщение от laimas
Список actSelect связан значениями опций с соответствующими блоками, а значит и для их управления не требуется громоздких условий в коде. Но блока Block6 не существует, а посему опция с таким значением удалена из списка. Как в этом случае должно быть (?), я не в курсе.

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

$query = «SELECT `fullname` FROM `kontragent` WHERE `fullname` = ‘$fullname'»;
$result = mysql_query($query);
if(mysql_num_rows($result) > 0) echo ‘Контрагент с таким именем присутствует в базе’;

Выпадающий список HTML

Выпадающий список в HTML можно сделать при помощи тега select. Помимо выпадающего (или «раскрывающегося») списка, тег select позволяет создавать элемент-список с множественным выбором. Синтаксис использования тега select HTML выглядит следующим образом:

Здесь с помощью тега option задаются элементы списка.

Атрибуты тега SELECT

Рассмотрим атрибуты тега select:

  • name
  • size — число отображаемых строк в списке (число);
  • multiple — включает функцию множественного выбора элементов выпадающего списка;
  • disabled — блокирует доступ к элементу;
  • form — позволяет связать выпадающий список с формой (может понадобиться, если сам список находится вне формы, к которой должен быть привязан). В качестве аргумента передается id формы.

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

Атрибуты тега OPTION

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

  • disabled — устанавливает запрет на выбор данного элемента списка;
  • label — позволяет установить метку для текущего элемента списка (вместо текста, указанного в теге, выводится значение метки, что позволяет выводить сокращенное значение); Внимание: атрибут не поддерживается в браузере Firefox
  • selected — текущий пункт списка будет выбран по умолчанию;
  • value — значение, которое будет передано на сервер;

Посмотрим на расширенный вариант использования тега option:

Выглядеть результат приведенного примера будет следующим образом:

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

Илон Маск рекомендует:  Тест биржи трафика Webunder + отзывы
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL