Синтаксис тега <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).

Использование тега <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

<!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>

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

Нажмите <Alt>+<q>, чтобы активировать переключатель

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

Информация взята с сайта

Использование тега <FIELDSET>

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

<html>

<body>

<form>

<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).

Использование тега <LEGEND>

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

<html>

<body>

<form>

<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> будут проигнорированы, если вы желаете их непременно добавить, используйте символ неразделяемого пробела  .

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

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

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

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

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

Изменение вида заголовка

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

<html>

<head>

FIELDSET {

padding: 10px /* Поля вокруг группы */

}

LEGEND {

color: red /* Цвет заголовка группы */

}

</style>

</head>

<body>

<form>

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

...

</fieldset>

</form>

</body>

</html>

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

Информация взята с сайта

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

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

<html>

<head>

function agreeForm(f) {

// Если поставлен флажок, снимаем блокирование кнопки

if (f.agree.checked) f.submit.disabled = 0

// В противном случае вновь блокируем кнопку

else f.submit.disabled = 1

}

</script>

</head>

<body>

<form>

Типовой договор

Отдаю свою душу, а взамен получаю здоровье и бессмертие.

</textarea>

<p><input type="checkbox" name="agree" onClick="agreeForm(this.form)"> Я согласен со всеми условиями</p>

</form>

</body>

</html>

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

function agreeForm(f) {

if (f.agree.checked) f.submit.disabled = 0 else f.submit.disabled = 1

}

Типовой договор

Отдаю свою душу, а взамен получаю здоровье и бессмертие.

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

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

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

Замечание

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

Использование параметра 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>

Информация взята с сайта

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

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

<html>

<head>

.search {

width: 200px /* Ширина в пикселах */

}

</style>

</head>

<body>

Поиск: <input type="text" class="search">

</form>

</body>

</html>

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

Поиск:

Замечание

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

Размеры многострочного текста

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

<html>

<head>

TEXTAREA {

width: 100%; /* Ширина в процентах */

height: 100px /* Высота в пикселах */

}

</style>

</head>

<body>

</textarea>

</form>

</body>

</html>

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

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

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

<html>

<head>

.agree {

width: 60% /* Ширина в процентах */

}

</style>

</head>

<body>

</p>

</form>

</body>

</html>

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

Замечание

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

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

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

<html>

<head>

SELECT {

width: 200px /* Ширина списка в пикселах */

}

</style>

</head>

<body>

<b>Выберите блюдо</b><br>

<option>Мчади</option>

<option>Када на мацони</option>

<option>Пахлава</option>

<option>Чурчхелла</option>

<option>Лилибдж</option>

</select>

</form>

</body>

</html>

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

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

Мчади

Када на мацони

Пахлава

Чурчхелла

Кчуч

Лилибдж

Информация взята с сайта

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

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

<html>

<head>

INPUT {

background: #fc0 /* Цвет фона */

}

</style>

</head>

<body>

<form>

<tr>

<td>Текстовое поле</td>

<td>Кнопка</td>

</tr>

<tr>

</tr>

<tr>

<td>Переключатели</td>

<td>Флажки</td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

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

Текстовое поле	Кнопка

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

Замечание

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

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

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

<html>

<head>

TEXTAREA {

background: #000; /* Цвет фона */

color: fc0; /* Цвет текста */

width: 100% /* Ширина поля */

}

</style>

</head>

<body>

<form>

Введите ваш комментарий

</textarea>

</form>

</body>

</html>

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

Введите ваш комментарий

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

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

<html>

<head>

SELECT {

background: #69c; /* Цвет фона */

color: ffe /* Цвет текста */

}

</style>

</head>

<body>

<form>

<option>Аметист</option>

<option>Бирюза</option>

<option>Жадеит</option>

<option>Сердолик</option>

</select>

</form>

</body>

</html>

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

Аметист

Бирюза

Жадеит

Сердолик

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

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

<html>

<body>

<form>

<option value="r1">Закуска Барская</option>

<option value="r2">Раки, фаршированные по-царски</option>

<option value="r3">Биточки в горшочке</option>

</optgroup>

<option value="u1">Галушки славянские</option>

<option value="u2">Пампушки украинские</option>

<option value="u3">Жаркое по-харьковски</option>

</optgroup>

</select>

</form>

</body>

</html>

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

Закуска Барская

Раки, фаршированные по-царски

Биточки в горшочке

Галушки славянские

Пампушки украинские

Жаркое по-харьковски

Цвет элементов списка

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

<html>

<head>

.diamond {

color: #66f

}

.emerald {

background: #3baf17;

color: #fff

}

.ruby {

background: #d31c1c;

color: #fff

}

</style>

</head>

<body>

<form>

<option selected>Камни</option>

<option class="diamond">Алмаз</option>

<option class="emerald">Изумруд</option>

<option class="ruby">Рубин</option>

</select>

</form>

</body>

</html>

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

.diamond { color: #66f } .emerald { background: #3baf17; color: #fff } .ruby { background: #d31c1c; color: #fff }

Камни

Алмаз

Изумруд

Рубин

Информация взята с сайта

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

<!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>

</form>

<?php

}

</body>

</html>

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

Замечание

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

Получение данных через метод 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="молоко">Молоко

</p>

</form>

<?php

}

</body>

</html>

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

Получение данных через метод 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 {

<p><b>Какой тег указан неверно?</b></p>

<p>

</p>

</form>

<?php

}

</body>

</html>

Информация взята с сайта

SELECTED

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

Добавление формы

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

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

Элементы формы, которые представляют собой стандартные поля для ввода информации.

Кнопку отправки данных формы на сервер (кнопка SUBMIT).

Адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы.

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

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

Параметры формы

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

Элементы форм

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

Табл. 3.1. Элементы форм

Название

Описание

Пример

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

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

Информация взята с сайта

Однострочное текстовое поле

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

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

Табл. 4.1. Параметры однострочного текстового поля

Параметр

Описание

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

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

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

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

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

Табл. 5.1. Параметры поля с паролем

Параметр

Описание

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

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

Многострочный текст

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

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

текст

</textarea>

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

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

Табл. 6.1. Параметры многострочного текста

Параметр

Описание

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

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

Кнопки

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

Кнопку на веб-странице можно создать двумя способами — с помощью тега <INPUT> и тега <BUTTON>.

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

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

Табл. 7.1. Параметры кнопок

Параметр

Описание

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

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

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

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

Параметры переключателей перечислены в табл.8.1.

Табл. 8.1. Параметры переключателей

Параметр

Описание

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

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

Флажки

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

Параметры флажков перечислены в табл.9.1.

Табл. 9.1. Параметры флажков

Параметр

Описание

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

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

Поле со списком

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

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

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

<option>Пункт 2</option>

<option>Пункт 3</option>

</select>

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

Чебурашка

Крокодил Гена

Шапокляк

Крыса Лариса

Выберите героя

Чебурашка

Крокодил Гена

Шапокляк

Крыса Лариса

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

Раскрывающийся список

Скрытое поле

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

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

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

Табл. 11.1. Параметры скрытого поля

Параметр

Описание

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

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

Поле с изображением

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

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

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

Табл. 12.1. Параметры поля с изображением

Параметр

Описание

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

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

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

Отправка файла

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

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

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

Табл. 13.1. Параметры поля для отправки файла

Параметр

Описание

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

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

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

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

Замечание

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

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

Применение тега LABEL

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

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

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

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

Блокирование элементов формы

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

Изменение ширины поля

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

Цвет фона элементов формы

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

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

Получение данных формы

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

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

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

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

...

</textarea>

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

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

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

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

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

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

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

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

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

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

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

</select>

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

SIZE

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

TARGET

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

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

_blank — загружает страницу в новое окно браузера.

_self — загружает страницу в текущее окно.

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

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

VALUE

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

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