Определение элементов формы

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

Рис. 18.1. Элементы HTML'формы

456 Глава 18. Формы и элементы форм

если вы еще не знакомы с элементами HTML_форм, на рисунке приведены номе_ ра, идентифицирующие каждый тип элементов. Мы завершим этот раздел при_ мером 18.1, демонстрирующим HTML_ и JavaScript_код, используемый для соз_ дания показанной на рисунке формы и подключения обработчиков событий ко всем элементам формы.

В табл. 18.1 перечислены типы элементов формы, доступных HTML_дизайнерам и JavaScript_программистам. В первом столбце таблицы представлены типы эле_ ментов формы, во втором – HTML_теги, определяющие элементы данного типа, в третьем – значения свойства type для элементов каждого типа. Как мы видели, каждый объект Form содержит массив elements[], в котором хранятся объекты, представляющие элементы формы. В каждом из этих элементов имеется свойст_ во type, которое может применяться, чтобы отличить один тип элементов от дру_ гого. По свойству type неизвестного элемента формы JavaScript_код может опре_ делить тип элемента и выяснить, что можно делать с этим элементом. И нако_ нец, четвертый столбец таблицы предоставляет наиболее важный или наиболее часто используемый обработчик события для элемента данного типа, а пятый – краткое описание каждого типа.

Обратите внимание: имена «Button» (кнопка), «Checkbox» (флажок) и прочие из первого столбца табл. 18.1 могут не соответствовать фактическим названиям клиентских JavaScript_объектов. Полное описание элементов различных типов вы найдете в части IV книги в разделах Input, Option, Select и Textarea. Кроме того, эти элементы форм подробно обсуждаются в этой главе далее.

Теперь, получив представление о различных типах элементов формы и HTML_те_ гах, используемых для их создания, посмотрим на HTML_код из примера 18.1, предназначенный для создания формы, которая показана на рис. 18.1. Хотя большую часть примера занимает HTML_код, в нем также есть JavaScript_код, в котором определены обработчики событий каждого из элементов формы. Вы заметите, что обработчики событий не определяются как HTML_атрибуты. Здесь ими являются JavaScript_функции, присваиваемые свойствам объектов из мас_ сива elements[] формы. Все обработчики событий вызывают функцию report(), содержащую код, который работает с разными элементами формы. В следую_ щем разделе этой главы описано все, что вам надо знать для понимания работы функции report().

Пример 18.1. HTML'форма, содержащая все виды элементов

<form name="everything"> <!__ HTML_форма "все в одном"... __> <table border="border" cellpadding="5"> <!__ в виде большой HTML_таблицы __> <tr>

<td>Username:<br>[1]<input type="text" name="username" size="15"></td> <td>Password:<br>[2]<input type="password" name="password" size="15"></td> <td rowspan="4">Input Events[3]<br>

458 Глава 18. Формы и элементы форм

<textarea name="textarea" rows="20" cols="28"></textarea></td> <td rowspan="4" align="center" valign="center">

[9]<input type="button" value="Clear" name="clearbutton"><br> [10]<input type="submit" name="submitbutton" value="Submit"><br> [11]<input type="reset" name="resetbutton" value="Reset"></td></tr>

<tr>

<td colspan="2">

Filename: [4]<input type="file" name="file" size="15"></td></tr>

<tr>

<td>My Computer Peripherals:<br>

[5]<input type="checkbox" name="extras" value="burner">DVD Writer<br> [5]<input type="checkbox" name="extras" value="printer">Printer<br> [5]<input type="checkbox" name="extras" value="card">Card Reader</td>

<td>My Web Browser:<br>

[6]<input type="radio" name="browser" value="ff">Firefox<br>

[6]<input type="radio" name="browser" value="ie">Internet Explorer<br> [6]<input type="radio" name="browser" value="other">Other</td></tr>

<tr>

<td>My Hobbies:[7]<br>

<select multiple="multiple" name="hobbies" size="4"> <option value="programming">Hacking JavaScript <option value="surfing">Surfing the Web

<option value="caffeine">Drinking Coffee <option value="annoying">Annoying my Friends

</select></td>

<td align="center" valign="center">My Favorite Color:<br>[8]

<option value="violet">Violet <option value="peach">Peach </select></td></tr>

</table>

</form>

<div align="center"> <!__ Еще одна таблица _ ключ к предыдущей __> <table border="4" bgcolor="pink" cellspacing="1" cellpadding="4">

<tr>

<td align="center"><b>Form Elements</b></td>

<td>[1] Text</td> <td>[2] Password</td> <td>[3] Textarea</td> <td>[4] FileU</td> <td>[5] Checkbox</td></tr>

<tr>

<td>[6] Radio</td> <td>[7] Select (list)</td> <td>[8] Select (menu)</td> <td>[9] Button</td> <td>[10] Submit</td> <td>[11] Reset</td></tr>

</table>

</div>

<script>

// Эта обобщенная функция добавляет сведения о событии к тексту в большом

// многострочном поле ввода на форме. Она вызывается из различных

// обработчиков событий.

function report(element, event) {

if ((element.type == "select_one") || (element.type == "select_multiple")){

// Эта функция добавляет к каждому элементу формы набор обработчиков событий.

// Она не проверяет, поддерживается ли в этом элементе данный обработчик,

// добавляются все обработчики событий. Обратите внимание, что обработчики

// событий вызывают приведенную ранее функцию report().

// Мы определяем обработчики событий, присваивая функции свойствам

// JavaScript_объектов, а не строки _ атрибутам HTML_элементов.

function addhandlers(f) {

// Цикл по всем элементам формы.

for(var i = 0; i < f.elements.length; i++) { var e = f.elements[i];

e.onclick = function() { report(this, 'Click'); } e.onchange = function() { report(this, 'Change'); } e.onfocus = function() { report(this, 'Focus'); } e.onblur = function() { report(this, 'Blur'); } e.onselect = function() { report(this, 'Select'); }

}

// Определить специальные обработчики событий для трех кнопок. f.clearbutton.onclick = function() {

this.form.textarea.value=''; report(this,'Click');

}

f.submitbutton.onclick = function () { report(this, 'Click'); return false;

}

f.resetbutton.onclick = function( ) {

this.form.reset( ); report(this, 'Click'); return false;

}

}

// В заключение активизировать форму, добавив всевозможные

// обработчики событий!

addhandlers(document.everything);

</script>