Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Создание Web-формы
Создание Web-формы
На очереди — Web-форма, в которую посетитель будет вводить искомое слово или его часть. Вот только куда ее поместить? Давайте пока что вставим ее в контейнер cnavbar, ниже полосы навигации, непосредственно перед закрывающим тегом </DIV>, формирующим этот контейнер. В главе 21 мы найдем Web-форме поиска местоположение получше.
Наша первая "рабочая" Web-форма будет содержать следующие элементы:
— надпись "Поиск", чтобы посетитель сразу понял, зачем нужна эта Web-форма;
— поле ввода значения для поиска, где указывается искомое слово или начало слова;
— кнопку, запускающую поиск;
— раскрывающийся список для выбора режима поиска (только по названиям, только по ключевым словам или одновременно по названиям и по ключевым словам).
Содержимое Web-формы мы поместим в один абзац, который разобьем на три строки с помощью тегов разрыва строк (см. главу 3). Первая строка будет содержать надпись, вторая — поле ввода и кнопку, третья — раскрывающийся список. Можно, конечно, разместить эти элементы в трех отдельных абзацах, но так Web-форма займет на Web-странице слишком много места.
Поле ввода искомого слова мы назовем keyword, кнопку — find, а раскрывающийся список — search_in.
Листинг 20.19 содержит HTML-код, создающий Web-форму.
Листинг 20.19
<FORM ACTION="#">
<P>
Поиск:<BR>
<INPUT TYPE="search" NAME="keyword" SIZE="20">
<INPUT TYPE="button" NAME="find" VALUE="Искать!"><BR>
<SELECT NAME="search_in">
<OPTION>В названиях</OPTION>
<OPTION>В ключевых словах</OPTION>
<OPTION SELECTED>В названиях и ключевых словах</OPTION>
</SELECT>
</P>
</FORM>
Вставим его в соответствующее место файла фрагмента html.htm.
Обязательно проверим, правильно ли наша Web-форма отображается на Web-странице. Если мы допустили в HTML-коде ошибку, лучше исправить ее прямо сейчас.
- Пример: базовый клиент Web
- Hosting Web Services
- Создание Web-службы с использованием .NET
- 26. Practical: Web Programming with AllegroServe
- Более пристальный взгляд на мобильные Web-браузеры
- Листинг 15.6. Простая Web-служба
- Класс WebClient
- ГЛАВА 20. Web-формы и элементы управления
- Как графика Flash помещается на Web-страницы
- Службы Web
- Тестирование Web-сервиса XML с помощью WebDev.WebServer.exe
- Создание файлов с блокировкой