Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Добавление элемента select

.

Теперь добавим элемент select. Для чего его можно использовать? Хотя бы для возможности выбора региона страны, где будет проходить мероприятие.

1. Добавьте еще один элемент div в конце элемента form в файле contact. html.

2. Вставьте элемент select в элемент div, который вы только что добавили.

3. Присвойте элементу select атрибуты id и name со значениями region.

4. Добавьте метку label с соответствующим текстом.

5. Добавьте элементы option внутри элемента select для каждого региона:

• Юго-запад;

• Юго-восток;

• Мидлендс;

• Центральный регион;

• Лондон;

• Восток;

• Север;

• Шотландия;

• Северная Ирландия;

• Уэльс;

• Другая страна. Вот каким получится ваш HTML-код:

На рис. 7.23 показан скриншот получившейся веб-страницы.

Рис. 7.23. Активизация раскрывающегося списка (или элемента select)

Добавление элемента textarea

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

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

«Здесь можно добавить любые дополнительные детали (запишите их в текстовую область ввода ниже). Укажите их. чтобы избежать дополнительных звонков или писем с уточнениями, а также любых накладок».

Добавьте текстовую область ввода на форму.

1. В файле contact.html добавьте открывающий тег textarea и закрывающий /textarea. Удостоверьтесь, что между ними нет пробелов, так как любые пробелы и абзацы в исходном коде появятся внутри текстовой области ввода, что может раздражать пользователей.

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

• id=details;

• name=details;

• cols=30;

• rows=7.

3. Как и ранее, вставьте элемент label сразу после textarea. Свяжите его с элементом textarea с помощью атрибутов id и name (используйте значение details).

4. Присвойте метке атрибут class со значением fixed width.

5. Сохраните работу и посмотрите в браузере, что получилось. Вот каким должен быть HTML-код:

На рис. 7.24 показан результат открытия веб-страницы в браузере.

Рис. 7.24. Текстовая область ввода

Форма почти готова. Честно говоря, это и сейчас достаточно подробная форма ввода, но лучше увидеть в деле все элементы управления формой, которые мы рассмотрели; поэтому быстренько выполним последнее задание: добавим флажки и переключатель.

.

Читайте так же:
Not found