Почему интерактивные формы?


Формы достаточно легко создать, если они просто, как
окна поиска. Но что, если вы в них нуждается, чтобы быть сложным? Как
об изменении формы, основанные на вклад зритель? Это
где интерактивные формы с помощью Javascript и HTML может
помощь. Я буду использовать простой пример того, как интерактивные формы могут
быть полезным.

Проблемы

Я собираюсь использовать бизнес-проект в качестве примера для обучения
интерактивных форм. Представьте себе, что мы создаем заказ
системы для цветов. Мы хотели бы клиентов, чтобы иметь возможность
Для букет цветов. Клиент может выбрать для
любое количество цветов в bouqet от 1 до 6. Для каждого
Цветок, клиент может выбрать тип цветка, и там
3 различных видов цветов. Теперь представьте себе, все эти
варианты, как обычную форму. Там будет 18 вариантов
выбор, даже если вы только хотели один цветок! Это будет
быть некрасивой! В этом уроке мы узнаем, как можно показать, и
скрыть элементы формы в зависимости от входного заказчиком.
Теперь давайте начнем!

Создание интерактивных форм
HTML-

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


Количество цветов
1
2
3
4
5
6

Это создаст меню.

Далее нам необходимо создать форму, где клиент
выбрать тип цветка они хотели бы. Мы дадим им
выбирать между красная роза, белая роза, и желтые розы.
Я собираюсь использовать радио-кнопки для выбора. Здесь
код:

Красный

Белый

Желтый


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

Это то, что она будет выглядеть следующим образом: 0 0 Красный Белый Желтый 0

Копия этого кода в 6 раз, для каждого из цветов. Но
каждый раз, когда вы видите "color1", изменения, которые под другим именем
так что все они отдельно. Я буду использовать "color1", "color2",
"Color3", и так далее.

Теперь мы должны положить все это вместе в заказе
форме. Но мы должны добавить что-то такое, что формы могут
исчезнет. Мы будем добавлять метки вокруг каждого цветка
Тип строки выбора. Введите следующий код вокруг каждой из
групп параметров. Убедитесь, что для каждого из них, вы
этикетке идентификатор метки для по-разному. Например,
первая группа начнет с <возможность>
не будет работать по той же причине, что добавить текст вне
ячеек внутри таблицы не работает. Если материал
внутри тега появляется, таблицы может быть вашим
проблемы. Чтобы исправить это, либо не использовать таблицы или создать
всего отдельную таблицу для информации как внутри
тег. Вот этот код:

Заказ цветов

Выбирать, сколько цветов вы хотите:


Количество цветов
1
2
3
4
5




Выберите тип цветка 1:


Красный

Белый

Желтый




Выберите тип цветка 2:


Красный

Белый

Желтый




Выберите тип цветка 3:


Красный

Белый

Желтый




Выберите тип цветка 4:


Красный

Белый

Желтый




Выберите тип цветка 5:


Красный

Белый

Желтый




Выберите тип цветка 6:


Красный

Белый

Желтый








Мы использовали CSS, чтобы скрыть метки. Следующий шаг состоит в использовании
JavaScript, чтобы показать или скрыть каждой из клеток
в зависимости от выбранного в раскрывающемся меню. Мы будем
начать путем JavaScript функции, то я буду
объяснить код и связать его с выпадающего меню.
Javascript

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


Функция ShowMenu (пит, меню, макс)
(
/ / Начиная с 1 проходного пока количество выбранных
со стороны пользователя
для (я u003d 1; я