WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!

1 января С Новым Годом!

Наша 12 января Со Старым Новым Годом!

15 февраля Мы любим Вас!

Прайс-лист 23 февраля Надеемся, повестка и телефоны обошла Вас стороной...

сайта 1 марта Рис. Для того чтобы расширить встроенный фрейм, пара метрами width и height — их можно задавать как в пикселях, так и в процентах Как вы могли заметить, точно такие параметры есть в дескрипторе Вообще, фрейм обычный и фрейм встроенный в смысле параметров очень похо жи. Как и в в дескрипторе внутренние отступы — расстояния от границ встроенного фрейма до его содержимого сверху, снизу, справа и слева определяются параметрами marginheight и Как и там, здесь можно отменить отображение рамки с помощью параметра и изменить ре жим прокрутки с помощью параметра scrolling. Наконец, встроенный фрейм, как и обычный, может иметь имя, описываемое параметром name, чтобы к нему можно было обращаться по гиперссылке.

Фреймы Резюме Фреймы — мощное средство HTML, позволяющее разделить пространство ок на броузера на самостоятельные информационные зоны.

Фреймовая система описывается в HTML-коде с помощью дескриптора В нем помещаются дескрипторы описывающие параметры от дельных фреймов. HTML-коды содержимого этих фреймов находятся в отдельных файлах, имена которых указаны в дескрипторах с помощью параметров src.

Деление окна броузера на части осуществляется с помощью параметров деск риптора Для деления по вертикали используется параметр cols, а по го ризонтали — параметр rows. Их значениями являются размеры (ширина или высо та) полученных областей, перечисленные через запятую, в пикселях или процентах.

Если размер области не имеет значения, его можно заменить символом *.

В одном дескрипторе может присутствовать только один из этих параметров — или cols, или rows. Поэтому для того чтобы разделить окно и по вертикали, и по горизонтали, используются вложенные фреймы: вместо описания очередного фрейма помещается фреймовая структура Каждый фрейм имеет рамку стандартной толщины и цвета. Эту рамку посети тель страницы может перетаскивать с помощью мыши. Если содержимое фрейма не помещается в отведенной ему области окна, то у этой области появляется по лоса прокрутки. Таковы свойства фрейма по умолчанию. Однако их можно изме нить. С помощью параметров дескрипторов и изменить толщину и цвет рамки или вовсе ее убрать, а также запретить прокрутку содер жимого фрейма и убрать с экрана соответствующую полосу прокрутки.

При ссылках на элементы фреймовой структуры широко используются имена фреймов, назначаемые с помощью параметра name. Затем эти имена присваивают ся параметру target дескриптора гиперссылки <А>.

Для создания внутри окна области с собственной рамкой и самостоятельной прокруткой используется дескриптор Он имеет те же параметры, что и но не нуждается в специальной фреймовой структуре, описываемой де скриптором и может располагаться внутри обычного HTML-кода.

Тесты 1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

rows=70,*> ••• б) в)...

д) rows=*,*> rows=2*,*> ••• Глава ж) rows=**,*> и) rows=*> 2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

cols=*,*> в) д) cols=*,*> 3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

frameborder=no> в) border=no> Фреймы г) д) border=10> 4. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?

cols=*,*>

Pages:     | 1 | 2 || 4 |

«Самоучитель то освоению языка Язык HTML Г помощью этого руководства вы быстро язык HTML и узнаете как Создавать и редактировать гипертекстовые документы Структурировать, форматировать и размечать ...»

-- [ Страница 3 ] --

Иногда — правда, все реже и реже — встречаются броузеры, которые не поддерживают фреймы. Специально для них в HTML оставлен дескрип тор Что помещают внутрь структуры Лучше всего, если удается (и если у создателя страницы есть такое же лание) поместить там версию страницы без фреймов — пусть не так красиво, но все же хоть что-то... Но, поскольку броузеры, не поддержи вающие фреймы, скоро будут встречаться примерно так же часто, как динозавры, время дескрипторов тоже проходит. И если уж какой-нибудь особо вежливый автор HTML-страницы их использует, то он, как правило, пишет что-то в таком роде:

К сожалению, Ваш броузер устарел.

Обновите его и приходите снова!

Фрейм без фреймов Используя фреймы, удобно делить окно на две вертикальные или горизонтальные панели — или, как в нашем примере, на три. Но довольно часто приходится решать такую дизайнерскую задачу: создать на странице внутреннее, "вложенное" окно, с собственной полосой прокрутки и показывать в нем какую-то информацию.

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

178 Глава Левый фрейм фрейм Рис. 11.19. Задачу создания на странице центрального "окна" с прокруткой можно ре шить с помощью "классической" фреймовой структуры. Но это громоздко и неудобно И все-таки такое решение далеко от идеала. Хотя рамки и можно убрать, гра ницы между фреймами все равно остаются, и с ними приходится считаться. И это уже не говоря о прочих неудобствах, связанных с тем, что цельный по замыс лу кусок страницы приходится резать на четыре части, размещать в четырех фай лах — left.html, и — и потом совмещать границы фреймов так, чтобы внешне все смотрелось как единое целое.

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

Для создания встроенного фрейма используется дескриптор (от анг лийского inline frame). Это парный дескриптор, очень похожий на дескриптор Но дескриптор — непарный, a — парный! Что же тогда находится между и Здесь самое время вспомнить, что, несмотря на то, что HTML — стандарт, далеко не все дескрипторы этого стандарта одинаково поддерживаются всеми броузерами.

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

Фреймы

:й <РХй услуги <РХЙ и

1 января С Годом! i 1 января С Новым и Годом!

I января Со Новым Годом!

Рис. 11.20. Содержимое дескриптора предназначено на тот случай, если броузер не поддерживает этот дескриптор В принципе если вы не предусматриваете замены страницы с фреймом, закрывать дескриптор не обязательно.

Для простоты в примере на рис. дескриптор имеет только один параметр — src. Значением этого параметра, как обычно, является файл, "подключаемый" для отображения в данной точке, — Однако отсутст вие прочих параметров отрицательно сказывается на эстетичности страницы.

В частности, с помощью параметров width и height мы можем отрегулировать ширину и высоту встроенного фрейма. Как всегда, эти параметры могут изме ряться в абсолютных величинах (пикселях) или в относительных (процентах от Глава размеров окна или табличной ячейки, в которую "вписан" фрейм). Благодаря этим параметрам мы можем расширить окно новостей в нашем примере (рис. а то его окном-то назвать неловко: так, форточка...

и сайта Новым

в) Содержимое встроенного Глава Глава Формы В этой главе...

Основная схема формы * Из чего состоит форма * Текстовые строки Кнопки Текстовые поля Списки вариантов 4 Списки-переключатели Раскрывающиеся списки Основная схема формы Web-сайт — это почти всегда диалог. Конечно, встречаются "односторонние" сайты, авторы которых стремятся только показать, но не услышать отзыв о пока занном. Но даже там редко обходится без ссылки на автора: "Все, что вы думаете по этому поводу, пишите сюда".

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

Как получить данные и передать их для обработки?

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

Подобно фреймам, таблицам и другим "крупногабаритным" элементам Web страницы, форма — это блок HTML-кода, образованный специальными элементами HTML. Границами такого блока служат, как легко догадаться, дескрипторы Какие параметры имеет этот дескриптор?

Давайте задумаемся: какие вообще могут быть параметры у всех этих тексто вых полей, списков, "точек", "галочек" и кнопочек, с которыми по нашей мило сти возится пользователь? Раз эти параметры выносятся "за скобки", в заглавный дескриптор блока, то они должны быть общими для всех описанных элементов интерфейса. Но ведь элементы эти такие разные, такие непохожие друг на друга!

Единственное, пожалуй, что их объединяет, — это то, что все они предназначены для получения от пользователя какой-то информации.

Первое, что приходит в голову: эту информацию нужно как-то обрабатывать.

Поэтому параметры дескриптора должны описывать то, что нужно делать дальше с полученными данными. И это действительно так!

В самом деле: ввел, предположим, посетитель электронного магазина в одной строке адрес, куда доставить покупку, в другой — номер кредитной карточки, с кото рой перечислить деньги, выбрал из списка товар, щелкнул на кнопке "купить" и...

что дальше? А дальше все это нужно передать на сервер и там как-то обработать.

Действие, которое следует выполнить с введенными в форму данными, определя ется параметром action. Точнее, параметр определяет не столько само действие, сколько по которому расположен обработчик данных. Чаще всего в качестве такого обработчика выступает специальная программа. Эта программа может быть расположена как на удаленном сервере, так и на компьютере посетителя страницы.

Написана она может в принципе, на любом языке. В частности, для простой обработки данных широко применяется язык сценариев JavaScript (см. главу 16).

Впрочем, вместо адреса программы-обработчика значением параметра action может быть обычный адрес электронной почты. Тогда данные формы будут просто отправ лены по этому адресу, а что с ними делать дальше — решит получатель.

Каким способом передаются данные? Уточним сразу: HTML не вмешивается в способы кодирования и передачи информации по сетям Internet. Однако сущест вует два принципиально разных метода: первый заключается в передаче самих данных ("покупатель: Александр Петров;

номер карточки: 123456789;

покупка:

костюм мужской и т.д."), второй — в передаче указателя на то место, где они на ходятся (например, URL). То, какой именно из них используется для данной формы, определяется параметром method. Передача данных соответствует значе нию post (в переводе с английского "переслать"), а передача ссылки — значению get ("получить"). По умолчанию используется последний вариант. Действитель но, зачем лишний раз нагружать сеть? Лучше передать ссылку и этим ограни читься. Но передавать данные формы по электронной почте приходится полно стью, а для этого используется значение post.

Вы, должно слышали о существовании различных типов кодирования инфор мации, передаваемой через Internet. Тип кодирования данных, введенных через форму, определяется параметром (от английского encryption type — тип В данном случае имеются в виду типы кодирования MIME. По умолчанию параметр enc type принимает значение но при отправке данных электронной почтой используется тип text/plain. Таким образом, для того чтобы дан ные формы передавались по электронной почте, код формы должен выглядеть так:

186 Глава Наконец, обратим внимание еще на одну деталь. Как правило, после заполнения формы содержащее ее окно закрывается, и на его месте появляется другое, — напри мер, с сообщением о том, что данные успешно введены и получены. Как описать, в каком окне или фрейме будет открыта следующая страница? Правильно, с помощью уже знакомого нам параметра target (см. главу Из чего состоит форма Уф... Кажется, с самой формой мы разобрались. Но, как учат философы, форма без содержания — ничто. Правда, другие философы с ними спорят и доказывают обратное... Но, если говорить не об абстрактной форме, а о формах HTML, то факт налицо: HTML-формы без содержания действительно не имеют смысла.

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

Масса пустых строчек, куда нужно вписать фамилию, адрес, дату... Нужное подчерк нуть... Отметить "птичками" один несколько из предлагаемых вариантов (а если анкета электронная, не забыть убрать выделенные варианты, предлагающие присы лать вам по электронной почте всякую Да, и еще, конечно же, обычный текст — пояснения, что и куда нужно вписывать. Как правило, маловразумительные...

Ну и всякие картинки, оживляющие пейзаж: логотипы, печати, рамки. Наконец, в электронных анкетах вместо барышни, которой нужно сдать бумажку, имеются кноп ки: "Принять", "Отменить" и т.п.

Да, набралось порядочно. Давайте все это как-то классифицируем, чтобы не запутаться.

Первое, что бросается в глаза: все содержимое формы делится на две катего рии. В первую попадает все, что требует вмешательства пользователя: заполнить, подчеркнуть, отметить, нажать и т.п., во вторую — все остальное, что достаточно прочитать, просмотреть или можно вообще оставить без внимания. Назовем эле менты первой категории — поля ввода, "птички", кнопки, списки — активными, а элементы второй категории — текст, картинки — пассивными.

Пассивные элементы формы нам хорошо знакомы. Они ничем не отличаются от любых других элементов Web-страницы. А вот к активным элементам стоит присмотреться внимательнее.

Например, какие общие свойства присущи таким элементам и, соответст венно, какие общие параметры есть у описывающих их дескрипторов? Таких свойств два. Во-первых, это информация, которую вводит пользователь через данный элемент формы. Эта информация присваивается параметру Во вторых, это уникальное в пределах формы имя, по которому данный элемент от личается от других. Это имя присваивается параметру name — аналогичный пара метр нам уже встречался в фреймах (см. главу Формы Текстовые строки Строки для ввода текста на HTML-страницах встречаются сплошь и рядом.

Тому, кто хоть раз пользовался поисковым Internet-сервером, не надо объяснять, что это такое: узкий вытянутый прямоугольник, внутри которого можно ввести с клавиатуры одну строку текста (рис. 12.1).

' Расширенный поиск дом Вильяме Настройки • Языковые инструменты Искать в интернете г Искать в русском, Всё о Google In English Рис. Интерфейс поисковой системы — это тоже форма. Обычно она состоит из текстовой строки и кнопки ввода Для ввода однострочных полей используется дескриптор Это непарный дескриптор, обладающий целым "выводком" параметров, описывающих самые раз нообразные свойства. В зависимости от значения параметра type этот дескриптор мо жет "принимать вид" самых разных элементов формы. В частности, когда этот пара метр имеет значение text, дескриптор "превращается" в текстовую строку.

Похоже, пора перейти от теории к практике. Создадим форму для ввода некото рой текстовой строки, воспользовавшись для этого уже известными нам сведения ми о дескрипторах и Для простоты пока что будем предполагать, что вся вводимая информация затем пересылается по электронной почте (рис. 12.2).

Глава ffj Рис. 12.2. Простейшая форма, содержащая текстовую строку Обратим внимание на несколько интересных моментов.

Прежде всего: что находится внутри формы? Кроме текстовой строки для вво да данных, — обычный форматированный текст, такой же, как везде. Текстовая строка имеет имя search и начальное значение 123456789123456789123456789, при своенное параметру value. Как видим, этот параметр используется не только для передачи введенных данных, но и для вывода исходных значений.

Зачем мы выбрали такую последовательность цифр? Чтобы измерить длину стро ки. Как видим, в ней помещается 18 знаков. Как растянуть ее или, наоборот, сузить?

За это "отвечает" параметр size. Его значением является число символов, по мещающихся в строке. Например, если нужно ввести что-то очень короткое — скажем, сегодняшнее число — то строку можно сократить до двух символов, при своив параметру size значение 2. Но помешает ли это посетителю ввести более длинное число? Нет. Просто символы, введенные первыми, "уедут" из видимой части строки влево (рис. 12.3).

Для того чтобы ограничить также вводимую строку, используется параметр Его значением служит количество символов, принимаемых формой и передаваемых для обработки. Если присвоить этому параметру значение 2, то пользователь просто не сможет ввести третий символ (рис. 12.4).

А теперь рассмотрим несколько специфических вариантов текстовых строк.

Довольно часто встречаются ситуации, когда вводимая строка не должна быть видна на экране. Типичный случай — пароль. Для того чтобы обеспечить конфи денциальность такого рода, используются текстовые строки специального вида параметру type присваивается значение password (рис. 12.5).

Формы сегодняшнее :INPUT Введите сегодняшнее число.......

(moil) Рис. 12.3. Ограничение длины видимой текстовой строки с помощью пара метра size не мешает пользователю ввести значение, превышающее ее длину

Рис. 12.4. Параметр ограничивает длину вводимой текстовой строки Глава пароль:

• Введите пароль Форма из Microsoft Рис. 12.5. Ввод пароля: в окне броузера отображаются звездочки, но для обработки передается значение, введенное в действительности Пожалуй, не менее часто возникает необходимость в передаче файла, имя ко торого вводится в HTML-форме. До сих пор в некоторых приложениях встреча ются моменты, когда от пользователя требуется вводить имя вручную — полно стью, вместе с длинным путем. И неоткуда скопировать... Если вы с такой про блемой сталкивались, то поймете меня, а если нет — поверьте на слово: это сущее наказание. Неудивительно, что пользователь всеми силами избегает по пасть в такую ситуацию второй раз. Грамотные разработчики помещают рядом со строкой, куда нужно ввести имя файла, стандартную кнопку Обзор. Щелкнув на ней, пользователь открывает стандартное окно Windows, в котором и выбирает нужный файл. Для того чтобы такая кнопка появлялась рядом с текстовой стро кой HTML-формы, параметру type присваивается значение file (рис. 12.6).

Иногда возникает необходимость передать из формы обработчику некую скрытую информацию — такую, которую пользова тель не то что не вводит, но даже и не видит. Для этого используется дескриптор с параметром type=hidden:

name=secret этом письме содержится Формы text/plain Выберите i.

Выберите файл:

из Microsoft Explore Рис. 12.6. Для ввода имени файла используется тек стовая строка с параметром Кнопки Кнопки — главный элемент любой электронной формы. Не согласны? Что ж, возможно, вы правы. Но как сообщить о том, что ввод данных завершен, если форма лишена кнопки "Отправить"?

До сих пор мы действительно обходились без кнопок: пока дело касалось лишь текстовых строк, для ввода данных достаточно нажать клавишу .

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

Как это ни странно, кнопки создаются с помощью того же дескриптора что и текстовые строки. Однако значение параметра type в этом случае другое — в зависимости от назначения кнопки.

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

Глава

Убираем параметр name и получаем как раз то, что нужно (рис. 12.8).

Формы

главу 8). Кроме того, при этом программе-обработчику передаются дополнительные данные — координаты точки, в которой посетитель щелкнул на (рис. 12.9). Отсчет ведется в пикселях, от верхнего левого угла изображения.

Глава FORM act INPUT P Петр Петрович [ III Форме из Microsoft Internet Explorer Петр Петрович Рис. 12.9. Кнопка, превращенная в картинку, сохраняет все параметры изображения Следующая по распространенности функция кнопки в электронной форме — вернуть все, как было. Конечно, если форма состоит из единственной строчки, посетитель вполне справится и сам. Но представьте себе длиннющую анкету, ко торую нужно целиком "обнулить". Обрадовала бы вас перспектива почистить все поля с помощью мыши и клавиатуры? По-моему, вопрос излишен.

Для создания кнопки возврата параметру type присваивается значение reset. В результате получаем точно такую же кнопку, что и в случае submit, только резуль тат ее действия другой, вместо того чтобы отправить данные на обработку, дан ные просто удаляются, и форма приводится к исходному состоянию (рис. 12.10).

Обратите внимание: можно заменить рисунком кнопку отправки дан ных, но не кнопку отмены. Увы...

Формы

Если необходимо создать кнопку, назначение которой отличается от приема данных и сброса, используется значение Действие, выполняе мое при щелчке на кнопке, определяется параметром onclick (см. главу 16).

Глава Текстовые поля Не всегда текст, который нужно ввести, помещается в одной строке. Бывает, что он растягивается на несколько строк или даже абзацев. Конечно, можно обойтись текстовой строкой "бесконечной" длины (без указания значения пара метра maxlength). Однако выглядит такая строка — без начала, без конца — не изящно, а пользоваться ею очень неудобно.

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

"Елена из книги • бесплатный ящик на http://freemail.ukr.net Т файла не сообщение Рис. Типичный пример поля ввода — форма электронного письма Для создания текстового поля используется дескриптор Что полу чится, если просто использовать его интуитивно, применяя параметры name и value по аналогии с текстовыми строками? Явная ошибка (рис.

Прежде всего: почему в поле ввода оказался весь остальной код? Потому что дескриптор — парный, а мы его не закрыли. Внутри него помещается текст, который должен оказаться в поле ввода по умолчанию. Это логичнее, чем делать его значением параметра value: ведь текст может быть довольно длинным.

Формы text/plain ввести длинный "Начинайте пряно <Р

Рис. 12.12. Поле ввода очень похоже на строку ввода, но использо вать дескриптор по аналогии с type=text> — ошибка Несмотря на то, что содержимое поля ввода не является значением па раметра value и, теоретически, может содержать дескрипторы формати рования, на практике оно форматированию не подлежит. Весь текст вы водится, как правило, моноширинным шрифтом ("пишущая машинка").

вопрос: почему поле ввода такое маленькое? Очевидно, оно такое по умолчанию. Для того чтобы его "раздвинуть", нужно описать его размеры явно.

Высота поля ввода определяется параметром rows и измеряется в строках, шири на — параметром cols и измеряется в символах. Поскольку текст выводится моно ширинным шрифтом, такой подход оказывается точным и не приводит к появле нию строк разной ширины.

Теперь мы знаем достаточно, чтобы создать такое поле ввода, как нам хочется (рис. 12.13). Почти. Осталось выяснить еще один нюанс. Что происходит, если со держимое не помещается в окне? Если строк слишком много, полоса прокрутки справа от них "оживает" и начинает оправдывать свое существование. А если стро ка слишком длинная? Разумеется, когда она приближается к правой границе окна, очередное слово появляется "этажом ниже". Но в каком виде такая "разорванная" строка передается на обработку? Отдельными кусками или целиком?

Оказывается, можно и так, и эдак. Способ представления текста, вводимого в окно, определяется параметром wrap. По умолчанию все происходит именно так, как ожидается: в окне текст автоматически разбивается на строки, но при пере даче эта автоматическая разбивка не сохраняется: если вы ввели все одной стро кой, то оно так и будет передано. Этот режим соответствует значению virtual.

Если мы хотим, чтобы переход на новую строку в окне происходил только когда Глава пользователь нажимает , мы должны присвоить параметру wrap значение off. Наконец, если мы хотим, чтобы переход на новую строку происходил авто матически и эта разбивка сохранялась при передаче текста на обработку, нужно использовать значение hard (рис. 12.14).

здесь ввести текст:

пряно Здесь можно ввести длинный текст Начинайте прямо отсюда Microsoft Explore прямо отсюда Рис. 12.13. Так работает "правильное" поле ввода act ввести <Р cols= очень просто Еиа Здесь можно ввести длинный текст:

очень длиная предлинная, просто строка а из Microsoft очень длиная-предлинная, просто бесконечная строка Глава текст:

<Р очень просто •. т Здесь можно ввести длинный текст очень S очень длиная-предлинная, просто бесконечная строка можно ввести длинный <Р Очень, очень просто <Р В

очень просто строка I из Microsoft очень длиная предлинная, просто бесконечная строка в) Рис. 12.14. Три режима отображения и передачи длинных строк, определяемые парамет ром wrap: перенос при вводе (а), отсутствие переноса (б), и перенос при вводе и передаче (в) Списки вариантов В электронных формах существует два типа списков, из которых посетителю страницы предлагается что-то выбрать. В первом случае допускается выбор не скольких вариантов, во втором — только одного. Мы будем называть список пер вого типа списком а список второго типа — списком-переключателем.

Обычно пункты списков вариантов снабжены квадратными "окошками", в ко торых при выборе появляются "птички" (checkbox). Для создания такого списка используется уже знакомый нам дескриптор с параметром type=checkbox.

Как это выглядит? Очевидно, таких дескрипторов должно быть столько же, сколько вариантов в списке. В остальном — кажется, мы уже знаем, как пользо ваться параметрами name и value... Однако, видимо, в данном случае ими нужно пользоваться как-то иначе (рис.

202 Глава <1NPUT

Рис. 12.15. Попытка создать список вариантов: использование знакомых параметров не приводит к желаемому результату text/plain INPUT INPUT type=checkbox INPUT P INPUT INPUT Ваше любимое блюдо г заварные пирожные фруктовый коктейль шоколадный торт из fruit=on Рис. 12.16. Код списка вариантов состоит из самостоятельных деск рипторов в качестве пояснений используется обычный текст Формы Для создания списка вариантов в самом деле нужно столько дескрипторов сколько в нем есть вариантов. Однако имена у них должны быть разные — у каждого варианта свое. Зачем это нужно? Дело в том, что, хотя логически список является цельным элементом формы, с точки зрения кода это всего лишь набор разрозненных, несвязанных дескрипторов. У каждого — свое имя и значение. А для того чтобы стало ясно, что именно нам предлагают выбрать, нужно снабдить эти квадратики поясне ниями. Обычными текстовыми — параметр value здесь явно не годится (рис. 12.16).

Обратите внимание: имена всех элементов списка — разные. Что будет, если сделать одинаковыми все или некоторые из них? Если вы думаете, что завизжит сирена и броузер выдаст сообщение об ошибке, то оши баетесь. Броузер молча "проглотит" вашу оплошность и впоследствии будет вести себя так, как будто ничего не случилось. Но случилось ли что-то на самом деле? Решать вам 12.17).

FORM <1>

заварные пирожные фруктовый коктейль шоколадный торт т Рис. 12.17. что получается, если разные варианты списка имеют одинаковые значения параметра name Глава Отметим еще одну важную особенность. Как передаются данные о выбранных вариантах? Очень просто. Если соответствующий пункт списка выбран, его имя включается в состав передаваемых данных со значением on (см. рис. 12.16). А как поступить, чтобы один из пунктов был выбран по умолчанию? Естественно пред положить, что для этого нужно включить в соответствующий дескриптор параметр value со значением on. Однако, если вы проверите эту версию на прак тике, то убедитесь, что она не работает: каким бы ни было значение параметра value, в случае списка вариантов оно игнорируется. Если мы хотим, чтобы какой то из пунктов был выбран по умолчанию, то нам понадобится дополнительный параметр — checked. Значений он не имеет — просто включите его в состав соот ветствующего дескриптора (рис. 12.18).

FORM am» I> INPUT INPUT «с INPUT P INPUT INPUT J Ваше любимое блюдо г заварные пирожные фруктовый коктейль шоколадный торт Explorer.

I Рис. 12.18. Для того чтобы один из пунктов списка вариантов был вы бран по умолчанию, используется не имеющий значений параметр checked Заполняя различные Internet-анкеты, вы могли обратить внимание на то, что такие списки, "заполненные" по умолчанию, встречаются достаточно часто — чаще, чем хотелось бы. Обычно в конце длинной-предлинной Формы формы мелким шрифтом стоит что-то вроде "Я хочу регулярно получать по почте рекламу продукции", а рядом — незаметная "птичка". И кто обвинит владельца сайта в распространении спама? Ведь вы сами его "попросили", не дочитав до конца и поторопившись щелкнуть на кнопке...

ючатели В списках-переключателях слева от пунктов имеются причем в центре кружка, соответствующего пункту, появляется жирная точка ton). Для создания таких списков используется тот же дескриптор что и для списка вариантов, но параметру type присваивается значение radio. Как и в списке вариантов, каждому элементу списка-переключателя соответствует отдельный деск риптор Однако, в отличие от списка вариантов, все элементы списка-перек лючателя имеют одно имя. Иначе и не может быть: ведь мы хотим получить только одно значение из всего перечня. Наконец, здесь, как и в списке вариантов, для выбо ра одного из пунктов по умолчанию используется параметр checked (рис. 12.19).

что-нибудь Выберите что-нибудь одно:

г пирожные фруктовый коктейль 3 шоколадный торт из Microsoft Internet Explorer Рис. 12.19. Список-переключатель формируется из дескрипторов с параметром type=radio Глава Раскрывающиеся списки Списки часто бывают очень длинными и скучными. И занимают много места.

Если форма бумажная — ничего не поделаешь. Тяжко вздыхаем и заправляем в принтер еще один лист. Но если форма электронная и мы не хотим зря занимать место, можно воспользоваться раскрывающимся списком. Что это такое, знает любой, кто имел дело с Windows дольше получаса: строка, в которой что-то на писано, а справа — небольшая кнопка со стрелкой. Если щелкнуть на стрелке, вниз "выпадает" список. Щелкаем на одном из его пунктов — и список сворачи вается обратно, а в строке появляется выбранный пункт.

Как сделать подобный список на HTML-странице? Сам список создается с помощью дескриптора и Вообще-то, дескриптор

Формы Как видим, система — работает просто:

ботчику передается имя дескриптора , а их вид определяется зна чением параметра type. Так, значение text соответствует строке ввода, file — строке выбора файла, password — строке ввода пароля;

значения submit, reset и button определяют кнопки различных видов, а значения checkbox и radio — два типа списков: список вариантов и список-переключатель, соответственно.

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

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

Наконец, еще один распространенный элемент электронных форм — раскры вающийся список — создается с помощью конструкции HTML, образуемой деск рипторами б) type=reset value=Cancel> Формы в)

а) длинный б) в) name=ltext длинный текст >Введите длинный г) длинный д) name=ltext длинный 7. Какой или какие из следующих списков позволяют выбрать несколько ва риантов?

type=checkbox

© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.