Простые и графические кнопки

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

Пример

<button name="submit" value="submit">

Сообщение <IMG name= "n1" src="i1.jpg" alt="wow"></button>

Вид кнопки изменится в лучшую сторону, если надпись к рисунку выполнить непосредственно в графическом редакторе. Тип кнопки зависит от значения атрибута type:

• “submit” – кнопка передачи данных,

• “button” – обычная кнопка, с ней необходимо связать скрипт, - программный обработчик событий,

• “reset” – кнопка сброса.

Списки выбора

Списки выбора формируются с помощью контейнера select. В тэге можно применять следующие атрибуты:

• name – имя элемента управления,

• size – количество отображаемых на экране строк меню,

• multiple – применение этого атрибута обеспечивает возможность выбора одновременно нескольких пунктов в списке.

Со списками выбора можно связать обработчики событий onfocus (наведение «мыши» на список выбора), onblur (потеря фокуса выбора элемента), onchange (изменение элемента в списке выбора).

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

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

• selected – этот атрибут, если указан, то выделяет предопределенный пункт меню.

Пример

<form action = "/cgi-bin/mailform.pl” method = "post">

<p>

<select name="Tests" size = 3>

<optgroup label="BaseDisciplines">

<option value="pma_1" selected>Programming Languages

<option value="pma_2">Differential Equations

<option value="pma_3">History of Ukrain

</optgroup >

<optgroup label="DisciplinesOnDemand">

<option value="pma_4">Special Prog Languages

<option value="pma_5">Expert Systems

</optgroup >

</select >

<hr>

<input type = “submit”>

</form>

Тэги option могут логически группироваться с помощью контейнера optgroup. Группирование отображается в меню. Данные на сервер о списках выбора передаются в виде: name=value, где name – имя, указанное в тэге select, value – значение атрибута value, соответствующего выбранному пункту меню, а если атрибут не используется, то весь текст, сопоставленный тэгу option (и отображаемый в виде пункта меню). Если с тэгом select применен атрибут multiple, то на сервер передаются данные о всех выбранных пунктах меню в виде представленных выше пар, причем первые части этих пар (name) совпадают.

Текстовые области

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

• число строк и колонок, содержащихся в видимой части текстовой области, определяется атрибутами rows и cols (cols указывает количество букв в видимой части строки; атрибуты числовые),

• атрибут name содержит название текстовой области, что дает возможность в случае необходимости программно обращаться к ее содержимому,

• указание атрибута readonly запрещает ввод текста в текстовую область,

• атрибут wrap принимает следующие значения – off (текст продолжается ка одна длинная строка и необходимо пользоваться «Enter» для перехода к следующей строке), - virtual или physics (строки автоматически образуются по мере ввода текста).

Пример

<form action = "/cgi-bin//prog/text-read.pl" method = "post">

<p>

<textarea name = "thetext" rows = "20" cols = "80" wrap=virtual>

First line of initial text……………

Second line of initial text…………

</textarea>

<input type = "submit" value = "Отправить">< input type = "reset" value = “Сброс”>

</p>

</form>

При передаче на сервер имени текстовой области сопоставляется весь введенный текст, или если он не вводился, то значение атрибута value.