3. Создание полей формы

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

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .

4. Текстовые поля ввода

Элемент ... используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Кошка

7. Кнопки

Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.

Для корректного отображения элемента

разными браузерами нужно указывать атрибут type , например, .

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

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .

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

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

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

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

Имена элементам формы присваиваются через их атрибут NAME .

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

В HTML 4.01 определены следующие типы управляющих элементов:

• Кнопки - задаются с помощью элементов BUTTON и INPUT . Различают:

» кнопки отправки - при нажатии на них, они осуществляют отправку формы серверу;

» кнопки сброса - при нажатии на них, управляющие элементы принимают первоначальные значения;

» прочие кнопки - кнопки, для которых не указано действие, выполняемое по умолчанию при нажатии на них.

• Зависимые переключатели (переключатели с зависимой фиксацией) - задаются элементом INPUT и представляют собой переключатели "вкл/выкл". Если несколько зависимых переключателей имеют одинаковые имена, то они являются взаимоисключающими. Это значит, что если одна из них ставится в положение "вкл", то все остальные автоматически - в положение "выкл". Именно это и является преимуществом их использования.


• Независимые переключатели (переключатели с независимой фиксацией) - задаются элементом INPUT и представляют собой переключатели "вкл/выкл", но в отличие от зависимых, независимые переключатели могут принимать и изменять свое значение независимо от остальных переключателей. Даже если последние имеют такое же имя.


• Меню - реализуется с помощью элементов SELECT , OPTGROUP и OPTION . Меню предоставляют пользователю список возможных вариантов выбора.


• Ввод текста - реализуется элементами INPUT , если вводится одна строка, и элементами TEXTAREA - если несколько строк. В обоих случаях введенный текст становится текущим значением управляющего элемента.


• Выбор файлов - позволяет вместе с формой отправлять выбранные файлы, реализуется HTML-элементом INPUT .


• Скрытые управляющие элементы - создаются управляющим элементом INPUT .

Как видите, очень много элементов задаются с помощью универсального тега INPUT .

Полную спецификацию по HTML4 Вы можете найти

Тег FORM - контейнер форм

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

Приведем атрибуты тега FORM :

• action - единственный обязательный атрибут. В качестве его значения указывается URL-адрес запрашиваемого скрипта, которая будет обрабатывать данные, содержащиеся в форме. Допустимо использовать запись mailto:URL , благодаря которой форма будет послана по электронной почте. Если атрибут ACTION все-таки не указан, то содержимое формы будет отправлено на URL-адрес, с которого загружалась данная веб-страница;


• method - определяет метод HTTP, используемый для пересылки данных формы от браузера к серверу. Атрибут METHOD может принимать два значения: GET и POST ;


• enctype - необязательный атрибут. Указывает тип содержимого формы, используемый для определения формата кодирования при ее пересылке. В HTML определены два возможных значения для атрибутов ENCTYPE :

APPLICATION/X-WWW-FORM-URLENCODED (используется по умолчанию);

MULTIPART/FORM-DATA.

Тег INPUT и его методы

Элемент INPUT является наиболее употребительным тегом HTML-форм. С помощью этого тега реализуются основные функции формы. Он позволяет создавать внутри формы поля ввода строки текста, имени файла, пароля и.т.д.

Обратите внимание на особенность INPUT - у него нет конечного (завершающего) тега. Атрибуты и особенности использования INPUT зависят от способа его использования. Рассмотрим эти способы.

» Однострочные поля ввода

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

Данный тег создает поле воода с максимально допустимой длиной текста maxlen и размером в size знакомест. Если указан атрибут value , то в поле будет изначально отображаться значение данного атрибута. В квадратных скобках помечены необязательные атрибуты.

Вот пример однострочного поля ввода:

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

Конечно, имя пользователя можно ввести с помощью обыкновенного текстового поля. А вот пароль не должен отображаться на экране при его вводе. В этом нам поможет поле ввода пароля:

Принцип работы данного тега точно такой же, как и текстового. Разница заключается в том, что вводимая информация в поле не отображается, а заменяется "звездочками ". Не рекомментуется устанавливать значение по умолчанию из соображений безопасности (value ).

Вот пример поля ввода пароля:

» Скрытое текстовое поле

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

Такие поля передаются серверу, но на веб-странице не отображаются.

» Независимые переключатели

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

Реализовать это можно опять же с помощью тега INPUT . Для этого только необходимо в качестве значения атрибута type указать chechbox .

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

Переключатель по умолчанию либо включен, либо выключен. Чтобы переключатель был по умолчанию включен, необходимо для него указать атрибут checked .

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

Приведем пример независимых переключателей:

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

» Зависимые переключатели

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

Да
Нет

Данная форма будет выглядеть так:

Первый переключатель (со значением yes ) активен по умолчанию (мы установили атрибут checked ).

Как только пользователь нажмет кнопку "Отправить", скрипту script.php будет передан параметр answer (атрибут name обоих переключателей) со значением yes или no (в зависимости от того, какой вариант выбрал пользователь).

А вот так выглядит текст скрипта , принимающий данные из рассмотренной формы и обрабатывающий ответ.

» Кнопка отправки формы

Еще одним элементом управления типа INPUT являются кнопки. Кнопка отправки служит для отправки скрипту ввведенных в форму параметров. Синтаксис тега INPUT при этом такой:

Атрибут value определяет текст, который будет написан на кнопке отправки. Атрибут name определяет имя кнопки и является необязательным. Если значение этого атрибута не указывать, то скрипту будут переданы введенные в форму значения и все. Если атрибут name для кнопки будет указан, то дополнительно к основным данным формы будет отправлена пара имя=значение от самой кнопки.

» Кнопка сброса параметров

Кроме кнопки submit есть еще кнопка reset , которая сбрасывает параметры формы, а точнее, устанавливает для всех элементов формы значения по умолчанию. Желательно, чтобы на форме была такая кнопка, особенно, если это большая форма. Наличие данной кнопки обеспечивает очистку формы, например, в случае, когда были введены неправильные параметры. Синтаксис кнопки сброса:

» Кнопка отправки с рисунком

Вместо кнопки submit можно использовать рисунок для отправки данных. Клик на этом рисунке дает то же самое, что и нажатие на кнопку submit . Однако, кроме этого, сценарию будут переданы координаты места клика на рисунке. Координаты будут переданы в формате имя.x=коор_X , y=коор_Y . Синтаксис кнопки отправки с рисунком:

Многострочные текстовые поля. Тег TEXTAREA

В HTML многострочные текстовые поля создаются с помощью тега TEXTAREA . Поле, создаваемое этим тегом, позволяет вводить и отправлять не одну строку, а сразу несколько строк. Синтаксис тега TEXTAREA :

<br>текст по умолчанию<br>

Несколько значений относительно использования атрибутов: необязательные параметры cols и rows желательно все-таки указывать. Первый из них задает количество символов в строке, а второй - количество строк в области. Атрибут wrap определяет тип переноса текста, как будет выглядеть текст в поле ввода:

• Virtual - справа от текстового поля выводится полоса прокрутки. Вводимый текст выглядит разбитым на строки, а символ новой строки вставляется при нажатии клавиши ENTER ;
• Physical - этот тип зависит от типа браузера и выглядит по-разному;
• None - текст выглядит в поле в том виде, в котором пользователь его вводит. Если текст не уменьщается в одну строку, появляется горизонтальная полоса прокрутки.

Следует заметить, что наиболее удобным является тип Virtual . Вот пример многострочного текстового поля с использованием атрибуту wrap=Virtual .

Не раз нам доводилось видеть Web-страницы, на которых нам предлагалось ввести некоторые данные в поля ввода. В HTML существует механизм получения данных от пользователя. Естественно, эти данные необходимо еще обработать, но этим занимаются специализированные программы. Рассмотрим механизм их взаимодействия с Web-страницами.

Итак, пользователь загрузил себе Web-страницу, на которой располагаются органы управления для ввода информации. Все они объединены в общую совокупность, называемую формой. Каждая форма обладает кнопкой, по нажатию на которую введенные пользователем данные передаются обрабатывающей программе. Эта программа размещается на Web-сервере, который и обслуживает данную страницу. Подобные программы могут создаваться при помощи самых различных технологий программирования. Объединяет их лишь единый порядок получения данных от Web-страницы. Данные передаются при помощи шлюзового интерфейса CGI (Common Gateway Interface). Поэтому обрабатывающие программы часто называют CGI-приложениями или CGI-скриптами.

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

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

Форма ограничивается тегами

Листинг 1.33

"http://www.w3.org/TR/html4/strict.dtd">

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

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

• Параметр type является, пожалуй, ключевым параметром. При помощи его значения мы можем устанавливать тип создаваемого органа управления. В качестве значения используется одно из следующих ключевых слов: text, password, checkbox, radio, submit, reset, file, hidden, image, button. По умолчанию используется значение text. Более подробно эти типы мы рассмотрим немного позже.
• Параметр name предназначен для установки уникальных имен для каждого органа управления. Несмотря на то, что параметр не является обязательным, настоятельно рекомендуется использовать его. В сопроводительной документации CGI-приложений обязательно указывается, как имена должны быть у соответствующих органов ввода информации.
• Параметр value используется для указания значения, отображаемого по умолчанию для кнопок и полей текстового ввода. Если мы используем переключатели, то значение параметра value не будет видно пользователю, но именно это значение получить обрабатывающее CGI-приложение если пользователь выберет соответствующий переключатель.
• Параметр cheked используется только для независимых переключателей и радиокнопок. Он устанавливает их начальное состояние. Если этот параметр будет введен в тег <input> , то переключатель будет переведен во включенное состояние. Параметр используется без значений.
• Параметр disabled делает орган управления недоступным для использования пользователем. Параметр используется без значений.
• Параметр readonly применяется только для органов ввода типов text password. Использование этого параметра означает, что данные, отображаемые в этих полях, нельзя будет изменять.
• Параметр size обычно задает размеры органа ввода данных. Но для каждого отдельного типа органов ввода его действие специфично.
• Параметр maxiength позволяет устанавливать максимально возможно число символов, которые пользователь может внести в поля текстового ввода. Значением параметра является целое положительное число.
• Параметр src используется в тех случаях, когда мы создаем органы ввода связанные с графикой. Значением данного параметра является URL графического файла, который и содержит отображаемый рисунок.
• Параметр alt позволяет создавать краткие описания создаваемого органа ввода данных. Это описание может отображаться в виде маленького хинта-подсказки, когда пользователь наводит курсор мыши на данный орган ввода.
• Параметр tabindex задает номер органа управления в последовательности всех объектов, перемещение фокуса ввода между которыми осуществляется при помощи последовательных нажатий клавиши табуляции.
• Параметр accesskey позволяет задавать "горячую клавишу", при нажатии на которую пользователем фокус ввода будет переходить к данному органу управления.

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

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

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

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

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

Также мы можем создавать группы переключателей, которые часто называют зависимыми переключателями. В этой группе пользователь может выбирать и помечать только один переключатель. Каждый переключатель создается при помощи тега с параметром type, которому приписано значение radio. Чтобы браузер понял, что несколько переключателей принадлежат к одной группе, необходимо, чтобы их значения параметра name были одинаковыми. Но при этом у них обязательно должны различаться значения параметров value.

Рассмотрим на примере правила создания и отображения рассмотренных органов ввода информации.

Листинг 1.34

:! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.Qrg/TR/html4/strict.dtd">
,

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

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

• Параметр name позволяет задавать уникальное имя для данного элемента ввода данных,
• Параметр rows задает количество отображаемых строк у создаваемого поля ввода. По сути дела, это его высота, но задается она в строках. Параметр является обязательным. В качестве значения используется целое положительное число.
• Параметр cols задает ширину в символах создаваемого поля текстового ввода. Параметр также является обязательным.
• Параметр disabled используется, если поле необходимо сделать недоступным для использования.
• Параметр readonly применяется для создания полей с нередактируемьм текстом. Текст в таких полях ввода может только отображаться, но пользователь не сможет изменить его.
• Параметр tabindex устанавливает порядковый номер элемента ввода данных а последовательности объектов, переход фокуса ввода между которыми производится при помощи клавиши табуляции.
• Параметр accesskey позволяет задавать клавишу, при нажатии на которую фокус ввода будет автоматически передан данному полю ввода.

Теперь посмотрим, как создаются подобные поля ввода (рис. 1.35).

Листинг 1.36

"http://www.w3.org/TR/html4/strict.dtd">

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

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

Рис. 1 .35. Окно браузера с результатом отображения файла, приведенного в листинге 1 .36

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

Независимый переключатель
Input type="checkbox" name="check" value="checked" id="checkl">

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

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

Возможно, вам не раз приходилось заполнять анкеты на сайтах, например при регистрации ящика электронной почты. Если приходилось, то вспомните, что данные вы вводили прямо в окне браузера. После ввода данных нажимали кнопку типа Отправить. Далее браузер упаковывал и отсылал введенные вами данные на сервер, где их обрабатывало специализированное приложение (CGI?приложение). Так вот, формы нужны как раз для того, чтобы можно было организовать ввод данных от пользователя. HTML?документы с формами отличаются от обычных документов только наличием различных элементов управления: полей ввода текста, флажков, кнопок и др. (см. любое окно Windows или рис. 9.1).

Рис. 9.1. Пример HTML-документа с формой

Выше было сказано, что данные, введенные пользователем в форму, обрабатываются CGI?приложениями, работающими на сервере. Подробное рассмотрение этих приложений выходит за рамки книги. Здесь же стоит сказать, что CGI?приложение – это обычное приложение (программа), запущенное на сервере и способное получать данные, отправленные с использованием CGI (Common Gateway Interface). Отсюда, собственно, и название этого класса приложений. Вообще, такое приложение может быть реализовано как угодно: на Java, сценарием PHP, JSP или ASP и т. д. Общее, что такие приложения выполняют, – прием запроса (набора значений полей формы) с некоторой служебной информацией и передача в ответ HTML?документа, являющегося результатом обработки принятого запроса.

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

Для вставки формы в HTML?документ используется элемент FORM. Он задается парными тегами

Action – обязательный для каждой формы параметр, URI программы?обработчика данных формы;

Method – задает способ отправки данных, введенных в форму, может принимать значения get (используется по умолчанию) или post;

Enctype – задает тип данных формы, если используется метод отправки post; по умолчанию имеет значение application/x-www-form-urlencoded; при необходимости передачи файлов используется значение multipart/form-data;

Accept-charset – используется при передаче файлов, позволяет указать, какие кодировки используются для каждого из файлов (список строковых значений – названий кодировок), по умолчанию используется значение UNKNOWN (приложение на сервере должно само определять кодировки);

Accept – описывает типы файлов (MIME?типы), передаваемые серверу; если этот параметр не использовать, то серверное приложение должно уметь само определять типы передаваемых ему файлов.

Пример описания формы:

Перед тем как приступить к рассмотрению элементов управления, которые можно поместить на форму, приведу несколько слов о методах отправки данных форм: для чего они нужны и чем отличаются. Итак, метод get часто используется для отправки небольших объемов данных, для которых достаточно набора символов кодировки ASCII. При этом данные формы присоединяются к строке URI, заданной в action формы. Для отделения данных от URI используется символ?. Точно таким же образом вы передавали данные почтовой программе при рассмотрении гиперссылок в гл. 5.

В отличие от get, метод post позволяет передавать CGI?приложению практически любые данные. При использовании метода post браузер отправляет приложению не строку URI с присоединенными данными, а по специальным правилам упаковывает данные формы и только после этого отправляет их CGI?приложению. Однако для того, чтобы с использованием метода post можно было пересылать бинарные или текстовые данные, для которых недостаточно символов кодировки ASCII, нужно указывать значения атрибута enctype элемента FORM равным multipart/form-data.

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

Стандартными являются все элементы управления, которые можно поместить на HTML?форму. Просто нужно как?то объединить и назвать элементы управления, которые используются чаще всего: однострочное текстовое поле, поле для ввода пароля, флажки, переключатели, кнопки (как пользовательские, так и выполняющие стандартные действия), поля имен файлов. Все упомянутые элементы управления отображаются браузером Internet Explorer так, как показано на рис. 9.2.

Рис. 9.2. Стандартные элементы управления

Для обозначения всех этих элементов управления используется один HTML?элемент – INPUT. Элемент задается одиночным тегом и имеет следующие атрибуты:

Type – принимает строку, задающую тип элемента управления (по умолчанию используется строка text, и создается, соответственно, поле для ввода текста), возможные значения и специфика работы соответствующих элементов управления рассмотрены далее;

Name – используется для задания имени элементу управления (строка, которая, помимо идентификации элемента управления, добавляется в данные, отсылаемые серверу);

Value – начальное значение для полей ввода текста и полей для указания имен файлов, также используется как надпись таких элементов управления, как кнопки; необязательно для всех элементов управления, кроме флажков и переключателей;

Checked – булев атрибут, если он установлен, то флажок или переключатель считается (и отображается браузером) установленным (см. рис. 9.1);

Disabled – булев атрибут, установка которого не позволяет пользователю работать с элементом управления;

Readonly – булев атрибут, позволяет запретить изменение состояния элемента управления (работает только для текстовых полей и поля выбора файла, так что для остальных элементов управления лучше использовать атрибут disabled, однако при этом данные деактивированных элементов управления не отправляются серверу);

Size – задает размер элемента управления (единицы измерения и действие специфичны для разных элементов управления);

Maxlenth – задает максимальную длину текста, который может быть введен в текстовые поля (положительное численное значение);

Src – для элемента управления image задает расположение используемого изображения;

Title – описание элемента управления (может отображаться браузерами как всплывающая подсказка);

Align – задает горизонтальное выравнивание элемента управления, работает так же, как и для любого другого HTML?элемента, поддерживающего этот атрибут;

Tabindex – номер элемента управления при навигации при помощи табуляции;

Accesskey – горячая клавиша для элемента управления (для перехода к элементу управления нужно нажать Alt и заданную клавишу).

После того как дано начальное описание элемента INPUT, можно проанализировать текст HTML?документа с формой, показанной на рис. 9.2 (пример 9.1).

Пример 9.1. Пример использования HTML-элемента INPUT

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

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

alt = "asfdsvdf">

Флажок:

checked>

Два переключателя:

и

Поле с именами файлов:

Щелчок на этом изображении также приведет к отправке данных:

В приведенном примере использованы все возможные значения атрибута type, кроме значения hidden. Поскольку использование каждого из значений атрибута type налагает различные ограничения на использование других атрибутов HTML?элемента INPUT, то целесообразно рассмотреть влияние каждого значения подробно. Для краткости особенности использования каждого значения сведены в таблицу (табл. 9.1).

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

Теперь рассмотрим, как вставить в форму более продвинутый элемент управления для редактирования текста – многострочное текстовое поле. Этот элемент управления обозначается HTML?элементом TEXTAREA и задается парными тегами и .

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

При отображении в текстовом поле форматирование текста сохраняется точно так же, как при использовании HTML?элемента PRE.

В целом для настройки элемента TEXTAREA используются те же атрибуты, что и для настройки элемента INPUT со значением атрибута type, равным text или password. Однако размер элемента управления задается не атрибутом size, а с помощью следующих атрибутов:

Rows – задает количество строк, которые отображаются без необходимости вертикальной прокрутки;

Cols – задает максимальное количество символов в строке текстового поля, отображаемое без переноса.

Многострочное текстовое поле выглядит так, как показано на рис. 9.3 (в браузере Internet Explorer).

Рис. 9.3. Многострочное текстовое поле

Для создания приведенного на рисунке текстового поля использовался следующий фрагмент кода (пример 9.2).

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

</p><p>Первый перевод строки не учитывается</p><p>Все последующие переводы строки учитываются</p><p>Учитываются также отступы от начала строки</p><p>Можно использовать зарезервированные символы HTML, типа <>& и прочие</p><p>

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

Рис. 9.4. Кнопка с расширенными возможностями

Новый вид кнопок используется аналогично кнопкам, создаваемым HTML?элементом INPUT со значением атрибута type, равным button. Новые кнопки отличаются от своего аналога, прежде всего, созданием: для задания HTML?элемента BUTTON используются парные теги и , между которыми помещается форматированный текст. Так, за создание кнопки, показанной на рис. 9.4, отвечает следующий HTML?код (пример 9.3).

Пример 9.3. Создание кнопки BUTTON

На этом виде кнопок может быть помещен любой

HTML-текст c использованием разметки

Даже таблицы, не говоря уже об изображениях:

Таблица

1

2

3

4 Внимание! В тексте между тегами и правильного HTML-документа не должны задаваться другие HTML-элементы, обладающие возможностями гиперссылок. В лучшем случае, если браузер это предусматривает, то такие HTML-элементы будут просто игнорироваться. В худшем же случае, если браузер не переносит HTML-документ с ошибками, то его поведение вообще сложно предугадать. Специфичным в настройке кнопки, создаваемой HTML?элементом BUTTON, является использование атрибута type для задания типа кнопки: submit (отправка формы при нажатии), reset (сброс значений элементов управления формы при нажатии) или button (пользовательская кнопка, связываемая со сценарием). Кроме того, доступны атрибуты name, title, disabled, tabindex и accesskey, использование которых полностью аналогично использованию атрибутов элемента INPUT. Следует особо рассмотреть атрибут value. Его использование только для подписи кнопки становится бессмысленным. Однако в спецификации HTML 4.01 говорится, что предполагается отправка значения этого атрибута вместе с прочими данными формы (видимо при нажатии соответствующей кнопки, имеющей значение атрибута type, равное submit, тогда задание значения атрибута value является весьма полезным для определения на сервере того, какую именно кнопку нажал пользователь). Меню При создании форм можно использовать еще один достаточно удобный элемент управления, позволяющий выбрать одну или несколько альтернатив из списка – меню (или список параметров). Этот элемент управления добавляется на форму использованием трех HTML?элементов: SELECT, OPTGROUP и OPTION. Хотя обязательно использовать только первый и последний из них. Начнем с HTML?элемента SELECT – он является контейнером пунктов меню, задается при помощи парных тегов и и поддерживает следующие атрибуты: Name – имя меню, которое также используется как название параметра при отправке формы; Size – задает количество строк, одновременно видимых пользователем; Multiple – булев атрибут, позволяет разрешить выделение нескольких пунктов меню одновременно; Disabled – булев атрибут, деактивирует меню; Title – текст подсказки для меню; Tabindex – номер при перемещении между элементами управления при помощи табуляции. Элемент управления меню может представляться различными браузерами по?разному: в виде списка, в виде раскрывающегося списка, в виде раскрывающегося меню, наконец. Рассмотрим представление меню браузером Internet Explorer. В зависимости от значения атрибута size меню может выглядеть так, как показано на рис. 9.5. Рис. 9.5. Внешний вид меню Если использовать атрибут multiple, то Internet Explorer покажет меню простым списком даже при значении size равном 1: в раскрывающемся списке несколько пунктов сразу выбрать нельзя. Ниже приведен фрагмент текста HTML?документа, создающий два меню, показанных на рис. 9.5 (согласитесь, что задание меню сходно с заданием списков) (пример 9.4). Пример 9.4. Два простых меню Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 Пункт 6 Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 Пункт 6 В тексте примера вы видите также упомянутый ранее HTML?элемент OPTION. Итак, этот элемент используется для задания отдельных пунктов меню. Он задается парными тегами и (закрывающий тег необязателен), между которыми помещается текст пункта меню. Имеет следующие атрибуты: Value – текст, который будет отправлен с формой при выборе пункта меню; Selected – булев атрибут, позволяет выделить пункт меню по умолчанию (не следует устанавливать для нескольких пунктов одно меню, если не установлен атрибут multiple); Disabled – булев атрибут, запрещает выбор пункта меню (правда, в реализации меню списками, как в Internet Explorer, это сделать довольно сложно, поэтому разработчики браузера особенно не мучились и не реализовали этот атрибут). Теперь осталось рассмотреть, для чего нужен третий HTML?элемент – OPTGROUP. Так вот, элемент OPTGROUP используется для группировки пунктов меню. Группы создаются заключением HTML?элементов OPTION, определяющих пункты меню одной группы, в парные теги и . Параметры группы можно настроить с использованием следующих атрибутов HTML?элемента OPTGROUP: Label – строка с подписью для группы; Disabled – запретить выбор пунктов меню, принадлежащих этой группе (аналогично атрибуту disabled для элемента OPTION). Ниже приведен пример разбиения пунктов меню на группы для двух меню (пример 9.5). Пример 9.5. Группировка пунктов меню Пункт 1.1 Пункт 1.2 Пункт 1.3 Пункт 2.1 Пункт 2.2 Пункт 2.3 Пункт 1.1 Пункт 1.2 Пункт 1.3 Пункт 2.1 Пункт 2.2 Пункт 2.3 Меню, описанные в примере 9.5, выглядят так, как показано на рис. 9.6. Рис. 9.6. Внешний вид меню с группированными пунктами Подписи элементов управления Некоторые элементы управления, например кнопки, содержат надписи, по которым пользователь может определить назначение этих элементов управления. Для других элементов типа текстовых полей, флажков и т. п. приходится создавать подписи вручную, смешивая определения элементов управления формы с текстом. Существует еще один способ задания подписей к элементам управления – использование HTML?элемента LABEL. Задание подписей таким образом осуществляется ничуть не легче, а даже тяжелей, однако добавляет возможностей по автоматической обработке HTML?документа. Итак, рассмотрим, каким образом создаются подписи с использованием элемента LABEL: между парными тегами и помещается текст подписи, а атрибуту for элемента LABEL присваивается значение, идентифицирующее нужный элемент управления. При задании значения атрибута for следует помнить, что нужно использовать значение атрибута id нужного элемента управления. Это значит, что элементам управления нужно дополнительно задавать значения атрибута id. Пример создания подписи таким образом: Введите пароль: В рассмотренном примере элемент LABEL явно ассоциируется с полем ввода пароля. Существует еще способ, при котором можно ассоциировать подпись с элементом управления неявно (без задания значения атрибута for элемента LABEL). Для этого нужно поместить элемент управления в теле элемента LABEL. Предыдущий пример при этом может выглядеть так: Введите пароль: Текст может находиться до или после определения элемента управления. В теле HTML?элемента LABEL в этом случае должно быть только одно определение элемента управления. 9.3. Группировка элементов управления При создании форм есть возможность сделать более выразительным общее предназначение некоторых элементов управления, дополнительно заключив их в рамку так, как показано на рис. 9.1. Рамку можно подписать, а можно оставить без подписи. Рамка создается при помощи HTML?элемента FIELDSET. Между парными тегами и помещаются определения элементов управления, принадлежащих группе. Вокруг этих элементов управления и будет нарисована рамка. Для создания подписи к рамке нужно внутри элемента FIELDSET определить элемент LEGEND. Этот HTML?элемент задается при помощи парных тегов и , между которыми помещается текст подписи. Можно «поиграть» также с выравниванием подписи при помощи атрибута align, однако следует знать, что разные браузеры по?разному реализуют значения этого атрибута, а некоторые значения и совсем не поддерживают. В заключение рассмотрим, как реализована группировка элементов управления формы, показанной на рис. 9.1 (пример 9.6). Этот пример является практически законченной страницей с формой: жаль, что по адресу somesite.com/cgi-bin/proc.exe нет реального CGI?приложения, способного обрабатывать форму. Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – , – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии. 1) Создание простой формы Теги и задают начало и конец формы. Начинающий форму тег содержит два атрибута: action и method . Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET . Замечание Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки. $text = nl2br ($_POST [ "mytext" ]); ?> Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050. Решение: Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы. Обсуждение: Для начала создадим два файла: form.html и action.php . В файле form.html будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами: I. Ввод данных вручную: 2000 2001 2002 …………………………………………… 2050 II. Ввод данных через цикл: $year = 2000 ; for ($i = 0 ; $i <= 50 ; $i ++) // Цикл от 0 до 50 { $new_years = $year + $i ; // Формируем новое значение echo "" . $new_years . "" ; //Формируем новую строчку } ?> Как видно, второй пример с циклом, более компактный. Думаю, не стоит приводить скрипт обработчика данной формы, потому что он обрабатывается точно так же как текстовое поле, т.е. значения списка можно извлечь из суперглобального массива $_POST . Описание: Создадим HTML-форму для отправки файла на сервер. В данной html-форме присутствует элемент browse , который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку "Передать файл" , файл передается сценарию-обработчику. Затем необходимо написать сценарий обработчик action.php . Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл: if(isset($_FILES [ "myfile" ])) // Если файл существует { $catalog = "../image/" ; // Наш каталог if (is_dir ($catalog )) // Если такой каталог есть { $myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Времменый файл $myfile_name = $_FILES [ "myfile" ][ "name" ]; // Имя файла if(! copy ($myfile , $catalog )) echo "Ошибка при копировании файла " . $myfile_name // Если неудалось скопировать файл } else mkdir ("../image/" ); // Если такого каталога нет, то мы его создадим } ?> Замечание Если вы доверяете пользователям закачивать на ваш сервер любые файлы, нужно быть предельно осторожным. Злоумышленники могут внедрить «нехороший» код в картинку или файл и отправить на сервер. В таких случаях нужно жестоко контролировать загрузку файлов. Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер. Также хотел бы продемонстрировать пример с элементом checkbox . Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox ’a не выбран, то суперглобальная переменная $_POST вернет пустое значение: Синий Черный Белый if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Если выбран хоть 1 элемент else echo "Выберите значение" ; ?> Читайте также Ремонт Начальная страница Mozilla Firefox: как изменить домашнюю и настроить стартовую страницу 2024-05-12 16:29:53 Wi-fi настройка AutoCAD: Сохраняем чертеж в JPEG 2024-05-12 16:29:53 Вирусы Навигаторы оффлайн (без интернета) для Андроид: рейтинговый обзор 2024-05-11 16:48:48 Программы Как узнать сколько ядер в компьютере и какие работают 2024-05-11 16:48:48 Понравилось? Лайкни нас на Facebook