Как пользоваться: Генератор выпадающих списков
- Выберите список: страны, штаты США, канадские провинции, языки, валюты, часовые пояса, телефонные коды, месяцы, дни недели, годы, диапазон чисел или свои варианты.
- Укажите подпись (например, флаг и название), значение варианта (для форм лучше использовать код ISO), порядок, язык подписей и при необходимости группы.
- Добавьте подсказку, предвыбранное значение,
nameиid, а также выберите обязательность поля или поиск через datalist. - Выберите формат вывода — HTML, React, Vue, JSON, CSV или PHP — и скопируйте результат или скачайте файл.
Хорошие выпадающие списки для форм
- Используйте коды как значения. Сохраняйте
US,deилиEUR, а не видимую подпись: подписи меняются при переводе, коды — нет. - Добавьте подсказку в виде неактивного первого варианта и сделайте поле
required, чтобы пользователь не мог отправить форму с подсказкой. - Помогите с длинными списками. Ставьте самые частые варианты в начало, объединяйте их через
<optgroup>или используйте поиск через<datalist>. - Настройте autocomplete. Полям стран задайте
autocomplete="country"(илиcountry-name, если в значении название), чтобы браузер заполнял их автоматически.
Откуда берутся данные
Коды стран и регионов соответствуют ISO 3166-1, языки — ISO 639-1, валюты — ISO 4217, часовые пояса — базе IANA. Названия формируются средствами интернационализации вашего браузера, поэтому они точны и доступны на десятках языков. Телефонные коды соответствуют кодам стран ITU.
В Webflow вставьте HTML в элемент Embed внутри формы: поле отправляется вместе с формой, как и любое другое. Также пригодятся: HTML Table Generator, JSON to TypeScript.
Также ищут как: генератор select html, html select generator, список стран html select, выпадающий список html, список штатов html, react select options, генератор dropdown.
Инструменты, которые хорошо сочетаются с Генератор выпадающих списков
- CSV и Excel в HTML-таблицу — Вставьте ячейки таблицы, CSV или JSON и получите семантическую разметку HTML-таблицы с экранированием данных — с готовым стилем на выбор и живым предпросмотром.
- HTML форматер — Вставьте минифицированную или неаккуратную разметку и получите чистый HTML с единообразными отступами, включая встроенные блоки <style> и <script>.
- HTML в JSX — Вставьте HTML — фрагмент, шаблон или SVG-иконку — и получите JSX, который можно сразу использовать в компоненте React: className, htmlFor, объекты style, атрибуты в camelCase и самозакрывающиеся теги.
- Генератор тестовых данных — Создайте до 10 000 строк реалистичных тестовых данных: пользователей, товары, заказы, адреса, компании или вложенные API-записи, либо собственную схему.
Часто задаваемые вопросы
Как сделать выпадающий список стран в HTML?
Выберите «Страны», задайте подпись и значение (лучше коды ISO), добавьте подсказку и скопируйте
Что должно быть значением варианта: код или название?
Код. Коды ISO вроде US или DE одинаковы на всех языках и ожидаются большинством API и баз данных. Название всегда можно показать как подпись.
Как сделать выпадающий список с поиском без JavaScript?
Включите опцию «Поиск»: вывод станет элементом с
Можно ли получить список на другом языке?
Да. Названия стран, языков, валют, месяцев и дней недели берутся из встроенных переводов браузера. Выберите язык подписей, и весь список будет переведен и отсортирован для него.
В каких форматах можно экспортировать список?
В HTML
Можно ли установить Генератор выпадающих списков как веб-приложение и пользоваться им офлайн?
Да. Генератор выпадающих списков — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.