Элемент диалога служит для вывода - ввода многострочного текста. Создается тегом:
<textarea name="areName" rows="r" cols="c">
</textarea>
Где:
areName - идентификатор элемента;
r - высота области в строках;
c - ширина области в символах.
Текст элемента хранится в свойстве value. При выводе текста, для формирования строк, в конец строки нужно включать ESC последовательность \n.
Флажки
Используются флажки для предоставления выбора пользователю данных из предопределенного набора значений. Флажок, используемый в блоках данных, с многозначным выбором называется ячейкой и создается тегом:
<input type="checkbox" name="chkName">
Здесь:
chkName - идентификатор флажка;
Для предварительной активизации флажка используется параметр checked (признак активности флажка - наличие символа Ö в его поле). Проверка состояния флажка и изменение его состояния в коде выполняется с помощью одноименного свойства checked. Значение false соответствует выключенному состоянию, а значение true активному.
В блоках с однозначным выбором используется флажок радиокнопка. Создается аналогичным тегом, в качестве типа следует указать значение radio.
Чтобы создать блок с однозначным выбором следует всем флажкам блока задать одинаковый идентификатор.
Пример. На рисунке 3.2 показана страница с тремя элементами диалога. Блок однозначного выбора с двумя радиокнопками, ячейка и командная кнопка для опроса состояния блока и ячейки. Результат опроса выводится в системное окно службы сообщений браузера.
Код функции fState для события кнопки onClick будет иметь вид:
function fState(){
var mes="";
mes+="Block action\n";
var forma=document.frmGo
if (forma.elements[0].checked){
mes+="One";
}
if (forma.elements[1].checked){
mes+="Two";
}
if (forma.chkBox.checked)
mes+="\nControl- OK";
else
mes+="\nControl- NO";
alert(mes);
}
Для опроса состояния блока кнопок используется коллекция elements формы. Она позволяет по индексу обратиться к любому элементу формы. Индексация ведется с нуля. Элементы диалога в коллекцию помещаются в порядке следования тегов из размещения в форму.
Списки
Элемент диалога позволяет пользователю выбрать значение из определенного набора данных. Пользователь может сделать однозначный выбор, либо отобрать несколько значений в произвольном порядке.
Список с однозначным выбором создается тегами:
<select name="lstName">
<option value="значение1">строка1
<option value="значение2">строка2
…
</select>
Где:
lstName - идентификатор списка;
строкаi - текст элемента списка, выводимый на экран.
Список с многозначным выбором создается с помощью аналогичных тегов. В головной тег следует добавить ключевое слово multiple. Параметр value хранит символьное данное, связанное с конкретным элементом списка - строкой, на экране не отображается и является не обязательным.
При опросе списков однозначного выбора используется коллекция строк элементов списка options. Символы выбранной строки хранятся в свойстве text. Для доступа к строке выбранного элемента нужно указать ее индекс. Индексируются строки с нуля. Значение индекса выбранной строки хранится в свойстве selectedIndex коллекции. Доступ к значению строки осуществляется с помощью свойства value.
При многозначном выборе следует выполнить перебор всех строк коллекции и отобрать активные строки путем проверки свойства selected, коллекции options для каждой строки. Для определения количества строк нужно использовать свойство length коллекции.
Пример №1. Требуется выполнить опрос списка с однозначным выбором. Нужно вывести выбранную строку списка и значение, связанное с этой строкой. Теги для создания формы:
<form name="frmGo">
<select name="lstMes" onChange="fState()">
<option value="YES!">message 1
<option value="NO!" selected>message 2
<option value="OK!">message 3
</select>
</form>
В списке три строки, вторая строка выбрана по умолчанию.
При выборе строки списка порождается событие onChange и выполняется функция fState, в которой написан код опроса списка.
Код функции:
function fState(){
var mes="";
var idx;
var forma=document.frmGo;
idx=forma.lstMes.selectedIndex;
mes=forma.lstMes.options[idx].text
+"\n"+forma.lstMes.options[idx].value
alert(mes);
}
Результат накапливается в символьную переменную mes и ее значение выводится службой сообщений браузера.
Пример №2. Требуется опросить список из примера номер 1. Список многозначный. Результат опроса выводится в текстовую область формы (см. рисунок 3.3).
Вывод происходит в текстовую область display. На рисунке показан результат работы функции. Выбор в списке производится щелчками мыши при нажатой клавише CTRL. Можно отметить первый элемент списка при нажатой клавише CTRL, а последний элемент выбрать при нажатой клавише SHIFT. В результате будет выделено сразу несколько строк списка.
Контрольные вопросы
1. Какие типы сценариев используются в сети Интернет?
2. Дайте классификацию элементов диалога клиентских HTML формах.
3. Как создать клиентскую форму HTML?
4. Что такое событие JavaScript и событийная процедура?
5. Как программируется реакция при нажатии кнопки формы?
6. Какую структуру имеет страница при размещении скрипта обработки формы?
7. Как получить доступ в коде JavaScript к форме и ее элементам диалога?
8. Какие типы текстовых полей используются при создании форм?
9. В чем разница между текстовым полем и текстовой областью формы?
10. Как программируется опрос блока однозначного выбора формы?
11. Как программируется опрос блока многозначного выбора формы?
12. Как опрашивается список однозначного выбора формы?
13. Как опрашивается список многозначного выбора формы?
