Что такое HTTP 13 страница

Чтобы иметь дело с данными HTML-форм, необходимо уметь писать скрипты (они называются CGI-скриптами (CGI расшифровывается как Common Gateway Interface) ii могут быть написаны на самых разных языках программирования). Из этой книги вы вряд ли узнаете достаточно много информации, чтобы создавать сложные сжрипты. Тем не менее мы обсудим некоторые вопросы, связанные с этим, в главе 16. Элементы HTML-форм могут использоваться совместно с JavaScript, это обсуждается в главах 17 и 18.

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

Рис. 15.1. Форма может использоваться для опросов посетителей сайта

Элемент <form>

Формы создаются с помощью специального элемента <form>, который является контейнером для других элементов. Общая схема применения контейнера следующая:

<form method="get_или_post" action="URL назначения данных">
...элементы формы...
</form>

Простейший элемент <form> должен иметь два атрибута: method и action. Что они означают? Атрибут method определяет способ отправки данных на сервер. Возможные значения: post или get. Метод get означает, что данные формы будут добавлены в конец URL назначения. В большинстве случаев это накладывает серьезные ограничения на размеры данных (чаще всего не более 100 символов). Впрочем, если форма состоит из одного-двух элементов и важно передавать данные с высокой скоростью, то используется именно get. Например:

<form method="get" action="/cgi-bin/search">

Если же вы собираетесь поместить большое количество данных в большую форму, метод get использовать не стоит. Для таких случаев существует post, который посылает данные отдельно и не имеет практического ограничения на их размер. Открывающий тег элемента <form> при использовании post выглядит так:

<form method="post" action="/cgi-bin/survey.pl">

Вторым атрибутом <form> является action. Он должен содержать URL скрипта, который будет обрабатывать полученные данные. Очень часто скрипты хранятся в директориях под названием bin/ или cgi-bin/ на сервере. (В главе 16 скрипты обсуждаются более детально.)

Примером элемента, задающего границы формы, может быть следующий код:

<form method="post" action=
"http://www.fakecom.net/cgi-bin/survey.pl">
</form>

Как и любой другой контейнер, открывающий и закрывающий теги <form> и </form> целиком определяют форму. Так, например, <р> и </р> полностью определяют абзац. Конечно, нельзя сказать, что эти теги делают многое, однако они действительно определяют элемент целиком. Кроме того, следует помнить, что формы не могут быть вложенными. Перед тем как начать новую форму, необходимо поставить закрывающий тег предыдущей.

Другие атрибуты <form>

Кроме двух базовых параметров, элемент <form> может иметь некоторые дополнительные. Ни один из них не является жизненно важным для существования формы, тем не менее многие из них могут оказаться полезными в некоторых случаях. (Если вы уже готовы приступить к написанию собственных форм, можете перейти непосредственно к разделу «Создание форм».)

Одним из этих атрибутов является enctype, задающий тип передаваемых данных. Следует заботиться о его включении в элемент <form> только в том случае, если вы просите пользователя прислать на сервер какой-либо файл (с использованием специального элемента input, речь о котором впереди). В этом случае следует указать следующее значение: enctype="multipart/form-data".

Атрибуты name и id можно применять для идентификации форм при использовании скриптов или таблиц стилей. Помните, что атрибут i d является совместимым со стандартом XHTML, a name — это лишь дань старым традициям. Надежнее всего использовать оба атрибута:

name="myform" id="myform"

У элемента <form> может быть еще несколько атрибутов. Например, accept содержит список типов файлов, разделенных запятыми, которые сервер способен корректно обработать. При этом следует использовать МIMЕ-имена типов: image/jpg; video/quicktime и т. п. Список всех обозначений типов можно найти здесь: http:// www.isi-edu/in-notes/iana/assignments/media-types/media-types. В отдельных случаях, когда вы просите пользователя прислать вам какой-нибудь файл, браузер может сверять его тип со значениями атрибута accept. Если обнаружится, что тип отсылаемого файла не входит в список, браузер может отказать в его передаче и вывести сообщение об ошибке.

Нечто похожее представляет собой и атрибут accept-charset, только здесь речь идет не о типе файла, а о кодировке. Например, если вы собираетесь принимать символы, специфичные для испанского языка, нужно указать: accept-charset="es". Список наименований кодировок можно найти по следующему адресу: http:// www.iana.org/assignments/character-sets.

СОВЕТ

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

Создание форм

Вы уже знаете, как обозначить границы формы, мы можем приступить к заполнению контейнера <form> содержимым. А это означает, что в форме появятся поля ввода, переключатели, флажки, кнопки и т. д. Причем, кнопки, например, совершенно необходимы: они нужны хотя бы для того, чтобы пользователь мог подтвердить свой выбор.

Текстовые поля и атрибуты

Одно из наиболее распространенных применений форм — это получение от пользователя некоторой текстовой информации, с помощью которой организуется обратная связь на сайте. Это могут быть замечания по оформлению или содержимому сайта, комментарии и т. п. Нужно определить пространство для ввода текста. Оно организуется с помощью элемента <textarea>. Можно установить число выводимых на экран колонок и строк, хотя на самом деле пользователь сможет ввести столько текста, сколько ему требуется. Это делается следующим образом:

<textarea name="name" гоws="число" соls="число">
Текст по умолчанию
</textarea>

Элемент <textarea> является контейнером. Внутри него помещается текст, который будет выводиться в текстовом поле по умолчанию. Например, некоторые указания по заполнению формы и, в частности, текстового поля. Пример:

<form method="post" action="/cgi-bin/forml.pl">
<textarea name-"comments" rows="4" cols="40">
Введите здесь свои комментарии.
Не забудьте указать свой e-mail, если хотите получить ответ.
</textarea>
</form>

Текст, содержащийся внутри <textarea>, появится в текстовом поле в том же виде, в котором он был набран. Обратите внимание, на рис. 15.2 этот текст выглядит так, как будто был использован контейнер <рге>. То есть отображаются все пробелы и переводы строк, которые были в исходном коде.

Рис. 15.2. Элемент <textarea> в действии

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

Атрибуты rows и cols могут принимать любые численные значения, но следует выбирать их с таким расчетом, чтобы текстовое поле поместилось целиком в обычном окне браузера. Браузеры карманных компьютеров и некоторые текстовые браузеры могут выводить от 40 до 60 колонок.

Среди прочих атрибутов <textarea> есть такой, как readonly. (Для совместимости со стандартом XHTML следует писать readonly="readonly".) Этот атрибут делает невозможным редактирование текстовой области. В этом случае на сервер отсылается тот текст, который заключен между открывающим и закрывающим тегами элемента <textarea>.

Элемент <input>

Тот элемент, который мы только что рассмотрели, <textarea>, — это базовый инструмент ввода данных. Пользователь может вводить произвольный текст определенного размера. Однако очень часто требуется наложить определенные ограничения на количество ответов, которые могут дать пользователи. Произвольный текст очень сложно программно обрабатывать. Гораздо проще работать с ограничинным набором заранее известных значений. В этом вам поможет элемент <i nput>. Он позволяет создать один из нескольких управляющих элементов, среди которых следующие:

• Поле ввода (type="text"). Это почти то же самое, что и текстовое поле, но состоит из одной небольшой строки. Обычно используется для ввода имени или адреса пользователя.
• Пароль (type="password"). В этом специальном поле ввода данные, печатаемые пользователем, не выводятся на экран.
• Флажок (type="checkbox"). Пользователь имеет возможность «установить» или «снять» флажок.
• Переключатель (type="radio"). Пользователь может выбрать только одно значение нз ряда предлагаемых.
• Скрытое поле (type="hidden"). Это специализированный элемент ввода, в котором ничего нельзя ввести. На сервер посылается некое значение, заданное по умолчанию.
• Управляющая кнопка (type="button", type="reset" или type="submit"). Кнопки, предназначенные для подтверждения или отмены ввода и для других целей.

Формат элемента <input>:

<input tуре="один_из_указанных_типов" name=
"имя" size="число" mахlеngth="число" />

Обязательными являются только атрибуты type и name. Некоторые вариации на тему стандартного <input> позволяют включать еще и атрибут value, который используется для установки одного из возможных значений. Кроме того, существует ряд дополнительных атрибутов, но они в основном являются специфическими для каких-либо элементов управления, поэтому о них мы поговорим позднее.

Поле ввода

Первое значение атрибута type, которое мы рассмотрим, — это text. Создается одна строка ввода, длину которой можно назначить с помощью size. Обратите внимание на то, что размер поля ввода и максимальное количество символов, которое может ввести пользователь, задаются отдельно и могут отличаться. То есть можно создать такое поле, размеры которого больше или (что обычно и делается) меньше максимально возможной длины вводимой строки. Вот пример поля ввода:

Фамилия: <input type""text" name="last_name"

size="40" maxlength»"40" />

Если при этом правильно описать форму с помощью <form>, то результат вы видите на рис. 15.3. При желании с помощью атрибута value можно задать значение поля ввода по умолчанию, как показано:

Город: <input="text" name="city"
size="50" maxlength="50" value="Caнкт-Петepбypr" />

Поля ввода пароля

Установка значения type="password" почти равноценна установке type="text". Разница заключается лишь в том, что в поле ввода пароля обычно не печатается то, что набирает пользователь. Оно либо остается пустым, либо заполняется вместо букв звездочками, кружочками или другими значками, позволяющими, с одной стороны, понять, сколько букв уже введено, с другой — скрыть от посторонних глаз сам пароль. Вот пример использования поля ввода пароля:

Введите имя пользователя:
<input type-"text" name="username" size="25"maxlength="25" />
Введите пароль:
<input type="password" name="passwordl" size="10"

maxlength="10" />

Набираемые пользователем символы отображаются в окне браузера так, как это показано на рис. 15.4.

Рис. 15.3. Значение text атрибута type

Рис. 15.4. В поле ввода пароля символы заменяются значками

Следует отметить, что единственная «защита», применяемая в данном случае, — это использование пресловутых «значков». Что касается самого пароля, то он спокойно передается браузером в явном виде.

СОВЕТ

Улучшить защиту можно, используя защищенное HTTP-соединение (протокол в этом случае будет называться SHTTP), при котором передаваемые данные шифруются и не могут быть перехвачены. Серверы с защитой кратко рассматриваются в главе 22.

Флажки

Если установить значение атрибута type="checkbox", то появится флажок (выключатель), позволяющий задавать логические значения каких-либо параметров. В основном их применяют, когда возможны только два состояния переменной. Можно заранее определить начальное состояние флажка, то есть установлен он или снят. Для этого применяется атрибут checked="checked". Например:

Откуда вы узнали о нас?<br />
<input type="checkbox" name="web" checked="checked" />

Поисковая программа в Интернете или Интернет-ссылка.
<input type="checkbox" name="advert" />Реклама по радио
или телевидению.
<input type="checkbox" name="press" />Из газеты. <br />
Включите флажок, чтобы подписаться на нашу рассылку:
<input type="checkbox" name="mailing" />

В этом примере все флажки являются независимыми. Например, можно установить одновременно несколько флажков, и это будет вполне нормальным действием. Первые три флажка представляют собой единую группу, поскольку являются возможными ответами на один и тот же вопрос. Четвертый флажок стоит несколько отдельно, поскольку с первыми тремя он никак не связан (рис. 15.5).

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

Переключатели

Как и флажки, переключатели (type="radio") предназначены для осуществления выбора из заданного набора значений. Разница между ними заключается в том, что переключатели заставляют пользователя выбрать единственное подходящее значение из нескольких, тогда как флажок означает двоичный выбор (Истина/ Ложь).

Конечно, radio чем-то напоминает checkbox, однако есть одно существенное различие: вся группа переключателей, сколько бы их ни было, должна иметь один и тот же name. To есть не один переключатель, а все вместе задают переменную.

Каждый переключатель должен также иметь атрибут value, который, собственно, и задает значение переменной, имя которой определяется с помощью name. Рассмотрим следующий пример:

Откуда вы узнали о нас?<bг />
<input type="radio" name="where" value="web"

checked="checked" />Поисковая программа в
Интернете или Интернет-ссылка.
<input type="radio" name="where" value="advert" />

Реклама по радио или телевидению.
<input type="radio" name="where" value="press" />

Из газеты.
<input type="radio" name="where" value="other" />

Другое.

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

Рис. 15.6. Группы переключателей дают возможность выбрать единственное значение из набора

Скрытые поля

Этот «элемент ввода» (input) на деле оказывается не имеющим никакого отношения к вводу данных. Все, что он делает, — это передает на сервер заранее заданное значение. Зачем это нужно? Например, если вы используете один и тот же скрипт для обработки нескольких форм, то с помощью скрытого поля можно сообщить, какая именно форма сейчас будет передавать данные. Элемент <input type=" hidden" />может иметь атрибуты name и value. Например:

<input type="hidden" name="identify" value="form2" />

СОВЕТ

«Скрытый» в данном случае означает невидимый на странице, поскольку любой пользователь может просмотреть исходный HTML-код и убедиться, что «скрытый элемент» присутствует там в явном виде. Помните об этом обстоятельстве.

Кнопка очистки

Кроме различных полей ввода, переключателей и флажков, элемент <input> может задавать разного рода кнопочки. При установке значения type="reset" будет автоматически создана кнопка для очистки формы. При ее нажатии все параметры приходят в исходное состояние, то есть, попросту говоря, очищается все, что ввел или выбрал пользователь. Например:

<input type="reset" vаluе="0чистить форму" />

Атрибут value не является обязательным, он позволяет изменить надпись на кнопке. Если его опустить, на кнопке будет надпись по умолчанию Reset.

Кнопка подтверждения

Можно создать и кнопку, которая, наоборот, подтверждает все сделанные изменения и готовит данные формы к отправке на сервер. Элемент <input type="submit"> может иметь всего один параметр val ue, с помощью которого можно изменить надпись на кнопке. Кнопка подтверждения предназначена только для отправки данных, введенных пользователем. Взгляните на следующие два примера:

<input type="submit" />
<input type="submit" vаluе="Поехали!" />

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

<input type="submit" value=" Подтверждение " />

Форма определит, как и куда отправлять данные, благодаря атрибутам method и action. Итак, создать кнопку подтверждения, оказывается, очень просто.

Изображение на кнопке подтверждения

Если вы хотите использовать графику на кнопке подтверждения, то можно установить значение атрибута type="image". В этом случае придется указать и URL, по которому содержится графический файл, и альтернативный текст (для текстовых браузеров). В итоге элемент будет выглядеть следующим образом:

<input type="image" src="images/buttons/submit.gif"

alt=" Подтвердить " />

Теперь рассмотрим, как создавать собственные кнопки.

Собственные кнопки

В стандартах, начиная с HTML 4.01, имеется еще один элемент, предназначенный специально для создания кнопок на форме, — это <button>. У него есть атрибут type, который может принимать три значения: reset, submit и image. Особенность этого элемента заключается в том, что он является контейнером, а значит, может содержать совершенно произвольную разметку. Например:

<button name="sumbit" type=*submit">
<span style="font-family: Courier; font-variant: small-caps:
font-size: 14рt>Отправить
</span>
</button>

<button name="reset" type="reset">
<img src="reset.gif" аlt="Очистить" />
</button>

У элемента <button> могут быть следующие атрибуты: name, type и value, при этом type требуется только для задания трех стандартных значений, о которых уже го ворилось ранее. Если вы хотите, чтобы ваш код находился в соответствии со стан дартами, включайте в элемент <button> атрибут name. На рисунке 15.7 показаны кнопки, созданные при помощи приведенного кода.

СОВЕТ

Лучше всего смотрятся на кнопках прозрачные GIF и PNG.

Рис. 15.7. Настраиваемые кнопки (элемент <button>) могут содержать разметку HTML
и информацию о стилях

Создание меню

Еще один вид элементов контроля — это меню. Если до сих пор речь шла в осном ном об элементе <input>, то тут все вертится вокруг элемента <select>. С егопо мощью и создаются выпадающие, прокручиваемые меню и т. п. В этих случаях пользователю предлагается сделать свой выбор, но не дается возможность ввести собственный текст. Обязательным является атрибут name, назначение которого уже должно быть понятно, а с помощью атрибута size можно задать количество одновременно выводимых на экран значений.

Обратите внимание: <select> является контейнером. Значения (определяются с помощью <option>) должны размещаться между открывающим и закрывающим тегами <select> и </select>. Когда пользователь выбирает какой-либо пункт меню, соответствующее значение присваивается переменной, определяемой открывающим тегом <select>.

Атрибут selected="se1ected" устанавливает значение по умолчанию в меню. Примером может быть следующий код:

Часто ли Вы посещаете этот сайт?
<select name="frequency">
<option selected="selected" value="first">Bпервые</option>
<option value="monthly">Ежемесячно</option>
<option value="weekly">Eжeнeдeльнo</option>
<option value="daily">E>Ежедневно</option>
</select>

Существует еще и такой атрибут, как si ze, с помощью которого можно установить количество показываемых строк. Просто замените первую строчку примера, который написан ранее, на:

<select name="frequency" size="4">

Оба примера показаны на рис. 15.8

.

Рис. 15.8. Выпадающее меню и прокручиваемый список — они реализуются с помощью атрибута size

В первом примере наведение мышки на меню приводит к «выскакиванию» нескольких строк. Во втором примере эти строки (количество которых устанавливается параметром size) появляются на экране сразу же после загрузке страницы.

Но что делать, если возникнет необходимость выбрать несколько пунктов меню одновременно? Для этого существует специальный атрибут элемента <select>. Синтаксис следующий: multiple="multiple". Он заставляет меню всегда выглядеть как прокручиваемый список, вне зависимости от того, какое значение присвоено атрибуту size, (size опускать все равно нельзя, поскольку с его помощью определяется, сколько строк будет в списке.) В качестве примера рассмотрим следующий код:

<р> 0 чем вы хотели бы узнать из статей* публикующихся на нашем сайте? (Выберите все. что вас интересует)</р>

<select name="topics" multiple="multiple">
<option value="upgrade"> Обновление компьютеров</option>

<option value="repair"> Ремонт компьютеров</option>

<option value="apps"> Практические
советы пользователям </option>
<option value="tricks"> Маленькие хитрости </option>
<option value="news"> Новости компьютерной индустрии </option>
<option value="rumor"> Обзоры новинок </option>
<option value="none" selected="selected"> Ничего

из перечисленного </option>
</select>

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

ПРИМЕЧАНИЕ

Разные браузеры могут работать с автоматическим выбором пункта меню по-разному. Одни по умолчанию будут пытаться передать неопределенное значение, другие выберут первое значение из списка. Чтобы не было подобных разночтений, а также для того, чтобы избежать проблем при обработке данных, указывайте значение selected="selected" в описании того пункта, который вам нравится больше всего.

Прежде чем закончить разговор об элементе <select> и о меню вообще, я хотел бы упомянуть еще кое-что. Существует, например, элемент <optgroup>. Он позволяет группировать несколько пунктов меню внутри одного <select>. Рассмотрите внимательно следующие примеры:

<р> 0 чем вы хотели бы узнать из статей,
публикующихся на нашем сайте? (Выберите все, что
вас интересует)</р>
<select name="topics" multiple="multiple">
<option value="upgrade"> Обновление компьютеров </option>
<option value="repair"> Ремонт компьютеров </option>
<option value="apps"> Практические советы пользователям

</option>
<option value="tricks"> Маленькие хитрости </option>
<option value="news"> Новости компьютерной индустрии </option>
<option value="rumor"> Обзоры новинок </option>
<option value="none" selected="selected"> Ничего

из перечисленного </option>
</select>

Ничего неправильного здесь нет, однако гораздо приятнее было бы разделить пункты по темам, особенно важно это сделать, если в будущем вы планируете увели чить список. Для этого используем элемент <optgroup>.

<р> 0 чем вы хотели бы узнать из статей,
публикующихся на нашем сайте? (Выберите все. что
вас интересует)</р>
<select name="toplcs" s1ze="15" multiple="multiple">
<optgroup label="Железо">
<option value="upgrade"> Обновление компьютеров </option>
<option value="repair"> Ремонт компьютеров </option>
</optgroup>
<optgroup lаbеl="Программы">
<option value="apps"> Практические советы пользователям

</option>
<option value="tricks"> Маленькие хитрости </option>
</optgroup>
<optgroup label="Новости">
<option value="news"> Новости компьютерной индустрии </option>
<option value="rumor"> Обзоры новинок </option>
</optgroup>

<option value="none" selected="selected"> Ничего

из перечисленного </option>
</select>

Если у вас установлен подходящий браузер, то он должен отобразить нечто подобное изображенному на рис. 15.9. Как видите, список стал выглядеть намного опрятнее. Имейте в виду, что далеко не все браузеры знают, что такое <optgroup>. Впрочем, ничего страшного в этом нет — в крайнем случае результатом будет обычный список без подзаголовков.

Рис. 15.9. Выпадающее меню и прокручиваемый список — все эти разновидности реализуются с помощью элемента <optgroup>

Пример полноценной формы

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

<form method="post" action="mailto
:[email protected]">
Имя: <input type="text" name=
"first_name" size="40" maxlength="40" /><br />
E-mail: <input type="text" name=
"e-mail" size="40" maxlength="40" /><br />
Откуда вы узнали об этом сайте?<br />
<input type="radio" name="where" value=
"web" checked="checked" />Поисковая программа в
Интернете или Интернет-ссылка.
<input type="radio" name="where"
value="advert" />Реклама по радио или телевидению.
<input type="radio" name="where" value="press"/>

Из газеты.
<input type="radio" name="where" value="other" />

Другое.
<р>Введите свои комментарии относительно нашего сайта
<textarea name="comments" rows="10" cols="40">
Текстовое поле для ввода комментариев и замечаний
</textarea></р>
Если хотите подписаться на нашу рассылку,
поставьте флажок <input type="checkbox"
name="mailing" /><br />
<button name="submit" type="submit">
<span style="font-family: Courier: font-variant:
</span>
</button>
<button name="reset" type="reset">
<span style="font-family: Courier; font-variant:
форму</sраn>
</button>
</form>

Дата добавления: 2014-12-29