Пример формы с переключателями

⇐ Предыдущая 123 4 5 Следующая ⇒

В этом разделе приведен исходный текст документа HTML со сценарием, предназначенным для динамического создания новой страницы при помощи сценария JavaScript. Параметры этой страницы определяются состоянием переключателей типа checkbox и radio, расположенными в этом документе.

Документ содержит одну форму, в которой есть три переключателя с независимой фиксацией типа checkbox (расположенные в группе Page elements), три переключателя с зависимой фиксацией (образующие группу Text color), и две кнопки - Create Page и Reset.

Если включен переключатель Show title, создаваемый сценарием JavaScript документ HTML будет снабжен заголовком. При включении переключателя Show horizontal lines информация о состоянии переключателей, отображаемая в документе, будет выделена сверху и снизу горизонтальными разделительными линиями. Переключатель Table view влияет на способ отображения информации. Если он включен, информация будет показана в табличном виде, а если выключен - в виде списка.

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

Листинг 2.

<HTML> <HEAD> <SCRIPT>  </SCRIPT> <TITLE>Переключатели checkbox и radio</TITLE> </HEAD> <BODY> <SCRIPT>  </SCRIPT> <FORM NAME="myform"> <B>Page elements:</B> <P><INPUT TYPE="checkbox" NAME="chkTitle" onClick="if(this.checked) {bTitle=true;}"> Show title <BR><INPUT TYPE="checkbox" NAME="HorzLine" onClick="if(this.checked) {bHorzLine=true;}"> Show horizontal lines <BR><INPUT TYPE="checkbox" NAME="Table" onClick="if(this.checked) {bTable=true;}"> Table view <P><B>Text color:</B> <P><INPUT TYPE="radio" NAME="Color" CHECKED VALUE="Red" onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Red <BR><INPUT TYPE="radio" NAME="Color" VALUE="Green" onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Green <BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue" onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Blue <TABLE> <TR><TD><INPUT TYPE="button" NAME="btn" VALUE="Create Page" onClick="btnClick(this.form);"></TD> <TD><INPUT TYPE="reset" NAME="resetBtn" VALUE="Reset" onClick="resetRCHBox();"></TD></TR> </TABLE> </FORM> </BODY></HTML>

Список select

С помощью оператора <SELECT> вы можете разместить внутри формы список, допускающий выбор одной или просмотр нескольких строк. Формат оператора <SELECT> приведен ниже:

<SELECT NAME="Имя_списка_select" SIZE="Размер_списка" MULTIPLE onBlur="Обработчик_события" onChange="Обработчик_события" onFocus="Обработчик_события"> <OPTION VALUE="Значение" SELECTED> Текст <OPTION VALUE="Значение"> Текст ... <OPTION> Текст</SELECT>

Все параметры оператора <SELECT> необязательные, однако для того чтобы сценарий JavaScript мог работать со списком, необходимо указать по крайней мере параметр NAME, определяющий имя списка.

Параметр SIZE задает размер видимой части списка в строках.

Если указан необязательный параметр MULTIPLE, объект select является списком просмотра, а не списком выбора.

Для определения элементов списка предназначен оператор <OPTION>. Оператор <OPTION> может иметь два параметра - VALUE и SELECTED. Параметр VALUE определяет значение, которое передается расширению сервера Web. С помощью параметра SELECTED отмечается строка списка, выделенная по умолчанию при начальном отображении формы. После оператора <OPTION> следует текст, отображаемый в строках списка.

Свойства объекта select

Ниже перечислены свойства объекта select, доступные сценарию JavaScript:

Свойство	Описание
length	Количество элементов (строк) в списке
name	Значение параметра NAME
options	Массив объектов options, соответствующих элементам массива, заданным при помощи оператора <OPTION>
selectedIndex	Номер выбранного элемента или первого элемента среди нескольких выбранных (если указан параметр MULTIPLE и пользователь выбрал в списке несколько элементов)

Одним из свойств списка select является массив options. В этом массиве хранятся элементы списка, определенные оператором <OPTION>. Каждый элемент такого массива есть ни что иное как объект со следующим набором свойств:

Свойство	Описание
defaultSelected	Отражает состояние параметра SELECTED
index	Порядковый номер (индекс) элемента списка
length	Количество элементов в выбранном объекте
name	Значение параметра NAME
selected	С помощью свойства selected сценарий JavaScript может выбрать данный элемент
selectedIndex	Номер выбранного элемента
text	Текст, указанный после оператора <OPTION>
value	Значение параметра VALUE

Методы объекта select

Для объекта select определено два метода, не имеющих параметров, - focus и blur. Первый из этих методов позволяет передать списку фокус ввода, а второй - отобрать этот фокус у списка.

⇐ Предыдущая 123 4 5 Следующая ⇒

Эта страница нарушает авторские права

allrefrs.ru - 2021 год. Все права принадлежат их авторам!