ACTION

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

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

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

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

Замечание

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

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

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

Список	Переключатели
Пиво Кофе Чай

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

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

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

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

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

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

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

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

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

</optgroup>

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

</optgroup>

</select>

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

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

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

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

</select>

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

Цвет списка

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

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

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

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

</select>

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

ENCTYPE

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

GET

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

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

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

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

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

Пример 10.3. Группирование элементов списка <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<body>

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

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

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

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

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

Галушки славянские Пампушки украинские Жаркое по-харьковски

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

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

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

Кнопка RESET

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

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

<button type="reset">Надпись на кнопке</button>

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

Кнопка SUBMIT

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

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

<button type="submit">Надпись на кнопке</button>

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

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

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

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

Массивы $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 показано, как получать данные формы и выводить их в окне браузера.

METHOD

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

MULTIPLE

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

Чебурашка

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

Шапокляк

Крыса Лариса

Чебурашка

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

Шапокляк

Крыса Лариса

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

Параметр size равен 1

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

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

NAME

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

NAME

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

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

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

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

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

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

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

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

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

Обычное текстовое поле

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

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

POST

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

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

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

<html>

<body>

Здесь размещаются элементы формы

</form>

Здесь размещаются элементы формы

</form>

</body>

</html>

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

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

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

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

<html>

<body>

...

</form>

</body>

</html>

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

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

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

<html>

<body>

...

</form>

</body>

</html>

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

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

<html>

<body>

...

</form>

</body>

</html>

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

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

<html>

<body>

...

</form>

</body>

</html>

Замечание

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

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

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

<html>

<head>

function validForm() {

alert("Имя " + document.forms('form1').nick.value)

}

</script>

</head>

<body>

Имя: <input type="text" name="nick">

</form>

</body>

</html>

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

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

<html>

<body>

...

</form>

</body>

</html>

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

Текстовое поле

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

<html>

<body>

</form>

</body>

</html>

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

Как ваше имя?

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

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

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

<html>

<body>

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

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

Логин:

Пароль:

Замечание

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

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

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

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

<html>

<body>

<b>Введите ваш отзыв:</b><br>

</form>

</body>

</html>

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

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

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

Добавление кнопки

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

<html>

<body>

</form>

</body>

</html>

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

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

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

Кнопка с текстом

Кнопка с рисунком

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

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

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

<html>

<body>

<form>

<button>Кнопка с текстом</button>

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

</p>

</form>

</body>

</html>

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

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

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

<html>

<body>

...

</form>

</body>

</html>

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

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

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

<html>

<body>

</form>

</body>

</html>

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

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

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

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

<html>

<body>

<b>Какое у вас состояние разума?</b><br>

<input name="dzen" type="radio" value="pdzen"> Полный дзен

</form>

</body>

</html>

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

Какое у вас состояние разума?

Не дзен

Дзен

Полный дзен

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

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

Создание флажков

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

<html>

<body>

<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

</form>

</body>

</html>

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

С какими операционными системами вы знакомы?

Windows 95/98

Windows 2000

System X
Linux

X3-DOS

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

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

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

<html>

<body>

<option selected value="s1">Чебурашка</option>

<option value="s2">Крокодил Гена</option>

<option value="s3">Шапокляк</option>

<option value="s4">Крыса Лариса</option>

</select>

</form>

</body>

</html>

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

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

<html>

<body>

<b>Выбери персонажа</b><br>

<option value="s1">Чебурашка</option>

<option value="s2" selected>Крокодил Гена</option>

<option value="s3">Шапокляк</option>

<option value="s3">Крыса Лариса</option>

</select>

</form>

</body>

</html>

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

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

Чебурашка

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

Шапокляк

Крыса Лариса

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

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

<html>

<body>

<b>Напишите любимое слово (никакие данные не будут передаваться на сервер!):</b><br>

</form>

</body>

</html>

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

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

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

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

<html>

<body>

<b>Введите ваше имя:</b><br>

</form>

</body>

</html>

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

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

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

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

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

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

<html>

<body>

<b>Укажите файл для отправки на сервер:</b><br>

</form>

</body>

</html>

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

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

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

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

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

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

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

<html>

<head>

</head>

<body>

</td>

<td>Фамилия:<br> <input name="lastname" type="text" tabindex="3" size="30">

</td>

</tr>

<td>Телефон:<br>

<option selected>Мужской</option>

<option>Женский</option>

<option>Гермафродит</option>

</select></td>

</tr>

</table>

</form>

</body>

</html>

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

Ваше имя:

Фамилия:

Телефон:

Пол:

Мужской

Женский

Гермафродит

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