Описание формы помещается между тэгами <FORM> и </FORM>. На странице одновременно может располагаться несколько форм, однако они не могут быть вложены одна в другую.
Атрибуты
METHOD. Задает метод – GET или POST. По умолчанию предполагается GET. Хотя большинство из существующих форм использует метод POST Различия между GET и POST, а также ситуации, в которых следует использовать тот или иной метод, будут рассмотрены при изучении CGI-программирования.
ACTION. Задает имя программы, которая будет обрабатывать форму.
ENCTYPE. Задает метод кодирования (обычно не задается). По умолчанию равен "application/x-www-form-urlencoded".
NAME. Задается для JavaScript, чтобы иметь возможность обращаться к форме по имени, а не по номеру.
TARGET. Задается во фреймосодержащих документах. Определяет, в какой фрейм отправить полученную информацию.
ONSUBMIT. Задает JavaScript-обработчик проверки правильности заполнения формы. Так как JavaScript-обработчик срабатывает локально, процесс происходит достаточно быстро. Это намного лучше, чем многократно гонять данные по сети из-за того, что растяпа-пользователь в очередной раз некорректно заполнил какое-то поле.
Контейнер <FORM>…</FORM> существует не сам по себе. Посылаемые данные содержатся в специальных элементах формы – элементах управления. Именно с ними взаимодействует пользователь, вводя данные.Контейнер <FORM>…</FORM> существует не сам по себе. Посылаемые данные содержатся в специальных элементах формы – элементах управления. Именно с ними взаимодействует пользователь, вводя данные.
Элементы форм
Текстовая область - <TEXTAREA>
Это область для ввода многострочной текстовой информации. В контейнере <TEXTAREA>…</TEXTAREA> допускается размещать любой текст, который будет выведен в поле ввода по умолчанию.
Атрибуты
NAME. Задает название информации. Обязательный атрибут.
ROWS. Задает высоту поля, т.е. число строк в нём.
COLS. Задает ширину поля, т.е. длину строки.
disabled. Запрещает доступ пользователя к элементу формы. Поле не может быть выбрано. Значение не отправляется на сервер.
readonly. Объявляет поле только для чтения. Поле доступно для выбора, но не может быть изменено.
Хотя атрибуты ROWS и COLS не являются обязательными, они не имеют определенных значений по умолчанию (для каждого броузера эти значения различны), поэтому лучше их всегда указывать.
Пример
<FORM>
<TEXTAREA NAME="MyText" ROWS=5 COLS=30>
Тут можно что-нибудь написать
</TEXTAREA>
</FORM>
Список - <SELECT>
Предназначен для создания меню, из которого пользователь может выбрать один или несколько из предложенных вариантов.
Атрибуты
NAME. Задает имя поля. Обязательный атрибут.
SIZE. Задает вертикальный размер окна для вариантов выбора. Если атрибут опущен или его значение равно 1, выводится всплывающий список вариантов. Если указано число больше 1, то варианты выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество элементов списка, добавляются пустые строки. При их выборе пользователем возвращаются пустые поля.
MULTIPLE. Этот атрибут позволяет выбрать несколько вариантов одновременно. Следует обратить внимание, что при множественном выборе в потоке данных от одной формы может присутствовать несколько переменных с одним и тем же именем. Ваша программа обработки должна предусматривать подобные ситуации и корректно их обрабатывать.
Список вариантов включается в контейнер <SELECT>…</SELECT> при помощи тэгов <OPTION>. Тэг имеет два необязательных атрибута:
VALUE. Задает значение, передаваемое сценарию в случае выбора варианта пользователем. Если этот атрибут отсутствует, то в сценарий будет отослан текст, расположенный сразу после тэга <OPTION>.
SELECTED. Указывает вариант, выделенный по умолчанию.
Примеры
<!-—Выпадающий список--> <FORM> <SELECT NAME="Item"> <OPTION VALUE="tea">Чай <OPTION VALUE ="coffee">Кофе <OPTION VALUE ="milk">Молоко <OPTION VALUE ="ham">Ветчина <OPTION VALUE ="cheese">Сыр </SELECT> </FORM>
<!--Список с множественным выбором--> <FORM> <SELECT NAME="Item" SIZE=5 MULTIPLE> <OPTION VALUE ="tea">Чай <OPTION VALUE ="coffee" SELECTED>Кофе <OPTION VALUE ="milk">Молоко <OPTION VALUE ="ham">Ветчина <OPTION VALUE ="cheese">Сыр </SELECT> </FORM>
OPTGROUP
OPTGROUP - позволяет группировать пункты в элементе SELECT. В этом случае добавляются отступы и названия каждой группы, так что пользователю при выборе необходимого пункта ориентироваться гораздо проще. Название группы задается в атрибуте LABEL элемента OPTGROUP. Вот пример использования группировки:
Более того, каждую группу с помощью CSS можно раскрасить в свой цвет! Делается это с использованием свойства Background. Например, первую группу сделаем зеленой, а вторую желтой.
Чаще всего в формах используется тэг <INPUT>. Он не имеет закрывающего тэга. Вся информация, необходимая броузеру для обработки, содержится непосредственно в тэге <INPUT> и задается с помощью различных атрибутов.
Атрибуты
TYPE. Задает тип поля ввода. Может принимать значения: кнопка (BUTTON, SUBMIT, RESET), поле ввода (TEXT), поле ввода пароля ( Password), скрытое поле (HIDDEN), флажок (CHECKBOX), переключатель (RADIO), файл (FILE). Чуть ниже всё это рассмотрим подробно.
NAME. Задает имя поля. Каждое создаваемое поле ввода должно иметь собственное уникальное имя, иначе сценарий не определит, к каким полям относятся полученные значения. Конечно, имя поля ввода должно соответствовать имени, которое описано для него в программе обработки.
VALUE. Задает значение поля по умолчанию или надпись на кнопке.
ONCLICK. Задает обработчик щелчка на кнопке.
SIZE. Задает размер поля типа TEXT.
MAXLENGTH. Задает ограничение в поле типа TEXT вводимого количества символов.
AUTOCOMPLETE="OFF". Отключает автозаполнение для данного поля. Очень полезно для полей ввода разовых кодов, каптч и т.п. [domelement].setAttribute('autocomplete','off');
Кнопка - BUTTON
В форме изображается кнопка с надписью, заданной атрибутом VALUE, при нажатии на которую вызывается JavaScript-обработчик, заданный атрибутом ONCLICK. Атрибут NAME служит для JavaScript-именования кнопки, а не для передачи на сервер. Атрибут TYPE, который может принимать значения submit, reset и button. Первые два значения и так ясно для чего, а вот третье предназначено для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие OnСlick и вызывается нужная функция.
Пример
<FORM> <INPUT TYPE="BUTTON" VALUE ="Нажми!" ONCLICK="alert('Нажал!');"> </FORM>
Внутри элемента BUTTON можно размещать другие HTML-элементы, так что можно сделать кнопку с рисунком.
Данный элемент не поддерживается браузером Operа 5+.
Кнопка - SUBMIT
Эта кнопка предназначена для передачи формы. В большинстве броузеров внешне почти не отличима от кнопки BUTTON. Опять же сама она не передается, а служит только для управления. Атрибут ONCLICK практически не используется, так как лучше использовать обработчик событий ONSUBMIT, заданный в тэге <FORM>. Ведь чтобы передать введенные в форму данные, в общем случае совсем не обязательно нажимать на кнопку SUBMIT. Можно просто нажать на клавиатуре клавишу ENTER, находясь в текстовом поле ввода. При этом произойдет передача данных.
Пример
<FORM> <INPUT TYPE="SUBMIT" VALUE ="Принять заказ"> </FORM>
Атрибут VALUE дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.
Пример
<FORM> <INPUT TYPE="SUBMIT" NAME="BN" VALUE ="Вступить в клуб"> <INPUT TYPE="SUBMIT" NAME="BN" VALUE ="Отказаться"> <INPUT TYPE="SUBMIT" NAME="BN" VALUE ="Принять как наблюдателя"> </FORM>
Кнопка - RESET
Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезно. Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде “Очистить”, “Начать сначала”, “Удалить ввод” и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.
Пример
<FORM> <INPUT TYPE="RESET" VALUE ="Сброс"> </FORM>
Поле ввода - TEXT
Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тэгом <INPUT> по умолчанию, его не нужно каждый раз указывать, чтобы вывести текстовое поле. Таким образом, на каждом текстовом поле вы экономите 12 нажатий на клавиши, а главное, размер HTML-кода будет меньше. Имя поля, задаваемое атрибутом NAME, обязательно, так как базируясь именно на этом параметре, броузер передает сценарию пару имя=значение.
Пример
<FORM> <INPUT NAME="Фамилия" VALUE ="Иванов" SIZE=20 MAXLEGNTH=20> </FORM>
Текст Иванов помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.
Поле ввода пароля - PASSWORD
Поле ввода пароля очень похоже на простое текстовое поле. Отличается оно тем, что вместо вводимых символов в нем отображаются звездочки. Такая возможность очень важна, когда нужно выспросить у пользователя секретную информацию типа пароля, которую не должны видеть другие.
Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.
Пример
<FORM METHOD="POST" ACTION="/cgi_bin/test.cgi"> <INPUT TYPE="HIDDEN" NAME="NumForm" VALUE ="1"> ...Другие элементы формы.... </FORM> <FORM METHOD="POST" ACTION="/cgi_bin/test.cgi"> <INPUT TYPE="HIDDEN" NAME="NumForm" VALUE ="2"> ...Другие элементы формы... </FORM>
Броузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст HTML-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.
Пример
<INPUT TYPE="HIDDEN" NAME="FormVersion" VALUE ="1.2">
Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.
Флажок - CHECKBOX
Броузер отображает поле этого типа в виде небольшого квадрата. По смыслу флажок служит для того, чтобы быть установленным (квадрат перечеркнут), либо нет (квадрат пуст). Когда он установлен, его значение, заданное атрибутом VALUE, передается программе сценария. Если он не установлен, то его значение не передается совсем. Флажок может быть сразу установлен по умолчанию, если указан атрибут CHECKED. По умолчанию атрибут VALUE имеет значение ON (установлен). Так как атрибут VALUE здесь задает не надпись на флажке, а его внутреннее значение, передаваемое программе сценария, то если надо что-то подписать, пишите рядом с флажком.
Пример
<FORM> Нужна накладная <INPUT TYPE="CHECKBOX" NAME="Receipt" VALUE ="Yes"> </FORM>
Переключатель - RADIO
Переключатель напоминает флажок, поскольку он тоже может находиться во включенном или выключенном состоянии. По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом NAME. У каждого из них свое значение атрибута VALUE. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя. Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута CHECKED.
Пример
<FORM> <INPUT TYPE="RADIO" NAME="Sex" VALUE ="Man" CHECKED>Мужской <INPUT TYPE="RADIO" NAME="Sex" VALUE ="Woman">Женский </FORM>
Файл - FILE
Позволяет передать сценарию любой файл. Максимальный размер файла задается скрытым полем MAX_FILE_SIZE.
В конце разговора о HTML-формах хочу сделать одно замечание. Некоторые броузеры (например, Internet Explorer) отображают элементы форм, даже если они не находятся внутри контейнера <FORM>…</FORM>. Но злоупотреблять этим не стоит. Во-первых, в одном документе может находиться несколько форм, и именно <FORM>…</FORM> определяет, какие элементы к какой форме относятся; во-вторых, в тэге <FORM> задается URL обработчика формы и метод передачи данных. В этом плане корректнее всех поступает броузер Netscate Navigator, он вообще не отображает никаких элементов управления, описанных вне контейнера <FORM>…</FORM>.
FIELDSET
Этот элемент позволяет группировать элементы форм. Данная группировка помогает пользователям проще ориентироваться в формах, то есть ему сразу становится понятно, что вот все эти элементы относятся именно к этой форме. Кроме того, можно эту группу еще и обозвать. Для этого используется элемент LEGEND
Поддерживается браузерами: MSIE 4+, Netscape 6, Opera 5+.
LEGEND
Имеет атрибут ALIGN, который теоретически позволяет размещать название не только сверху, но он не работает ни в одном браузере.
Самое прекрасное, что на элемент FIEDLSET можно писать стили, то есть вы можете сделать рамку любого цвета и так далее. Надо сказать, что элемент LEGEND помечен в спецификации HTML 4 как нежелательный.
Ниже приведена форма, которая заключена в элемент FIELDSET и называется "Ваш комментарий".
