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

Стр 1 из 2Следующая ⇒

Федеральное бюджетное государственное общеобразовательное учреждение высшего образовательно

Уфимский государственный нефтяной технический университет

Кафедра автоматизации технологических процессов и производств

Учебно-методическое пособие

по лабораторной работе № 8

« Работа с формами в JavaScript »

Уфа 2017

Лабораторная работа № 8. Работа с формами в JavaScript

Краткие сведения о формах

Для работы практически всех программ требуется ввод исходных данных. В предыдущей лабораторной работе для этого использовались окна ввода типа «prompt». Поскольку вводить информацию через всплывающие окна не всегда удобно в спецификации языка HTML предусмотрен набор специальных объектов для ввода информации разных типов. Эти объекты принято группировать на т.н. формах.

Наиболее простой тег создания формы имеет вид

… перечень объектов, располагаемых на форме

</form>

Форма описывается непосредственно в разделе <body> html-файла в соответствующем для нее месте. Собственно форма не отображается на web-странице, но отображаются расположенные на ней объекты.

Свойства форм перечислены в таблице 1.

Таблица 1 - Свойства форм

Свойство	Описание
action	Содержит значение параметра ACTION
elements	Массив всех элементов (полей и органов управления), определенных в форме
encoding	Содержит значение параметра ENCTYPE
length	Размер массива elements
method	Содержит значение параметра METHOD
target	Содержит значение параметра TARGET

На форме располагаются объекты, типы которых перечислены в таблице 2. Более подробно они будут рассмотрены далее.

Таблица 2 - Типы объектов для форм

Тип	Описание
button	Кнопка с заданной надписью.
checkbox	Переключатель типа Check Box может использоваться в составе набора независимых друг от друга переключателей или отдельно.
hidden	Скрытое поле, которое не отображается.
password	Текстовое поле для ввода паролей. Набранный в этом поле текст не отображается на экране.
radio	Переключатель для группы зависимых друг от друга переключателей. Используется обычно для выбора одного значения из нескольких возможных.
reset	Кнопка, с помощью которой пользователь может сбросить содержимое полей ввода и состояние переключателей в их исходное состояние.
select	Список произвольных текстовых строк.
submit	Кнопка для посылки данных из заполненной формы расширению сервера Web. Для этой кнопки можно задать произвольную надпись.
text	Однострочное текстовое поле.
textarea	Многострочное текстовое поле.

Кнопка button

В общем виде кнопка класса button определяется в форме с помощью оператора <INPUT> следующим образом:

<INPUT TYPE="button"

NAME="Имя_кнопки"

VALUE="Надпись_на_кнопке"

onClick="Обработчик_события">

Параметр TYPE оператора <INPUT> должен иметь значение button.

С помощью параметра NAME задается имя объекта, соответствующего кнопке, по которому можно будет в дальнейшем к этой кнопке обращаться.

Надпись на кнопке указывается с помощью параметра VALUE.

Определив обработчик события, можно задать сценарий JavaScript, который получит управление после того как пользователь нажмет на кнопку.

Кнопка имеет единственное событие «onClick», которое возникает при нажатии мышью кнопки.

Пример использования кнопки.

<HTML> <HEAD> <TITLE>Демонстрация кнопки</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Щелкните по кнопке</H1> <FORM NAME="Form1"> <INPUT TYPE="button" NAME="knopka" VALUE="Щелкни!" onClick="btnClick();"> </FORM> </BODY></HTML>

Переключатель checkbox

Переключатели checkbox обычно применяются для выбора каких-либо независимых друг от друга параметров или возможностей. В форме переключатель checkbox создается с помощью оператора <INPUT> с параметром TYPE, равным строке "checkbox":

<INPUT TYPE="checkbox"

NAME="Имя_переключателя_checkbox"

VALUE="Значение"

CHECKED

onClick="Обработчик_события">

Текст, отображаемый рядом с переключателем

Параметр NAME задает имя переключателя. Это имя можно использовать для определения состояния этого переключателя в сценарии JavaScript.

Параметр VALUE указывает надпись возле переключателя.

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

Имеет единственное событие «onClick», которое возникает при выборе переключателя.

Переключатель radio

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

<INPUT TYPE="radio"

NAME=" Имя_переключателя_radio"

VALUE="Значение"

CHECKED

onClick="Обработчик_события">

Текст, отображаемый рядом с переключателем

Назначение параметров NAME, VALUE и CHECKED переключателя radio такое же как и назначение аналогичных параметров переключателя checkbox. Отличие заключается в том, что все переключатели radio, принадлежащие к одной группе, должны иметь одинаковые имена, определенные параметром NAME. Что же касается переключателей checkbox, то если их несколько, то все они должны называться по-разному. Для того чтобы сценарий JavaScript, обрабатывающиq форму, мог узнать, какой же из переключателей radio группы находится во включенном состоянии, все такие переключатели должны иметь различные значения VALUE. Кроме того, только один из переключателей radio может быть определен с параметром CHECKED.

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

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

Наш документ содержит одну форму, в которой есть три переключателя с независимой фиксацией типа checkbox (расположенные в группе «Элементы страницы»), три переключателя с зависимой фиксацией (образующие группу Text color), и две кнопки - «Создать страницу» и «Сброс».

Если включен переключатель «Показать заголовок», создаваемый сценарием JavaScript документ HTML будет снабжен заголовком. При включении переключателя «Показать горизонтальные линии» информация о состоянии переключателей, отображаемая в документе, будет выделена сверху и снизу горизонтальными разделительными линиями. Переключатель «Вид таблицы» влияет на способ отображения информации. Если он включен, информация будет показана в табличном виде, а если выключен - в виде списка.

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

Листинг.

<HTML> <HEAD> <SCRIPT>  </SCRIPT> <TITLE>Переключатели checkbox и radio</TITLE> </HEAD> <BODY> <SCRIPT>  </SCRIPT> <FORM NAME="myform"> <B>Элементы страницы:</B> <P><INPUT TYPE="checkbox" NAME="chkTitle" onClick="if(this.checked) {bTitle=true;}"> Показать заголовок <BR><INPUT TYPE="checkbox" NAME="HorzLine" onClick="if(this.checked) {bHorzLine=true;}"> Показать горизонтальные линии <BR><INPUT TYPE="checkbox" NAME="Table" onClick="if(this.checked) {bTable=true;}"> Вид таблицы <P><B>Цвет текста:</B> <P><INPUT TYPE="radio" NAME="Color" CHECKED VALUE="Red" onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Красный <BR><INPUT TYPE="radio" NAME="Color" VALUE="Green" onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Зеленый <BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue" onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Синий <TABLE> <TR><TD><INPUT TYPE="button" NAME="btn" VALUE="Создать страницу" onClick="btnClick(this.form);"></TD> <TD><INPUT TYPE="reset" NAME="resetBtn" VALUE="Сброс" 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 можно определить три обработчика события: onFocus, onBlur и onChange. События onFocus и onBlur возникают, когда список получает и теряет фокус ввода соответственно. Событие onChange создается, когда пользователь изменяет состояние списка, то есть выбирает в нем другой элемент.

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

Помимо списков, в форме есть две кнопки с надписями «Завершить» и «Сброс». Кнопка «Сброс» возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке «Завершить», управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением.

Заметьте, что нумерация в списке начинается с нуля.

Листинг.

<HTML> <HEAD> <TITLE>Работа со списками</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Работа со списками</H1> <FORM NAME="Sel"> <P>Выберите цвет:<P> <SELECT NAME="ColorList"> <OPTION VALUE=Черный SELECTED> Черный <OPTION VALUE=Белый> Белый <OPTION VALUE=Красный> Красный <OPTION VALUE=Оранжевый> Оранжевый <OPTION VALUE=Желтый> Желтый <OPTION VALUE=Зеленый> Зеленый <OPTION VALUE=Голубой> Голубой <OPTION VALUE=Синий> Синий <OPTION VALUE=Фиолетовый> Фиолетовый </SELECT> <P>Выберите размер:<P> <SELECT NAME="SizeList" SIZE=3> <OPTION VALUE=Стандартный SELECTED> Стандартный <OPTION VALUE=Большой> Большой <OPTION VALUE=Средний> Средний <OPTION VALUE=Маленький> Маленький <OPTION VALUE=Очень_маленький> Очень маленький </SELECT> <P> <TABLE> <TR><TD><INPUT TYPE="button" VALUE="Завершить" onClick="Complete();"></TD> <TD><INPUT TYPE="reset" VALUE="Сброс"></TD></TR> </TABLE> </FORM> </BODY></HTML>

Однострочное поле text

Часто в формах, размещенных на web-страницах встречаются однострочные поля, предназначенные для ввода и редактирования текста. Для того чтобы встроить такое поле в форму, необходимо использовать оператор <INPUT> с параметром TYPE, равным значению "text":

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

С помощью параметра VALUE можно записать в поле произвольную текстовую строку. Эта строка будет отображаться сразу после загрузки документа HTML в окно браузера.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

Сразу после отображения поля редактирования свойства defaultValue и value хранят одинаковые строки. Когда пользователь редактирует текст, все изменения отражаются в свойстве value. Заметим, что изменяя содержимое свойства value, сценарий JavaScript может изменить содержимое поля редактирования.

Для объекта text можно запрограммировать обработчики для четырех типов событий: onFocus, onBlur, onChange, onSelect. Событие onFocus возникает, когда поле получает фокус ввода; onBlur - когда его теряет; onChange - при редактировании содержимого; onSelect - при выделении содержимого поля.

Пример (проверка анкеты)

Методику работы с текстовыми полями в сценариях JavaScript рассмотрим на примере документа HTML с формой для ввода анкеты.

Сценарий выполняет несложную обработку информации, которая вводится в текстовых полях этой формы. В частности, сценарий преобразует символы фамилии в прописные. Если указать возраст, меньший 18 лет, сценарий сделает его равным нулю. Если после заполнения анкеты нажать кнопку «ОК», на экране появится диалоговая панель, отображающая содержимое отдельных полей формы. Кнопка «Сброс» устанавливает поля в исходное состояние.

Листинг.

<HTML> <HEAD> <TITLE>Работа с текстовыми полями</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Заполните анкету</H1> <FORM NAME="Sel"> <TABLE> <TR><TD><B>Фамилия:</B></TD><TD><INPUT TYPE="text" NAME="family" onChange="this.value=this.value.toUpperCase()" SIZE="20" ></TD></TR> <TR><TD><B>Имя:</B></TD><TD><INPUT TYPE="text" NAME="Name" SIZE="20"></TD></TR> <TR><TD><B>Телефон:</B></TD><TD><INPUT TYPE="text" NAME="PhoneNumber" SIZE="10"></TD></TR> <TR><TD><B>Возраст:</B></TD><TD><INPUT TYPE="text" NAME="Age" VALUE="18" SIZE="4" onChange="this.value=CheckAge(this.value)" onFocus="this.select()" ></TD></TR> <P> <TABLE> <TR><TD><INPUT TYPE="button" VALUE="ОК" onClick="Complete();"></TD> <TD><INPUT TYPE="reset" VALUE="Сброс"></TD></TR> </TABLE> </FORM> </BODY></HTML>

Многострочное поле textarea

В случаях, когда редактируемый текст должен занимать несколько строк, в форме между операторами <TEXTAREA> и </TEXTAREA> располагают многострочное текстовое поле:

<TEXTAREA NAME="Имя_поля_textarea" ROWS="Количество_строк" COLS="Количество_столбцов" WRAP="Режим_свертки_текста" onBlur="Обработчик_события" onChange="Обработчик_события" onFocus="Обработчик_события" onSelect="Обработчик_события"> . . . Отображаемый текст . . .</TEXTAREA>

Здесь с помощью параметра NAME указывается имя поля. Оно нужно для того чтобы сценарий JavaScript мог обращаться к свойствам и методам этого поля.

Параметры ROWS и COLS определяют видимый размер многострочного поля редактирования, задавая, соответственно, количество строк и столбцов (количество символов, которые могут поместиться в одной строке).

Параметр WRAP задает способ свертки текста и может иметь одно из трех следующих значений:

Значение	Способ свертки текста
off	Свертка выключена, строки отображаются так, как вводятся
virtual	Строки сворачиваются только при отображении в окне редактирования, но передаются расширению сервера Web и сценарию JavaScript точно в таком виде, в котором вводятся
physical	При свертке в передаваемый текст записываются символы новой строки

Для объекта textarea определены такие же события, что и для объекта text.

Дата добавления: 2018-11-24; просмотров: 151; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 Следующая ⇒

Мы поможем в написании ваших работ!