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


Содержание

Выпадающий список в HTML: учимся создавать и задавать стили с помощью CSS

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

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

  • Выпадающий список создается с помощью тега

Использование атрибута value

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

В следующем примере мы создадим выпадающий список с атрибутом value :

Посмотреть онлайн демо-версию и код

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

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

Посмотреть онлайн демо-версию и код

Для option value HTML используется следующий код:

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

Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :

Также можно получить доступ к значению с помощью JQuery-метода $.val() :

Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст.

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

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

Посмотреть онлайн демо-версию и код

Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью массива PHP $_POST[“”] . Это код формы, используемый в примере:

А вот как PHP-скрипт используется, чтобы получить значение HTML select option :

Если в форме указан метод GET , тогда используйте PHP-массив $_GET[“”] .

Определение стилей выпадающего списка с помощью CSS

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

Посмотреть онлайн демо-версию и код

Вместе с linear-gradient здесь использовано свойство box-shadow . Полный код CSS выглядит следующим образом:

Закругленные углы с помощью свойства border-radius

Для HTML select option мы зададим свойство CSS3 border-radius , чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:

Посмотреть онлайн демо-версию и код

Использование нескольких атрибутов и стилей CSS

Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple . В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать несколько вариантов, нажав клавишу CTRL :

Посмотреть онлайн демо-версию и код

Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков

Если вы используете фреймворк Bootstrap , то у вас есть возможность применять плагины для создания крутых option HTML .

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

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

В приведенной демо-версии пользователь может выбрать два варианта из списка:

Посмотреть онлайн демо-версию и код

Демо-версия выпадающего списка с опцией поиска

Используя тот же плагин, можно предоставить пользователям возможность искать нужные варианты в списке HTML select option :

Посмотреть онлайн демо-версию и код

Данная публикация представляет собой перевод статьи « HTML select dropdown: Learn to Create and style with CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

Итак, речь пойдёт о выпадающем списке (так называемый combo box), в который встроена возможность динамического поиска по подстроке, которую пользователь вводит с клавиатуры. Посмотрите пример, в котором мы имеем топ 300 крупнейших городов России. На анимированной иллюстрации видно, как мы динамически сужаем список выбора, вводя подстроку «кр» или «ниж», экономя огромное количество времени. Более того, список меняется после ввода каждого нового символа! Выглядит чрезвычайно привлекательно и профессионально, не так ли? Давайте разбираться, как это устроено.


Файл примера

Скачать

Пошаговая инструкция

Предварительные замечания

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

Шаг 1. Готовим таблицу для списка

Подготовьте таблицу с четырьмя колонками: Город (или то, что вам нужно), Статус , Индекс , Фильтр . Заполните столбец Город значениями. В остальных трёх колонках будут формулы, которые мы обсудим ниже. Я всем рекомендую использовать умную таблицу, так как это значительно проще.

Шаг 2. Формулы для столбца Статус

На примере ячейки F2 рассмотрим формулу, аналогичную для всего столбца Статус (столбец F ). Из F2 формулу можно протягивать вниз до конца, а в случае умной таблицы Excel это сделает за вас. Это также относится ко всем формулам, которые мы будем обсуждать в этой статье.

$B$2 — ячейка, с которой будет связан выпадающий список (добавляется на шаге 6). Что значит связано? Всё, что вы введёте в выпадающий список, тут же отразится в ячейке B2 .

Формула ПОИСК вернёт ошибку, если содержимое B2 не найдено в $E2 . ЕОШИБКА перехватит ошибку и вернёт ИСТИНА, если действительно была ошибка, и — ЛОЖЬ, если строка таки была найдена. Функция НЕ делает из истины ложь и наоборот (инверсирует результат). Таким образом, мы получим в этом столбце ИСТИНА, если подстрока найдена в текущем городе, и наоборот. Обратите внимание, что пустая подстрока содержится в любой строке, поэтому все ячейки столбца Статус имеют значения ИСТИНА, когда мы не ввели ещё ничего в B2 .

= НЕ( ЕОШИБКА ( ПОИСК ( $B$2 ; $E2 ) ) )

=NOT( ISERROR( SEARCH( $B$2; $E2) ) )

= НЕ ( ЕОШИБКА ( ПОИСК ( $B$2 ; [@ Город ]) ) )

=NOT( ISERROR( SEARCH( $B$2; [@Город]) ) )

[@ Город ] — на языке структурных формул умных таблиц это ссылка на ячейку столбца Город в той же строке, в которой находится сама формула. Поскольку ссылка идёт внутри таблицы, то имя самой таблицы в формуле можно не использовать. В остальном всё — тоже самое.

Шаг 3. Формула для столбца Индекс

Если B2 содержит подстроку поиска, то в столбце Статус не все ячейки примут значение ИСТИНА. Статус ИСТИНА будет только там, в чьи названия городов входит соответствующая подстрока. А в столбце Индекс мы рассчитываем номер по порядку для всех строк, которые содержат искомую подстроку. Например, на рисунке ниже B2 содержит «ни», что заставляет столбец Статус быть истинным у строк с городами Нижний Новгород , Калининград , Магнитогорск и т.д., а в столбце Индекс мы начинаем считать факты срабатываний в F : Нижний Новгород — первое срабатывание, Калининград — второе и так далее.

Функция ЕСЛИ отсекает все значения в F , которые не равны ИСТИНА. Функция СЧЁТЕСЛИ подсчитывает количество значений ИСТИНА в F .

Обычный диапазон Умная таблица

= ЕСЛИ( $F2 ; СЧЁТЕСЛИ ( $F$2:$F2 ; ИСТИНА ); «»)

=IF( $F2; COUNTIF( $F$2:$F2; TRUE ); «»)

= ЕСЛИ ( [@ Статус ]; СЧЁТЕСЛИ ( $F$2 :[@ Статус ]; ИСТИНА ); «»)

=IF( [@Статус]; COUNTIF( $F$2:[@Статус]; TRUE ); «»)

Обратите внимание, что диапазон условия в СЧЁТЕСЛИ введен скользящий — вторая координата не закреплена — и во время протягивания она растёт пропорционально таблице. За счёт этого трюка мы получаем механизм подсчёта значения ИСТИНА. Например, 6-я строка будет подсчитывать ИСТИНУ по диапазону $F$2:$F6 (там одно значение — от Нижнего Новгорода ), а 41-я строка будет подсчитывать ИСТИНУ уже по диапазону $F$2:$F41 (а там уже 2 значения — от Нижнего Новгорода и от Калининграда ). Вот суть механизма. Это полезный приём, который стоит запомнить.

Шаг 4. Формула для столбца Фильтр

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

Обычный диапазон Умная таблица

= ЕСЛИОШИБКА( ИНДЕКС ( стлГород ; ПОИСКПОЗ ( ЧСТРОК ( $G$2:$G2 ); стлИндекс ; 0) ); «»)

=IFERROR( INDEX( стлГород; MATCH( ROWS($G$2:$G2); стлИндекс; 0) ); «» )

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

= ЕСЛИОШИБКА ( ИНДЕКС ( [ Город ]; ПОИСКПОЗ ( ЧСТРОК ( $G$2 :[@ Индекс ]); [ Индекс ]; 0) ); «»)

=IFERROR( INDEX( [Город]; MATCH( ROWS($G$2:[@Индекс]); [Индекс]; 0) ); «» )

Не путайте: [ Индекс ] — ссылка на весь столбец, а [@ Индекс ] — ссылка на ячейку из этого столбца в текущей строке. Никакие дополнительные именованные диапазоны нам создавать нет никакой необходимости, так как мы пользуемся встроенным в умные таблицы сервисом при ссылке на столбцы.

Формула ЧСТРОК ( $G$2:$G2 ) используется для генерации последовательных номеров от 1 (для второй строки) до N (в строке N+1), равному количеству найденных подстрок. Просто генерируется диапазон соответствующего размера, а формула ЧСТРОК возвращает его высоту в строках.

Формула ПОИСКПОЗ ищет номер реальной строки, содержащий соответствующий индекс. Например, в столбце Фильтр мы видим Магнитогорск на третьей позиции, но в реальности он взят из E45 , так как в G45 стоит цифра 3, которую мы и нашли через ПОИСКПОЗ . То есть ПОИСКПОЗ сказал нам, что Магнитогорск находится в 45-й строке, а извлекли мы его оттуда уже при помощи формулы ИНДЕКС .

Если же при извлечении возникает ошибка (текущая строка находится ниже строки N+1), то формула возвращает пустую строку. За это отвечает ЕСЛИОШИБКА .

Как получить список стран для HTML формы. Часть 1

Дата публикации: 2020-10-07

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

Исходные файлы текущей статьи вы можете скачать по ссылке.

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

Где взять такую БД стран. Один из вариантов — БД world, которую можно скачать с официального сайта MySQL на этой странице. В дополнение вы получите не только список стран, но и список городов, а также множество дополнительных данных: количество населения, столица страны, код, язык и многое другое.

Это все, если речь идет о полноценном приложении. Но что делать, если вам не нужна БД, а нужен просто список стран для HTML формы? На самом деле это также не является проблемой. Все, что нам потребуется, это найти сайт, в котором уже есть форма с выпадающим списком стран. Как вариант такого сайта, можно взять Одноклассники:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!


Отлично! Это то, что нам и нужно. Теперь мы можем открыть консоль разработчика в браузере и просто скопировать HTML код интересующего нас элемента select.

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

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

На этом данную статью можно завершать. Если вас интересует тема валидации форм, рекомендую посмотреть этот урок. На этом все. Удачи!

Как улучшить выбор страны из списка

Представляю вашему вниманию перевод статьи под названием «Redesigning The Country Selector» от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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

Однажды, проводя масштабные юзабилити-тестирования (о которых мы писали на Smashing Magazine в апреле 2011. Примечание переводчиков: мы перевели и эту статью тоже. Обязательно ознакомьтесь :), мы последовательно столкнулись с несколькими проблемами, связанными с выбором страны. Якоб Нильсен сообщал о похожих моментах в 2000 и 2007 годах, когда он тестировал выпадающие списки с большим количеством внутренних элементов, к примеру, таких, как перечни штатов или стран.

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

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

Трудности

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

  1. Отсутствие обзора. С толку сбивает даже выбор более чем из 20 неструктурированных вариантов, не говоря уже о списке всех стран мира (согласно ISO 3166, в нём 249 стран).
  2. Неясность принципов сортировки. При демонстрировании пользователям масштабного списка, первым делом пользователи пытаются понять логику сортировки элементов. Но, поскольку селекторы стран часто содержат от трех до пяти наиболее популярных вариантов в начале списка, логика сортировки элементов не всегда понятна с первого взгляда.
  3. Вопросы прокрутки списка. Многие проблемы также связаны с прокруткой больших раскрывающихся списков. Если курсор вашей мыши находится за пределами раскрытого списка, то вы, скорее всего, прокрутите всю страницу целиком, скрывая раскрытый вами список со страницы. В других браузерах, однако, раскрывшийся список будет прокручиваться до тех пор, пока он будет в фокусе, что скорее всего приведёт к вводу ошибочных данных.
  4. Разнородные способы представления списка. Интерфейсы раскрывающихся списков в разных браузерах и операционных системах существенно отличаются друг от друга. Например, на маке и Сафари для прокрутки списка попросит вас воспользоваться двумя стрелками, а FireFox предоставляет традиционный вариант прокрутки. А теперь возьмите свой смартфон, и вы внезапно обнаружите, что интерфейс снова резко изменился.
  5. Физические ограничения. Мобильные устройства имеют серьезные ограничения по размеру экрана — на него физически невозможно вывести большой список стран. Это замедляет процесс выбора, что также вызывает неудобства.
  6. Нарушение логической последовательности. Практически все пользователи — даже те, которые пользуются табом для переключения между элементами формы — для взаимодействия с раскрывающимися списками будут использовать мышь, что существенно замедлит взаимодействие.

В сумме мы имеем

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

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

Этап 1. Ввод с клавиатуры против прокрутки

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

Итак, у нас есть поле для ввода текста. Хотя это и удобно с одной стороны, это плохо для курьера, которому приходится доставлять товар. Раскрывающийся список предлагает ограниченное количество вариантов, в то время, как текстовое поле предлагает бесконечное (пользователь может ввести туда всё, что захочет). Для ограничения ввода значения в поле (речь идёт о названии страны), которое сможет распознать серверная часть нашего сервиса, к текстовому полю стоит добавить автоподстановку и принятие ограниченного набора вариантов. Это позволит нам обеспечить ввод данных, которые на 100% устраивают нашу серверную часть (и нашего курьера).

Сегодня большинство пользователей веба знакомы с функционалом автоподстановки. Google использует эту возможность для своего поискового поля с 2008 года (и с 2004 года как экспериментальную возможность).

Этап 2. Опечатки и их последствия

Заменяя список стран полем ввода с автоподстановкой, мы сталкиваемся с новой проблемой. Хотя пользователь знает название своей страны, он не может знать, как называет её наша серверная часть. Если пользователь, проживая в США, опечатывается, например “оединённые штаты”, или решает ввести лишь часть названия, например “Америка” (вместо “Соединённые штаты Америки”), это приведёт к неправильному результату.

Поле ввода страны на сайте Apple требует от вас не только стопроцентно точного написания названия страны, но и правильной последовательности слов в названии.

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

Многочисленные веб-сервисы, а особенно интернет-магазины, географически ограничены, и международные пользователи хорошо осведомлены об этом. Даже у крупных сайтов, как Amazon, Hulu или Spotify есть серьёзные географические ограничения на некоторые или на все услуги. Если кто-то, живущий в США, может ожидать, что его страна есть в списке поддерживаемых, то пользователь из другой страны, который не сможет отыскать свою страну в списке, может покинуть ваш сайт до того, как распознается его опечатка.

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

Этап 3. Когда Нидерланды называют Голландией.

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

Когда мы требуем от пользователя ввода названия страны, мы должны рассматривать все распространённые варианты их написания. Синонимы, местные названия, аббревиатуры и коды — все это обязательно нужно учесть. Обычная автоподстановка не сработает, если пользователь вместо Швейцарии (Switzerland) введет Scweiz, Suisse, Svizzera или Svizra. То же произойдет в случае, если вместо Германии напишут DE.

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

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

Этап 4. Когда Соединенные Штаты Америки популярнее, чем Объединенные Арабские Эмираты

Вводя слово “United” в поле выбора страны на сайте Apple, можно пронаблюдать следующую картину:

Страны в этом списке автоподстановки отсортированы по алфавиту. Но, так как нам больше не нужно листать список стран, нет никаких причин для алфавитной сортировки логичнее было бы отсортировать его по по популярности. Apple, наверняка захотят сделать более приоритетным США, а уже за ними — Объединённое Королевство и ОАЭ. В то же время, британская газета может захотеть поставить на первое место Объединённое Королевство.

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

Итоговое решение: переработанный селектор страны

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

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

Для тех из вас, кто владеет или работает с сайтом, содержащим селектор страны, я решил сделать оупенсорсный код. Он представляет собой простой jQuery-плагин для улучшения раскрывающихся меню (т.е. раскрывающихся списков для выбора страны), превращающий их в усовершенствованные поля с автоподстановкой для современных браузеров. К плагину прилагается инструкция по использованию и FAQ. Вы также можете посмотреть проект на GitHub и следить за дальнейшими обновлениями этого решения.

.
PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста :)

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

Здесь могла бы быть ваша реклама

Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel

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

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

После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..

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


Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.

На последок как оно происходит на форумах

Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.

Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12

Произвольные таксономии — выпадающий список стран, городов и дат WordPress?

Добрый день, дорогие друзья!

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

1. Выпадающий список стран, выбираем, например, Россия, в соседнем окне выпадают города, например, Москва, в последнем окне — месяца, например, только активные (например, экскурсии есть только в январе, марте, августе, а остальные месяцы не показываются).

2. Как реализовать, если в форме поиска при нажатии просто кнопки Найти без применения фильтрации, выходят все записи из Стран, Городов, Месяцев.

3. Плагины не использую, сделала через добавление произвольных записей, как Страны, Города, Месяцы, только по ним фильтры. Список стран небольшой, всего 10, городов порядка 30, месяцев 12, года не добавляются.

Элементы 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 вы используете?

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

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


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

Drupal Русскоязычное сообщество

Задача довольно распространенная. Наверняка, есть хорошее решение.
Есть задача определить местоположение пользователя и вывести в шапку его город. Однако город должен быть ближайший из собственного списка городов. Например, если пользователь из Арамиля, то выводим Екатеринбург, если Лобня, то выводим Москва и т.п..
Кроме того, должна быть возможность выбрать город из выпадающего списка, если вдруг ошиблись. Наверняка есть какой-то модуль, который позволяет это сделать.

Лучший ответ

Комментарии

Неужели никто с геолокацией не сталкивался.. :( Это же на каждом третьем сайте есть.

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

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

И, нет, этого нет «на каждом третьем сайте», но есть множество разнообразий похожих с этим кейсов.

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

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

Хороший модуль. А есть где-то список регионов и городов, которые он в теории может выдать?

WeberSoft

Блог о web технологиях

Связанные списки с использованием Ajax и MySQL

Рано или поздно каждому разработчику веб-приложений придется столкнуться с использованием связанных списков на сайте. Эта статья рассказывает о том, как с помощью технологии AJAX сделать связанные списки с БД MySQL удобными для пользователя. Связанные списки это два или более списка. Выбор значения в одном из них влияет на содержание остальных.

Такие списки очень удобны, если вам надо выбрать некий объект с определенными характеристиками. Благо на текущий момент существует множество готовых решений, от самых простых, до более сложных, работающих с использованием БД MySQL. На примере одного готового решения мы разработаем связанные списки «Страна — Регион — Город» для нашего сайта. Данные мы будем выбирать из базы данных.

Отрисуем форму для наглядности:

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

Что мы для этого сделаем?
Необходимо повесить обработчик события onchange на select с >

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

Здесь описана с подробными комментариями функция, которая будет вызываться при выборе страны и региона:

selects.js — файл функций для выбора селектов

Как мы уже договорились, бэк-энд будет на php. Для начала нам нужно подключиться к базе данных MySQL: (саму базу можно взять тут)

регион выпадающий список

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

Необходимо сделать, что бы при заполнении корзины был выпадающий список городов и далее улиц к городам, либо предлагались варианты когда начинаешь печатать. Магазин на шоп скрипте 7-мом. Стоит плагин заказ на одной странице. Так же нужно что бы список.

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

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

У меня две витрины, для одной https://goo.gl/cr07A3 настроено много городов для другой https://goo.gl/51ni4C всего лишь два.Вопрос: почему при выборе города показываются города как для всех витрин, т.е. плагин не разделяет к какой витрине какой город.

Нужно адаптировать магазин adgesia.ru под разные регионы — доработать админку и шапку сайта сделанного на базе shop-script 5.2.3.33159. В конечном итоге, нужно, чтобы посетители из разных городов видели цены и информацию в шапке согласно своему.

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

Такая вот неприятность выяснилась:В настройках магазина страна: УкраинаВ настройках оформления заказа страна (фиксированное значение): УкраинаКлиент проходит процесс регистрации. На этом этапе он заполняет только имя, фамилию, телефон, е-мейл, пароль.

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

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

В Shop-Script есть возможность самостоятельно настроить набор и порядок полей, которые покупатель должен или может заполнить при оформлении заказа. Поля формы для ввода контактной информации и адреса покупателя настраиваются в разделе «Настройки →.

При использовании плагина «Курьер» как метода доставки проявляется ошибка, связанная с выбором региона (области). Не уверен, что связано именно с этим плагином, но проявляется в нем.Адрес заполняется при выборе способа доставки. Ошибка.

Для автоматического расчета стоимости доставки заказов за границу используйте плагин «Международная доставка». 1. Установите плагинПерейдите в приложение «Инсталлер», в разделе «Плагины → Расчет стоимости доставки» найдите плагин «Международная.

Расчет стоимости доставки Почтой России в Shop-Script осуществляется с помощью плагина, который нужно установить с помощью приложения «Инсталлер». 1. Установите плагин Перейдите в приложение «Инсталлер», в секции «Плагины → Расчет.

Сверстать и прикрепить к движку Shop-script новый дизайн. Купить следующие плагины: https://www.webasyst.ru/store/plugin/shop/skcallback/ https://www.webasyst.ru/store/plugin/shop/skcatimage/.

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

Для подключения Shop-Script к сервису «Яндекс.Доставка» установите и настройте плагин «Яндекс.Доставка», как описано в этой статье. Сервис разрешает подключение только для магазинов, которые работают по программе «Заказ на Маркете» и.

Webasyst — это CMS нового поколения, совмещающая в себе инструменты для управления сайтом и интернет-магазином с полезными приложениями для совместной работы с коллегами и взаимодействия с клиентами. Единый центр управления бизнесом через интернет.

Платформа
Магазин Webasyst
Помощь
  • © 2002—2020 Webasyst
  • О компании
  • Блог
  • Договор-оферта
  • Webasyst.com

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

Илон Маск рекомендует:  Что такое код asp category
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL