Вступление

Формы по шагам

Оригинал этого файла взят с сайта stepbystep.htmlbook.ru, автор и разработчик — Влад Мержевич.

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

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

Документ может распространяться только на свободной основе. Любое коммерческое использование воспрещено.

Информация взята с сайта stepbystep.htmlbook.ru
Copyright © 2005 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru


Шаг 1. Добавление формы

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

Любая форма характеризуется следующими параметрами.

  1. Элементы формы, которые представляют собой стандартные поля для ввода информации.
  2. Кнопку отправки данных формы на сервер (кнопка SUBMIT).
  3. Адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы.

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега <INPUT> или другим, допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки SUBMIT, происходит запуск обработчика формы, которая получает введенную в форме информацию, а дальше делает с ней то, что предполагал разработчик. В качестве обработчика формы обычно выступает CGI-программа, заданная параметром action тега <FORM>. Аббревиатурой CGI (Common Gateway Interface, общий шлюзовый интерфейс) обозначается протокол, с помощью которого программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы. Наиболее популярны следующие языки — PHP, Perl, С++.

Для указания браузеру где начинается и заканчивается форма, используется контейнер <FORM>. Между открывающим и закрывающим тегами <FORM> и </FORM> можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. Документ может содержать несколько форм, но они не должны быть вложены одна в другую (пример 1.1).

Пример 1.1. Добавление формы в документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form name="form1">
Здесь размещаются элементы формы

<input type="submit">
</form>

<form name="form2">
Здесь размещаются элементы формы

<input type="submit">
</form>

</body>
</html>

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


2

Формы по шагам

Шаг. 2. Параметры формы

Каждая форма характеризуется некоторыми параметрами, которые указываются в теге <FORM>. Эти параметры задают имя формы, ее обработчик и метод отправки данных на сервер, а также некоторые другие характеристики.

ACTION

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер (пример 2.1). В качестве обработчика может выступать CGI-программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Пример 2.1. Указание обработчика формы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<form action="http://www.htmlbook.ru/download/file.php">

...

</form>
</body>
</html>

В качестве обработчика можно указать также адрес электронной почты, начиная его с ключевого слова mailto. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте параметр enctype="text/plain" в теге FORM (пример 2.2).

Пример 2.2. Отправка формы на адрес электронной почты

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<form action="mailto:vlad@htmlbook.ru" enctype="text/plain">

...

</form>
</body>
</html>

ENCTYPE

Устанавливает тип данных отправляемых вместе с формой. Обычно устанавливать значение параметра enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (<INPUT type="file">), следует определить параметр enctype как multipart/form-data (пример 2.3). Допускается также устанавливать сразу несколько значений, разделяя их запятыми.

Пример 2.3. Изменение типа данных формы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<form action="/cgi-bin/handler.cgi" enctype="multipart/form-data" method="POST">

...

</form>
</body>
</html>

METHOD

Метод сообщает серверу о цели запроса. Значение параметра method не зависит от регистра и его следует указывать без кавычек. Различают два метода — GET и POST. Существуют и другие методы, но они пока мало используются.

GET

Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.

POST

Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д. (пример 2.4).

Пример 2.4. Использование метода POST

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<form action="/cgi-bin/handler.cgi" method="POST">

...

</form>
</body>
</html>

Замечание

Хотя параметры тегов, в том числе и <FORM> не чувствительны к регистру, традиционно значение аргумента method пишется заглавными буквами.

NAME

Определяет уникальное имя формы. Как правило, имя формы используется для доступа к ее элементам через скрипты (пример 2.5). В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в параметре name.

Пример 2.5. Обращение к данным формы по их имени

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function validForm() {
alert("Имя " + document.forms('form1').nick.value)
}
</script>
</head>
<body>
<form action="/cgi-bin/handler.cgi" name="form1">
Имя: <input type="text" name="nick">
<input type="button" onClick="validForm()" value="OK">
</form>
</body>
</html>

TARGET

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

В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. Зарезервированные имена следующие (пример 2.6).

_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно.
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Пример 2.6. Открытие результатов обработчика формы в новом окне

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<form action="/cgi-bin/handler.cgi" taget="_blank">

...

</form>
</body>
</html>


3

Формы по шагам

Шаг 3. Элементы форм

Форма представляет собой лишь контейнер для размещения объектов, которые дублируют элементы интерфейса операционной системы: кнопки, поле со списком, переключатели, флажки и т.д. В табл. 3.1 представлены различные элементы форм.

Табл. 3.1. Элементы форм
Название | Описание | Пример
Однострочное текстовое поле | Предназначено для ввода строки символов с помощью клавиатуры.
Поле для пароля Обычное текстовое поле, но отличается тем, что все символы отображаются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
Многострочный текст | Область, в которой можно вводить несколько строк текста.
Кнопка | Элемент формы, на который нужно нажимать.
Кнопка SUBMIT | После нажатия на эту кнопку данные формы отправляются на сервер и обрабатываются программой, указанной параметром action тега FORM.
Кнопка RESET | При нажатии на эту кнопку, данные формы возвращаются в первоначальное значение.
Переключатели (radiobutton) | Используются для выбора одного варианта из предложенных.
Флажки (checkbox) | Используются для выбора двух и более вариантов из предложенных.
Поле со списком | Предназначен для выбора одного или нескольких значений из списка.
Скрытое поле | Скрытое поле не отображается на странице и прячет свое содержимое от пользователя.
Поле с изображением | Аналогично по действию кнопке Submit, но представляют собой рисунок.
Отправка файла | Создает поле для ввода имени файла, который пересылается на сервер.

Каждый элемент формы имеет свои собственные параметры, которые влияют на его вид.


4

Формы по шагам

Шаг 4. Однострочное текстовое поле

Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.

<input type="text" параметры>

Параметры поля перечислены в табл. 4.1.

Табл. 4.1. Параметры однострочного текстового поля
Параметр | Описание
size | Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали.
maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот параметр опустить, то можно вводить строку длинее самого поля.
name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value | Начальный текст, содержащий в поле.

Создание текстового поля с разными параметрами показано в примере 4.1.

Пример 4.1. Текстовое поле

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php">
<b>Как ваше имя?</b><br>
<input type="text" maxlength="25" size="40">
</form>

</body>
</html>

В результате получим следующее.

Как ваше имя?


5

Формы по шагам

Шаг 5. Поле для пароля

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

<input type="password" параметры>

Параметры поля перечислены в табл. 5.1.

Табл. 5.1. Параметры поля с паролем
Параметр | Описание
size | Ширина текстового поля, которое определяется числом звездочек моноширинного шрифта.
maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот параметр опустить, то можно вводить строку длинее самого поля.
name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value | Начальный текст, содержащий в поле. Этот текст не отображается и заменяется звездочками.

Создание поля для пароля показано в примере 5.1.

Пример 5.1. Поле для пароля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<form action="handler.php">
<b>Логин:</b> <input type="text" maxlength="25" size="40" name="text"><br>
<b>Пароль:</b> <input type="password" maxlength="15" size="40" name="pass">
</form>
</body>
</html>

Результат данного примера показан ниже.

Логин:
Пароль:

Замечание

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


6

Формы по шагам

Шаг 6. Многострочный текст

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

Синтаксис создания следующий.

<textarea параметры>
текст
</textarea>

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.

Допустимые параметры перечислены в табл. 6.1.

Табл. 6.1. Параметры многострочного текста
Параметр | Описание
cols | Ширина поля в символах.
disabled | Блокирует доступ и изменение элемента.
name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly | Устанавливает, что поле не может изменяться пользователем.
rows | Высота поля в строках текста.
wrap | Параметры переноса строк.

Создание поля многострочного текста показано в примере 6.1.

Пример 6.1. Многострочный текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php">
<b>Введите ваш отзыв:</b><br>
<textarea rows="10" cols="45"></textarea>
</form>

</body>
</html>

Результат данного примера показан ниже.

Введите ваш отзыв:


7

Формы по шагам

Шаг 7. Кнопки

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

Рассмотрим вначале добавление кнопки через <INPUT> и его синтаксис.

<input type="button" параметры>

Параметры кнопки перечислены в табл. 7.1.
Табл. 7.1. Параметры кнопок
Параметр | Описание
name | Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value | Значение кнопки и одновременно надпись на ней.

Создание текстового поля с разными параметрами показано в примере 7.1.

Пример 7.1. Добавление кнопки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php">
<input type="button" name="press" value=" Нажми меня нежно ">
</form>

</body>
</html>

В результате получим следующее.

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

Второй способ создания кнопки основан на использовании тега <BUTTON>. Он по своему действию напоминает результат, получаемый с помощью тега <INPUT>. В отличие от этого тега, <BUTTON> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения и таблицы.Ниже показаны разные виды кнопок, полученные с помощью указанного тега.

В примере 7.2 показано создание кнопки с текстом и рисунком.

Пример 7.2. Кнопки, созданные с помощью тега <BUTTON>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form>
<p align="center">
<button>Кнопка с текстом</button>
<button><img src="/images/umbrella.gif" width="25" height="32"> Кнопка с рисунком</button>
</p>
</form>

</body>
</html>

В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера <BUTTON>, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования <INPUT>, ширину кнопки изменить не удастся.

Кнопка SUBMIT

Для отправки данных на сервер предназначена специальная кнопка SUBMIT. Ее вид ничем не отличается от других кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной параметром action тега <FORM>. Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, гостевых книг, тестов и многих других вещей.

Синтаксис создания кнопки SUBMIT зависит от используемого тега <INPUT> или <BUTTON>.

<input type="submit" параметры>
<button type="submit">Надпись на кнопке</button>

Параметры такие же, что и у обычных кнопок (пример 7.3).

Пример 7.3. Кнопка для отправки данных на сервер

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php" method="GET">
...
<input type="submit">
</form>

</body>
</html>

Параметр name для этого типа кнопки может быть опущен. Если значение параметра value не указывать, на кнопке автоматически появится надпись «Подача запроса» для русской версии браузера Internet Explorer, «Отправить запрос» для русской версии Firefox или «Submit Query» для Netscape.

Кнопка RESET

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset" параметры>
<button type="reset">Надпись на кнопке</button>

В примере 7.4 показана форма с одним текстовым полем, которое уже содержит предварительно введенный текст с помощью параметра value тега <INPUT>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нем снова появится надпись «Введите текст».

Пример 7.4. Кнопка для очистки формы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php">
<input type="text" value="Введите текст">
<p><input type="submit" value="Отправить"><input type=reset value="Очистить"></p>
</form>

</body>
</html>

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


8

Формы по шагам

Шаг 8. Переключатели

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

<input type="radio" name="имя" параметры>

Параметры переключателей перечислены в табл. 8.1.
Табл. 8.1. Параметры переключателей
Параметр | Описание
checked | Предварительное выделение переключателя. По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не даст особого результата. В любом случае, будет отмечен элемент, находящийся в коде HTML последним.
name | Имя группы перелючателей для идентификации поля. Поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым.
value | Задает, какое значение будет отправлено на сервер. Здесь уже каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.

Создание группы переключателей показано в примере 8.1.

Пример 8.1. Создание переключателей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php">
<b>Какое у вас состояние разума?</b><br>
<input name="dzen" type="radio" value="nedzen"> Не дзен<br>
<input name="dzen" type="radio" value="dzen"> Дзен<br>
<input name="dzen" type="radio" value="pdzen"> Полный дзен
<p><input type="submit" value="Выбрать"></p>
</form>

</body>
</html>

В результате получим следующее.

Какое у вас состояние разума?
Не дзен
Дзен
Полный дзен

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


9

Формы по шагам

Шаг 9. Флажки

Флажки используют, когда необходимо выбрать два или более варианта из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом.

<input type="checkbox" параметры>

Параметры флажков перечислены в табл. 9.1.
Табл. 9.1. Параметры флажков
Параметр | Описание
checked | Предварительное выделение флажка.
name | Имя флажка для его идентификации обработчиком формы.
value | Задает, какое значение будет отправлено на сервер.

Использование флажков показано в примере 9.1.

Пример 9.1. Создание флажков

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php">
<b>С какими операционными системами вы знакомы?</b><br>
<input type="checkbox" name="option1" value="a1" checked> Windows 95/98<br>
<input type="checkbox" name="option2" value="a2"> Windows 2000<br>
<input type="checkbox" name="option3" value="a3"> System X<br>
<input type="checkbox" name="option4" value="a4"> Linux<br>
<input type="checkbox" name="option5" value="a5"> X3-DOS
<p><input type="submit" value="Выбрать"></p>
</form>

</body>
</html>

В результате получим следующее.

С какими операционными системами вы знакомы?
Windows 95/98
Windows 2000
System X
Linux
X3-DOS


10

Формы по шагам

Шаг 10. Поле со списком

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

Поле со списком создается следующим образом.

<select параметры>
<option параметры>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
</select>

Тег <SELECT> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования параметра size тега <SELECT>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <OPTION>, который должен быть вложен в контейнер <SELECT>.

Список множественного выбора Раскрывающийся список

Параметры тега <SELECT>

Рассмотрим параметры тега <SELECT>, с помощью которых можно изменять вид и представление списка.

MULTIPLE

Наличие параметра multiple сообщает браузеру отображать содержимое элемента <SELECT> как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки. Когда size=1 список превращается «крутилку», как показано ниже, но выбирать с помощью нее одновременно несколько пунктов списка становится неудобно.

Параметр size отсутствует Параметр size равен 1

Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.

В примере 10.1 показано создание списка множественного выбора.

Пример 10.1. Список множественного выбора

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php">
<select name="select" size="3" multiple>
<option selected value="s1">Чебурашка</option>
<option value="s2">Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s4">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить">
</form>

</body>
</html>

NAME

Определяет уникальное имя элемента <SELECT>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

SIZE

Устанавливает высоту списка. Если значение параметра size равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу <SELECT> при size=1 список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором. Значение по умолчанию зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то значение параметра size равно 1.

Параметры тега <OPTION>

Тег <OPTION> также имеет параметры, влияющие на вид списка, они представлены далее.

SELECTED

Делает текущий пункт списка выделенным. Если у тега <SELECT> добавлен параметр multiple, то можно выделять более одного пункта.

VALUE

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задается параметром name тега <SELECT>, а значение — параметром value выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным.

Создание списка показано в примере 10.2.

Пример 10.2. Использование списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php">
<b>Выбери персонажа</b><br>
<select name="hero">
<option value="s1">Чебурашка</option>
<option value="s2" selected>Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s3">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить">
</form>

</body>
</html>

В примере создается список из четырех пунктов с именем hero, причем второй пункт из них предварительно выделен через параметр selected тега <OPTION>. Результат примера показан ниже.

Выбери персонажа

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <OPTGROUP>. Он представляет собой контейнер, внутри которого располагаются теги <OPTION> объединенные в одну группу. Особенностью тега <OPTGROUP> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется параметр label, как показано в примере 10.3.

Пример 10.3. Группирование элементов списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php">
<select>
<optgroup label="Русская кухня">
<option value="r1">Закуска Барская</option>
<option value="r2">Раки, фаршированные по-царски</option>
<option value="r3">Биточки в горшочке</option>
</optgroup>

<optgroup label="Украинская кухня">
<option value="u1">Галушки славянские</option>
<option value="u2">Пампушки украинские</option>
<option value="u3">Жаркое по-харьковски</option>
</optgroup>
</select>
<p><input type="submit" value="Отправить"></p>
</form>

</body>
</html>

Результат данного примера показан ниже.


11

Формы по шагам

Шаг 11. Скрытое поле

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

Синтаксис создания скрытого поля.

<input type="hidden" параметры>

Параметры перечислены в табл. 11.1.
Табл. 11.1. Параметры скрытого поля
Параметр | Описание
name | Имя поля для его идентификации обработчиком формы.
value | Значение поля, определяющее, какая информация будет отправлена на сервер.

Пример использования скрытых полей приведен в примере 11.1.

Пример 11.1. Использование скрытого поля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<form action="handler.php" method="POST">
<b>Напишите любимое слово (никакие данные не будут передаваться на сервер!):</b><br>
<input type="text" size="25" name="word">
<input type="hidden" name=UserName value="Vasya">
<input type="hidden" name="password" value="pupkin"><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>

В данном примере показано создание двух скрытых полей, одно из них носит имя UserName и получает значение Vasya, а второе именуется password со значением pupkin. В результате отправки формы обработчику, указанному в параметре action, программа может легко прочитать эти данные и интерпретировать их по усмотрению разработчика.


12

Формы по шагам

Шаг 12. Поле с изображением

Поле с изображением аналогично по действию кнопке SUBMIT, но представляет собой рисунок. Это расширяет возможности дизайнерских изысков по оформлению формы. Когда пользователь нажимает на рисунок, данные формы отправляются на сервер и обрабатываются программой, заданной параметром action тега <FORM>.

Изображение в форме создается следующим образом.

<input type="image" параметры>

Параметры перечислены в табл. 12.1.
Табл. 12.1. Параметры поля с изображением
Параметр | Описание
align | Определяет выравнивание изображения.
alt | Альтернативный текст для кнопки с изображением.
border | Толщина рамки вокруг изображения в пикселах.
name | Имя поля для обращения к нему из скриптов или для получения значения обработчиком формы.

Хотя по своему назначению указанное поле похоже на кнопку SUBMIT, его параметры совпадают с параметрами тега <IMG>, который добавляет изображение на веб-страницу.

В примере 12.1 показано использование поля с изображением.

Пример 12.1. Кнопка с изображением

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="handler.php">
<b>Введите ваше имя:</b><br>
<input type="text" size="35">
<input type="image" src="/images/imgbutton.gif" width="91" height="25" align="middle" alt="Отправить форму на сервер">
</form>

</body>
</html>

Результат данного примера показан ниже.

Введите ваше имя:

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


13

Формы по шагам

Шаг 13. Отправка файла

Для того чтобы можно было отправить на сервер файл, используется специальное поле. Такой элемент формы отображается как текстовое поле, рядом с которой располагается кнопка Обзор (Browse... для английской версии Netscape или Choose в браузере Opera). При нажатии на эту кнопку открывается окно для выбора файла, где можно указать, какой файл пользователь желает использовать.

Синтаксис поля для отправки файла следующий.

<input type="file" параметры>

Параметры перечислены в табл. 13.1.
Табл. 13.1. Параметры поля для отправки файла
Параметр | Описание
size | Ширина текстового поля, которое определяется числом символов моноширинного шрифта.
maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле.
name | Имя поля, используется для его идентификации обработчиком формы.

Создание поля для отправки файла показано в примере 13.1.

Пример 13.1. Создание поля для отправки файла

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form enctype="multipart/form-data" method="POST">
<b>Укажите файл для отправки на сервер:</b><br>
<input type="file" size="30"><br>
<input type="submit" value="Отправить">
</form>

</body>
</html>

Результат данного примера показан ниже.

Укажите файл для отправки на сервер:

Параметр формы enctype="multipart/form-data" нужен для корректной передачи файла. Если его не указать, будет передан лишь путь к файлу.

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


14

Формы по шагам

Шаг 14. Переход между полями с помощью табуляции

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

Замечание

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

Следующие поля формы (теги) могут иметь параметр tabindex: <BUTTON>, <INPUT>, <SELECT>, <TEXTAREA>. В качестве значения принимается число, которое представляет собой шаг перехода. Так, номер 1 означает, что это поле первое получит фокус, номер 2 будет идти следующим и т.д. В примере 14.1 показано применение параметра tabindex когда поля формы размещаются в ячейках таблицы. Если значение tabindex не указано, то по умолчанию переход по элементам формы происходит так, как они расположены в коде HTML, т.е. сверху вниз.

Пример 14.1. Использование параметра tabindex

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<body>
<form name="bio" method="POST" action="handler.php">
<table width="100%" cellspacing="0" cellpadding="4">
<tr valign="top">
<td width="50%">Ваше имя:<br> <input name="name" type="text" tabindex="1" size="30">
</td>
<td>Фамилия:<br> <input name="lastname" type="text" tabindex="3" size="30">
</td>
</tr>
<tr valign="top">
<td>Телефон:<br>
<input name="tel" type="text" tabindex="2" size="30"> </td>
<td>Пол:<br>
<select name="gender" tabindex="4">
<option selected>Мужской</option>
<option>Женский</option>
<option>Гермафродит</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>

Результат примера показан ниже. Обратите внимание, что с помощью табуляции фокус вначале получает поле, где надо ввести имя, а затем поле для ввода телефона.
Ваше имя:
 Фамилия:
Телефон:
 Пол:


15

Формы по шагам

Шаг 15. Применение тега LABEL

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

Для связывания элемента формы и текста в теге <LABEL> используется параметр for, аргументом для которого служит идентификатор элемента, задаваемого атрибутом id (пример 15.1).

Пример 15.1. Синтаксис тега <LABEL>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form>
<input type="radio" name="psi" id="radio1"><label
    for="radio1">Импритинг</label><br>
<input type="radio" name="psi" id="radio2"><label
    for="radio2">Реимпритинг</label>
</form>

</body>
</html>

Результат данного примера показан ниже.

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

Чтобы понять, в чем же удобство применения тега <LABEL>, рассмотрим пример, где в форму добавлены два флажка. Описание к одному флажку будет задано как обычный текст, а ко второму — с использованием <LABEL> (пример 15.2).

Пример 15.2. Использование тега <LABEL>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form>
<input type="checkbox" id="t1"> Поставьте галочку<br>
<input type="checkbox" id="t2"> <label for="t2">Нажмите на этот текст, чтобы поставить галочку</label>
</form>

</body>
</html>
Результат данного примера показан ниже.
Поставьте галочку

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

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

Горячие клавиши

Для управления переключателем и флажком с помощью клавиатуру применяется параметр accesskey тега <LABEL>. Для него необходимо указать символ, который в сочетании с клавишей <Alt> будет активизировать элемент. В примере 15.3 показано, как для переключателя задается горячая клавиша.

Пример 15.3. Использование параметра accesskey

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form>
<input type="checkbox" id="t1"><label for="t1" accesskey="q">Нажмите <Alt>+<q>, чтобы активировать переключатель</label>
</form>

</body>
</html>

Результат данного примера показан ниже.

Учтите, что параметр accesskey корректно работает только в браузере Internet Explorer. Кроме того, некоторые горячие клавиши уже используются браузером для своих целей.


16

Формы по шагам

Шаг 16. Разделение формы на группы

При создании сложной формы не обойтись без визуального отделения одного логического блока от другого. Этого можно добиться, используя внутри тега <FORM> сочетания тегов и стилей. Например, элементы формы можно выделить, если использовать для них фоновый цвет или рамку, задавая их через CSS. Кроме того, существует и другой подход, который состоит в применении тега <FIELDSET>. Этот контейнер группирует элементы формы, отображая вокруг них рамку (пример 16.1).

Пример 16.1. Использование тега <FIELDSET>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form>
<fieldset>
<b>Работа со временем</b><br>
<input type="checkbox" value="t1"> Создание пунктуальности (никогда не будете никуда опаздывать).<br>
<input type="checkbox" value="t2"> Излечение от пунктуальности (никогда никуда не будете торопиться).<br>
<input type="checkbox" value="t3"> Изменение восприятия времени.
</fieldset>
</form>

</body>
</html>

Результат выполнения данного примера показан ниже.

Работа со временем
Создание пунктуальности (никогда не будете никуда опаздывать).
Излечение от пунктуальности (никогда никуда не будете торопиться).
Изменение восприятия времени.

Чтобы добавить к рамке специальный заголовок применяется контейнер <LEGEND>, который должен располагаться в теге <FIELDSET>. Внутри тега <LEGEND> допустимо использовать текст и теги форматирования, вроде <B>, <I>, <SUP>, <SUB>, а также стили (пример 16.2).

Пример 16.2. Использование тега <LEGEND>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form>
<fieldset>
<legend style="font-weight: bold">Изменение убеждений</legend>
<input type="checkbox value="t1"> Изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм).<br>
<input type="checkbox" value="t2"> Изменение веры в непогрешимость любимой партии.<br>
<input type="checkbox" value="t3"> Убеждение в том, что инопланетяне существуют.<br>
<input type="checkbox" value="t4"> Выбор политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).<br>
<input type="checkbox" value="t5"> Повышение веры в собственные способности.<br>
</fieldset>
</form>

</body>
</html>

Любые пробелы в теге <LEGEND> будут проигнорированы, если вы желаете их непременно добавить, используйте символ неразделяемого пробела &nbsp;.

При использовании тегов <FIELDSET> и <LEGEND> учтите, что они работают в браузерах Internet Explorer 4, Netscape 6, Opera 5 и старше. Также результат работы в разных браузерах будет несколько различаться, как показано на рис. 16.1 — 16.3.

Рис. 16.1. Отображение в браузере Internet Explorer 6

Рис. 16.1. Отображение в браузере Internet Explorer 6

Рис. 16.2. Браузер Netscape 7

Рис. 16.2. Браузер Netscape 7

Рис. 16.3. Браузер Opera 7

Рис. 16.3. Браузер Opera 7

Из рисунков видно, что для браузера Internet Explorer рамка получается цветная и с закругленными углами. Для остальных браузеров цвет рамки по умолчанию черный, а цвет заголовка совпадает с цветом текста. Кроме того, Opera «забывает» о полях вокруг текста, из-за чего текст «налипает» на рамку. Цвет рамки группы поменять не удастся, а вот отступы вокруг текста и цвет заголовка изменяются с помощью стилей (пример 16.3).

Пример 16.3. Изменение вида заголовка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
FIELDSET {
padding: 10px /* Поля вокруг группы */
}

LEGEND {
color: red /* Цвет заголовка группы */
}
</style>
</head>
<body>

<form>
<fieldset>
<legend>Пробуждение обаяния </legend>
...
</fieldset>
</form>

</body>
</html>

В примере отступы устанавливаются с помощью параметра padding, а цвет заголовка через атрибут color.


17

Формы по шагам

Шаг 17. Блокирование элементов формы

У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, — блокирование (disabled) и только для чтения (readonly).

Блокированные поля

Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активизировать. Заблокированное поле помечается обычно серым цветом

Замечание

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

Далее представлены разные элементы форм в заблокированном режиме.

Текстовое поле | Многострочное текстовое поле
Кнопка | Флажки
Список | Переключатели

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

Пример 17.1. Использование блокирования поля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function agreeForm(f) {

// Если поставлен флажок, снимаем блокирование кнопки
if (f.agree.checked) f.submit.disabled = 0

// В противном случае вновь блокируем кнопку
else f.submit.disabled = 1

}
</script>
</head>
<body>

<form>
<textarea cols="30" rows="4" readonly>
Типовой договор

Отдаю свою душу, а взамен получаю здоровье и бессмертие.
</textarea>
<p><input type="checkbox" name="agree" onClick="agreeForm(this.form)"> Я согласен со всеми условиями</p>
<p><input type="submit" name="submit" value="Далее" disabled></p>
</form>

</body>
</html>

Результат данного примера показан ниже.

Я согласен со всеми условиями

В данном примере применяется блокирование кнопки, но оно снимается, как только пользователь поставит флажок возле текста «Я согласен со всеми условиями».

Для блокирования поля используется параметр disabled. Добавление этого атрибута разрешает отображать элемент формы, но не позволяет изменять его, как показано в примере 17.1.

Замечание

В некоторых случаях можно встретить запись disabled="disabled" или disabled="true". Она также работает, но имеет скорее отношение к XHTML. Впрочем, в HTML такая форма тоже действует.

Поля только для чтения

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

Для установки режима «только для чтения» используется параметр readonly, он добавляется к тегу <INPUT type="text"> или <TEXTAREA>. На вид элемента формы это никак не влияет, но как было уже замечено, модифицировать значение поля не удастся. Атрибут readonly на другие элементы формы не действует.

Ниже представлены два поля с многострочным текстом, одно из которых находится в обычном режиме, а второе — «только для чтения».

В примере 17.2 показано создание поля для чтения.

Пример 17.2. Использование параметра readonly

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form>
<textarea name="textarea1" cols="20" rows="10">Обычное текстовое поле</textarea>
<textarea name="textarea2" cols="20" rows="10" readonly>Поле только для чтения</textarea>
</form>

</body>
</html>


18

Формы по шагам

Шаг 18. Изменение ширины поля

Обычно ширина текстового поля регулируется параметром size тега <INPUT>, но в большинстве случаев это не удобно, поскольку на размер в таком случае влияет выбор браузера, его параметры, настройки операционной системы и т.д. Чтобы установить заданную ширину поля лучше использовать стили, в частности, ширина изменяется с помощью свойства width.

Ширина однострочного текстового поля

Для изменения ширины однострочного текстового поля используется следующий синтаксис.

<input type="text" style="width: значение">

В качестве значений могут использоваться любые единицы принятые в CSS, например, пикселы, проценты, дюймы и т.д. Не обязательно ширину устанавливать внутри тега <INPUT>, так, в примере 18.1 показано, как это делать другим способом, через таблицу глобальных стилей.

Пример 18.1. Изменение ширины текстового поля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.search {
width: 200px /* Ширина в пикселах */
}
</style>
</head>
<body>

<form action="handler.php">
Поиск: <input type="text" class="search">
</form>

</body>
</html>

В данном примере ширина текстового поля устанавливается равной 200 пикселов.

Поиск:

Замечание

Если ширина одновременно задается с помощью параметра size и стилей, то значение size будет проигнорировано и ширина примет значение, указанное через стили.

Ширина и высота многострочного текстового поля

Кроме ширины можно задавать и высоту поля через свойство height. Для многострочного поля синтаксис изменения размеров будет следующий.

<textarea style="height: высота; width: ширина">
...
</textarea>

В примере 18.2 показано, как устанавливать размеры для этого поля.

Пример 18.2. Размеры многострочного текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
TEXTAREA {
width: 100%; /* Ширина в процентах */
height: 100px /* Высота в пикселах */
}
</style>
</head>
<body>

<form action="handler.php">
<textarea>
</textarea>
</form>

</body>
</html>

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

Ширина кнопок

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

Синтаксис изменения размеров кнопки следующий.

<input type="button" style="width: ширина; height: высота">

В примере 18.3 показано, как изменить ширину кнопки.

Пример 18.3. Ширина кнопок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.agree {
width: 60% /* Ширина в процентах */
}
</style>
</head>
<body>

<form action="handler.php">
<p align="center">
<input type="button" value="Я согласен со всеми условиями"
  class="agree">
</p>
</form>

</body>
</html>

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

Замечание

Если заданная ширина кнопки меньше текста надписи, тогда текст будет обрезан с правого края.

Ширина списка

Исходно ширина списка определяется самым широким текстом, входящим в список. С помощью стилей можно установить требуемую ширину списка, несмотря на указанную особенность.

Синтаксис изменения ширины списка следующий.

<select style="width: ширина">
<option>...</option>
</select>

В примере 18.4 показано, как изменить ширину списка.

Пример 18.4. Ширина списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
SELECT {
width: 200px /* Ширина списка в пикселах */
}
</style>
</head>
<body>

<form action="handler.php">
<b>Выберите блюдо</b><br>
<select>
<option>Мчади</option>
<option>Када на мацони</option>
<option>Пахлава</option>
<option>Чурчхелла</option>
<option>Кчуч</option>
<option>Лилибдж</option>
</select>
</form>

</body>
</html>

Результат данного примера показан ниже.

Выберите блюдо


19

Формы по шагам

Шаг 19. Цвет фона элементов формы

Для изменения фона под элементами формы используется универсальный стилевой атрибут background или его производный параметр background-color. Для элементов, которые образованы с помощью тега <INPUT>, в общем случае синтаксис для изменения цвета фона будет следующий.

<input type="..." style="background: цвет">

Не обязательно стиль указывать внутри тега, более правильным вариантом будет вынести его в таблицу глобальных стилей, как показано в примере 19.1.

Пример 19.1. Изменение цвета некоторых полей формы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
INPUT {
background: #fc0 /* Цвет фона */
}
</style>
</head>
<body>

<form>
<table align="center" cellpadding="4" cellspacing="0">
<tr>
<td>Текстовое поле</td>
<td>Кнопка</td>
</tr>
<tr>
<td><input name="textfield" type="text" value="Ваше имя"></td>
<td><input name="Submit" type="submit" value="Submit"></td>
</tr>
<tr>
<td>Переключатели</td>
<td>Флажки</td>
</tr>
<tr>
<td><input type="radio" name="radio" value="radiobutton"> <input type="radio" name="radio" value="radiobutton2">
<input name="radio" type="radio" value="radiobutton3"></td>
<td><input type="checkbox" name="checkbox" value="checkbox"> <input type="checkbox" name="checkbox2" value="checkbox">
<input type="checkbox" name="checkbox3" value="checkbox"></td>
</tr>
</table>
</form>

</body>
</html>
Результат данного примера показан ниже.
Текстовое поле | Кнопка
Переключатели | Флажки

Замечание

Браузеры Netscape и Firefox не изменяют цвет фона у переключателей и флажков.

Цвет фона многострочного текста

Аналогично, цвет фона меняется и у многострочного текста (тег <TEXTAREA>).

<textarea style="background: цвет">...</textarea>

В примере 19.2 показан способ изменения цвета текста и фона поля.

Пример 19.2. Фон у поля с многострочным текстом

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
TEXTAREA {
background: #000; /* Цвет фона */
color: fc0; /* Цвет текста */
width: 100% /* Ширина поля */
}
</style>
</head>
<body>

<form>
<textarea>
Введите ваш комментарий
</textarea>
</form>

</body>
</html>

Результат данного примера показан ниже.

Цвет фона списка

Список обычно формируется из трех тегов: <SELECT>, <OPTGROUP> и <OPTION>, к каждому из них можно применять свои параметры цвета. Таким образом, с помощью цвета акцентируется внимание на отдельных пунктах списка или они визуально отделяются друг от друга.

Цвет списка

Вначале рассмотрим, как изменить цвет всего списка целиком. Синтаксис следующий.

<select style="background: цвет">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
</select>

В примере 19.3 показано, как установить цвет фона и текста списка.

Пример 19.3. Цвет фона списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
SELECT {
background: #69c; /* Цвет фона */
color: ffe /* Цвет текста */
}
</style>
</head>
<body>

<form>
<select>
<option>Аметист</option>
<option>Бирюза</option>
<option>Жадеит</option>
<option>Сердолик</option>
</select>
</form>

</body>
</html>
Результат данного примера показан ниже. Обратите внимание, что выделенный пункт имеет системный цвет фона.

Цвет группы в списке

Тег <OPTGROUP> предназначен для группирования элементов списка и добавления к группе заголовка, который задается параметром label. Цвет фона добавляется ко всей группе целиком, а не только к ее заголовку. Общий синтаксис следующий.

<select>
<optgroup label="Заголовок 1" style="background: цвет">
<option>Пункт 1.1</option>
<option>Пункт 1.1</option>
</optgroup>

<optgroup label="Заголовок 2" style="background: цвет">
<option>Пункт 2.1</option>
<option>Пункт 2.1</option>
</optgroup>
</select>

В примере 19.4 показан один из способов изменения цвета группы списка.

Пример 19.4. Цвет фона и текста группы списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form>
<select>
<optgroup label="Русская кухня" style="background: maroon; color: white">
<option value="r1">Закуска Барская</option>
<option value="r2">Раки, фаршированные по-царски</option>
<option value="r3">Биточки в горшочке</option>
</optgroup>

<optgroup label="Украинская кухня" style="background: lemonchiffon; color: mediumblue">
<option value="u1">Галушки славянские</option>
<option value="u2">Пампушки украинские</option>
<option value="u3">Жаркое по-харьковски</option>
</optgroup>
</select>
</form>

</body>
</html>
Результат данного примера показан ниже.

Цвет отдельных пунктов списка

Для выделения цветом желаемых пунктов меню стилевое свойство background следует установить для тега <OPTION>.

<select>
<option style="background: цвет">Название пункта</option>
</select>

В примере 19.5 показано создание списка из трех разноцветных пунктов, цвет для которых установлен через стилевые классы.

Пример 19.5. Цвет элементов списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.diamond {
color: #66f
}
.emerald {
background: #3baf17;
color: #fff
}
.ruby {
background: #d31c1c;
color: #fff
}
</style>
</head>
<body>

<form>
<select>
<option selected>Камни</option>
<option class="diamond">Алмаз</option>
<option class="emerald">Изумруд</option>
<option class="ruby">Рубин</option>
</select>
</form>

</body>
</html>

Результат данного примера показан ниже.


20

Формы по шагам

Шаг 20. Получение данных формы

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

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

Использование глобальных переменных

Каждому элементу формы, у которого есть уникальное имя, заданное параметром name, сопоставлена переменная с тем же именем (со знаком доллара впереди). Так, в примере 20.1 показано создание формы с текстовым полем username. Поскольку для тега <FORM> не указан параметр action, данные формы будут отправлены на эту же самую страницу. Код PHP проверяет, установлено ли какое-либо значение у переменной $username и если да, то выводит его в окне браузера.

Пример 20.1. Использование глобальных переменных

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<?php

// Функция isset проверяет, присвоено ли переменной $username какое-либо значение
if (isset($username)) {

// Выводим текст
echo "Привет, $username";

}

else {
?>

<form>
<p><b>Введите ваше имя:</b><br>
<input type="text" name="username"></p>
<p><input type="submit" value="Отправить">
</form>

<?php
}
?>

</body>
</html>

В данном примере вначале идет проверка на существование значения переменной $username с помощью функции isset. Если какое-либо значение присвоено, оно будет выведено, в противном случае отображается форма, где требуется ввести имя пользователя.

Замечание

В настройках PHP (файл php.ini) можно запретить работу с глобальными переменными (register_globals = Off), в таком случае указанный пример не будет работать должным образом. Желательно вообще обходиться без глобальных переменных, что делается обычно в целях безопасности.

Массивы $HTTP_GET_VARS и $HTTP_POST_VARS

Для доступа к данным формы, переданной через метод GET или POST, используются специальные массивы, соответственно, $HTTP_GET_VARS и $HTTP_POST_VARS. Например, имя поля формы, заданное параметром name, называется lorana, тогда для получения значения этого поля используется запись $HTTP_GET_VARS["lorana"]. Это будет в том случае, если параметр method тега <FORM> равен значению GET или вообще отсутствует, поскольку по умолчанию значение атрибута method равно GET. Аналогично обстоит дело и с методом POST.

В примере 20.2 показано, как получать данные формы и выводить их в окне браузера.

Пример 20.2. Получение данных через метод GET

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<?php

if (isset($HTTP_GET_VARS["drink"])) {

echo "Вы предпочитаете пить " . $HTTP_GET_VARS["drink"];

}

else {
?>

<form>
<p><b>Что вы предпочитаете пить?</b></p>
<p>
<input type="radio" name="drink" value="пиво">Пиво<br>
<input type="radio" name="drink" value="чай">Чай<br>
<input type="radio" name="drink" value="кофе">Кофе<br>
<input type="radio" name="drink" value="молоко">Молоко
</p>
<p><input type="submit" value="Отправить"></p>
</form>
<?php
}
?>

</body>
</html>

В данном примере создается группа переключателей, значение у которых определяется параметром value тега <INPUT>, а имя — парметром name. Выбранный пользователем вариант получаем через массив $HTTP_GET_VARS["drink"], где drink — это имя переключателя.

Массивы $_GET и $_POST

Существуют аналогичные массивы для хранения данных переданных через метод GET или POST — соответственно, $_GET и $_POST. Они имеют более короткую форму записи и скорее по этой причине применяются довольно часто. Принцип работы с этими массивами достаточно прост. Если в форме используется метод GET, то для получения значения элемента формы достаточно указать $_GET["имя поля"], где имя определяется параметром name.

В примере 20.3 показано использование массива $_POST для получения данных формы.

Пример 20.3. Получение данных через метод POST

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<?php

if (isset($_POST["test"])) {

$answer = $_POST["test"];
if ($answer == "a4") echo "Правильный ответ.";
else echo "Вы ошиблись с ответом";

}

else {
?>

<form method="POST">
<p><b>Какой тег указан неверно?</b></p>
<p>
<input type="radio" name="test" value="a1">DT<br>
<input type="radio" name="test" value="a2">DFN<br>
<input type="radio" name="test" value="a3">DEL<br>
<input type="radio" name="test" value="a4">DD<br>
<input type="radio" name="test" value="a5">DL<br>
</p>
<p><input type="submit" value="Ответить"></p>
</form>
<?php
}
?>

</body>
</html>