<< Пред. стр.

стр. 39
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

<tdxinput type="checkbox" name="entertainmentCheck" value=
"yes">Entertainment</td>
</tr>
<tr>
<td><input type="checkbox" name="humorCheck" value="yes"
>Humor</td>
</tr>
</table>
</form>

Как и для кнопок общего назначения, для флажка атрибут name тега input предостав-
ляет имя данного конкретного флажка. Атрибут value содержит данные, которые пе-
редаются формой, если посетитель устанавливает этот флажок. Таким образом, если
посетитель устанавливает флажки News, Sports и Business, формой отправляются на
Web-сервер следующие данные:
newsCheck=yes
sportsCheck=yes
businessCheck=yes
Значения не обязательно должны быть одинаковыми для всех флажков, как на рисун-
ке 68.1. При необходимости можно передавать разные значения для каждого значка.
Все зависит от того, что вы хотите послать на Web-сервер.



Часто задаваемые вопросы
ЧТО происходит со сброшенными флажками?
Браузер игнорирует их. Он не включает их в отправляемые данные.



Чтобы флажок был предустановленным при загрузке формы, добавьте атрибут
checked в тег input флажка:
<input type="checkbox" name="news" value="yes" checked>
Как видите, атрибуту checked не присваивается значение.



Работа с полями файлов
файлов ПОЗВОЛЯЮТ посетителям сайта прикреплять компьютерные файлы с их
ПОЛЯ
локальных компьютеров к форме отправки (Submission form). Таким способом
Строим Web-сайты
362

посетители могут загружать на Web-сервер такие объекты, как файлы изображений,
звуковые файлы и текстовые документы. Как видно на рисунке 68.3, поле файла со-
стоит из двух частей: самого поля и кнопки Browse (Обзор).
Листинг 68.3. Исходный код страницы, вид которой в браузере
показан на рисунке 68.3
<form>
<input type="file" name="ImageFile" size="50" maxlength="70">
</form>


Fte Edit Wew FavCTftss Tools beb




Рис. 68.3. Используйте поля файлов, когда требуется
предоставить посетителям своего сайта возможность загрузки файлов
с их локальных компьютеров на Web-cepeep

Повторюсь еще раз: атрибут name идентифицирует поле файла. Атрибут s i z e задаст
длину поля в знаках, а не в пикселах, тогда как атрибут maxlength определяет макси-
мальное число знаков, которое может принять поле. В примере на рисунке 68.3 при
значении атрибута size, равном 50, и значении атрибута maxlength, равном 70, по-
сетитель может видеть 50 знаков в поле, и поле прекращает принимать вводимые дан-
ные после набора 70 знаков.


Часто задаваемые вопросы
ЧТО происходит с файлом, загружаемым на удаленный ком-
пьютер?
Поля файлов могут быть сложны для обработки на сервере. Обычно
формы такого типа поступают непосредственно в базу данных. Раз-
работчик базы данных должен подготовить специальный столбец для
принятия данных файла вместо текста или чисел, передаваемых в
обычных случаях.


Для корректной работы внутри поля этого элемента управления должен находиться
допустимый путь. Вот почему поле файла включает кнопку Browse (Обзор I.
ГЛАВА 68. Работа с элементами управления форм 363

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


Часто задаваемые вопросы
Мне не нравится кнопка Browse (Обзор). Могу я изменить ее?
Нет. С этим придется смириться. HTML не позволяет изменять назва-
ние кнопки или делать ее невидимой.




Работа со скрытыми полями
Данные в скрытом поле передаются на Web-сервер вместе с остальной формой, но по-
сетитель обычно не знает об этом, поскольку скрытое поле, как показано на рисунке
68.4, полностью невидимо на странице.
Листинг 68.4. Исходный код страницы, вид которой в браузере
показан на рисунке 68.4
<form>
<input type="hidden" name="referringPage" value="newsletter.htm">
</form>




Puc. 68.4. Скрытое поле содержит данные формы,
но посетитель не видит их, поскольку поле невидимо

Дизайнеры иногда используют скрытые поля для озорства, но обычно эти поля сов-
сем безобидны. В примере на рисунке 68.4 скрытое поле содержит имя страницы,
представляющей форму, которое полезно знать, если сайт содержит несколько форм
более или менее одинаковых по виду.
Строим Web-сайты
364

Хотя посетитель не видит данные в скрытом поле, Web-сервер получает код, подоб-
ный следующему:
referringPage=newsletter.htm

Часто задаваемые вопросы
Могут ли посетители моего сайта изменять содержимое скрыто-
го поля?
Непосредственно изменять не могут. Поскольку скрытые поля неви-
димы, посетитель не может редактировать или изменять их значения,
Однако с помощью функций JavaScript достаточно просто обновить
значение скрытого поля.



Работа с полями изображений
Поле изображения - это графическая замена стандартной HTML-кнопки Submit (Г &
редать). Поле изображения является элементом графического интерфейса, управляе-
мым щелчками кнопки мыши, и работает точно так же, как кнопка Submit (Передать),
т.е. по щелчку на поле изображения данные формы пересылаются на Web-сервер. Пре-
имущество замены кнопки Submit (Передать) на поле изображения заключается в
том, что можно использовать любой файл изображения для передачи формы. При-
мер изображения показан на рисунке 68.5. При желании поставляемый с браузером
элемент управления в виде стандартной и некрасивой кнопки можно заменить на при-
емлемое графическое изображение.
Листинг 68.5. Исходный код страницы, вид которой в браузере
показан на рисунке 68.5
<form>
<input type="image" name="goButton" src="images/go.gif"
width="20" height="20">
</form>


File Edit tfew Fgrorrtes Tools




Puc. 68.5. Используйте поле изображения вместо
стандартной кнопки Submit (Передать)
ГЛАВА 68. Работа с элементами управления форм 365

Атрибут scr содержит путь к графическому файлу поля изображения, а атрибуты
width и height задают ширину и высоту изображения точно так же, как в теге img.
4




Замена кнопки Reset (Сброс)
Поля изображений всегда передают данные формы. Например, не существует спосо-
ба изменения поля изображения так, чтобы оно функционировало как кнопка Reset
(Сброс). Но пусть это вас не останавливает. Воспользуйтесь обычным тегом изображе-
ния. Заключите в теги-анкеры изображение, чтобы оно управлялось посредством
щелчков кнопкой мыши, а затем добавьте простую функцию JavaScript для дублирова-
ния поведения кнопки Reset (сброс). Здесь приводится код полного сценария плюс
образец ссылки:
<head>
<script language="JavaScript">


function doResetO {
document.formname.reset();


/* Замените formname (имя формы) значением атрибута name тега
<form>. */




</script>
</head>


<!-- Далее следует тело страницы. -->


<body>


<а href = " javascript :doReset (); "ximg src = "images/reset .gif'
width="60" height="40" а1Ь="Щелкните, чтобы установить форму в ис-
ходное состояние."></а>


</body>
366 Строим Web-сайты


Замена кнопки общего назначения
Подобным образом изображение можно использовать для запуска функции JavaScript
и для замены элемента управления в виде кнопки общего назначения. Попробуйте
воспользоваться кодом, похожим на следующий пример:
<head>
<script language="JavaScript">


function вашаФункция() {


/* Поместите здесь свою функцию JavaScript. */




</script>
</head>


<body>


<a href="javascript:вашаФункция();"><img src="images/button.gif"
width="60" height="40" alt="Щелкните, чтобы запустить сцена-
рий. "></а>


</body>



Работа со списками
СПИСОК представляет несколько вариантов, из которых посетитель может делать свой
выбор. Пример списка показан на рисунке 68.6. Если число доступных вариантов вы
бора достаточно большое, то следует отдать предпочтение использованию списков, а
не переключателей или флажков, так как списки позволяют боле оптимально исполь-
зовать площадь Web-страницы.
В списке атрибут s i z e тега < s e l e c t > определяет число отображаемых вариантов. Ес-
ли список содержит больше вариантов, чем это число, браузером добавляется полоса
прокрутки с правой стороны списка.
367
ГЛАВА 68. Работа с элементами управления форм


14Л ^iew
Fie



Select the newsletter you would like to receive:
NMt I
Sports
Business
Entertainment
i Humor •




Puc. 68.6. Упорядочивание большого количества вариантов выбора в виде списка

Листинг 68.6. Исходный код страницы, вид которой в браузере
показан на рисунке 68.6
<form>
<table>
<tr>
<td>Select the newsletter you would like to receive:</td>
</tr>
<tr>
<tdxselect name="newsletterList" size="5">
<option value="news">News</option>
<option value="sports">Sports</option>
<option value="business">Business</option>
<option value="entertainment">Entertainment</option>
<opt ion value="humor">Humor</option>
<option value="style">Style</option>
'> <option value="travel">Travel</option>
<option value="science">Science</option>
<option value="culture">Culture</option>
</selectx/td>
</tr>
</table>
</form>
Строим Web-сайть
368

Каждый вариант в списке получает свой собственный тег <option>. Атрибут value
тега <option> содержит данные, которые Web-сервер получает при отправке формы
посетителем. Таким образом, если посетитель выбирает получение бюллетеня
«Culture» (Культура), Web-сервер получает нечто, похожее на следующую строк)' кода:
• newsletterList=culture
Чтобы разрешить посетителям выбор нескольких элементов списка, добавьте в тег
<select> атрибут multiple:
<select name="newsletterList" s i z e = " 5 " multiple>
Как и атрибут checked, атрибут m u l t i p l e не имеет значения. Он просто присутству-
ет или отсутствует в теге.


Часто задаваемые вопросы
Как выбрать из списка несколько вариантов?
Для выбора из списка нескольких вариантов необходимо держать на-
жатой клавишу Ctrl (Windows) или Command (Mac).


Чтобы задать предварительный выбор элемента списка, добавьте в его тег атрибут
selected:
<option value="news" selected>News</option>
Если разрабатываемый список допускает несколько вариантов выбора, возможно, вы
захотите сделать некоторые варианты предварительно выбранными:
<option value="news" selected>News</option>
<option v a l u e = " s p o r t s " selected>Sports</option>
<option value="business" selected>Business</option>
В противном случае браузер принимает один предварительно выбранный вариант и
игнорирует остальные. По умолчанию Internet Explorer выбирает первый вариант, тог
да как Netscape - последний.



Работа с меню
Меню во многом похоже на список. Код разметки практически такой же, причем ме-
ню, как и списки, используется для представления большого числа вариантов выбора.
Основное отличие состоит в том, что доступные варианты отображаются в виде отк-
рывающегося списка, как на рисунке 68.7.
Листинг 68.7. Исходный код страницы, вид которой в браузере
показан на рисунке 68.7
<form>
<table>
<tr>
369
ГЛАВА 68. Работа с элементами управления форм

<td>Select the newsletter you would like to receive:</td>
</tr>
<tr>
<tdxselect name="select">
<option value="news" selected>News</option>
<option value="sports">Sports</option>
<option value="business">Business</option>
<option value="entertainment">Entertainment</option>
<option value="humor">Humor</option>
<option value="style">Style</option>
<option value="travel">Travel</option>
<option value="science">Science</option>
<option value="culture">Culture</option>
</selectx/td>
</tr>
</table>
</form>




Select the newsletter you would like to receive:
[Newr;:;;;; -




Рис. 68.7. Используйте меню вместо списка,
если отдаете предпочтение компактному виду меню

Внимательно посмотрите на исходный код Web-страницы, показанной на ри-
сунке 68.7, и вы увидите, что разница между меню и списком состоит в отсутствии
атрибута s i z e в теге s e l e c t .
Строим Web-сайты
370



Совет
В меню всегда следует задавать один из вариантов предварительно
выбранным. В противном случае меню будет отображаться пустым,
пока посетитель не откроет список пунктов меню.


Во всем остальном атрибуты в меню идентичны по количеству и функциям, и данные,
получаемые Web-сервером, выглядят практически одинаково. Кроме того, можно доба-
вить атрибуты m u l t i p l e и s e l e c t e d в теги <select> и <option>, присутствующие
в коде меню, также, как и в списке, хотя, сделав это, вы превратите меню в список.



Работа с полями паролей
ПОЛЯ паролей похожи на текстовые поля, только текст внутри них отображается в ви-
де точек, как на рисунке 68.8. Обычно эти типы полей используются для принятия па-
ролей или любых других входных данных, которые нежелательно выводить на экр;ш
в явном виде.

Часто задаваемые вопросы
Можно ли использовать поля паролей для других видов входных
данных?
Безусловно. Поля паролей не ограничиваются вводом только паро-
лей. В элемент управления этого типа также можно вводить личные
идентификационные номера (PIN), ключи, номера счетов и другие
конфиденциальные данные.


Листинг 68.8. Исходный код страницы, вид которой в браузере
показан на рисунке 68.8

<< Пред. стр.

стр. 39
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>