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

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

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

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

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

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

Добавление флажков и переключателя

.

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

все;

ни одного;

любое количество.

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

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

На рис. 7.25 показано, как форма выглядит в Firefox.

А сейчас завершим нашу работу! Хотя минутку: здесь есть кое-что, чего вы еще не видели. Когда вы используете флажки и переключатели, они предшествуют поясняющему их тексту. Это общее правило для форм (по соображениям веб-доступности), поэтому постарайтесь не нарушать его, указывая текст впереди элемента, как бы вам этого ни хотелось. Как видите, я сознательно не добавил новым меткам класс fixed width, в отличие от элементов input, чтобы избежать их преобразования в блочные элементы или изменения выравнивания.

Рис. 7.25. Флажки и переключатель, добавленные на форму

И напоследок: кнопка отправки запроса

Это и в самом деле последний шаг, который займет совсем немного времени. Вставьте следующую разметку перед закрывающим тегом /fieldset:

div class=buttonarea

input type=submit value=Отправить информацию/ /div

Я добавил атрибут class со значением buttonarea к элементу div, который содержит кнопку отправки данных. Благодаря этому область кнопки можно будет стилизовать с помощью CSS — сделаем ее более заметной на странице.

1. В файле stylel. ess добавьте новый контекстуальный селектор для кнопки. Нужно, чтобы приведенный ниже стиль влиял на элемент div, у которого есть атрибут class со значением buttonarea.

2. Установите цвет фона navy (темно-синий).

3. Задайте белый цвет шрифта.

4. Сделайте шрифт полужирным.

5. Добавьте небольшие отступы вокруг кнопки — 5 пикселов будет достаточно.

6. И наконец, добавьте однопиксельную рамку вокруг кнопки — сплошную и белого цвета.

Вот каким должен получиться CSS-код:

Проверьте результат, сохранив файл stylei. ess и обновив страницу в браузере. Вы видите, что кнопка из серой превратилась в синюю? Если она серая, возможно, вы используете старую версию Safari. Помните, что многие браузеры не поддерживают оформление всех видов элементов управления. Internet Explorer, Firefox, Chrome и Opera должны отображать цвета, как указано в нашей таблице стилей.

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

Добавьте специальный селектор класса для области кнопки:

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

Итак, вы узнали, для чего используются разные элементы формы и какие их типы лучше всего применять в каждом конкретном случае. Мы вместе прошли от начала до конца процесс создания формы, а затем стилизовали ее с помощью CSS. Но что теперь? Куда отправятся введенные данные?

Рис. 7.26. Кнопка для отправки данных формы выделена с помощью CSS

.

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