Главная Обратная связь Поможем написать вашу работу!

Дисциплины:

Архитектура (936)
Биология (6393)
География (744)
История (25)
Компьютеры (1497)
Кулинария (2184)
Культура (3938)
Литература (5778)
Математика (5918)
Медицина (9278)
Механика (2776)
Образование (13883)
Политика (26404)
Правоведение (321)
Психология (56518)
Религия (1833)
Социология (23400)
Спорт (2350)
Строительство (17942)
Технология (5741)
Транспорт (14634)
Физика (1043)
Философия (440)
Финансы (17336)
Химия (4931)
Экология (6055)
Экономика (9200)
Электроника (7621)






Объекты, входящие в состав форм



Лабораторная работа №6

Работа с формами

Сценарии JavaScript часто применяются для предварительной обработки данных, введенных пользователями в формах. Проверенные данные затем могут предаваться расширениям CGI сервера Web. Кроме того, с помощью форм и сценариев JavaScript можно создавать активные страницы, способные получать от пользователя и обрабатывать произвольную информацию.

В наиболее общем виде оператор <FORM>, предназначенный для создания форм в документах HTML, выглядит следующим образом:

<FORM NAME="Имя_формы" TARGET="Имя_окна" ACTION="Адрес_URL_расширения_сервера" METHOD=GET или POST ENCTYPE="Кодировка_данных" onSubmit="Обработчик_события_Submit"> . . . определение полей и органов управления . . .</FORM>

 

Параметр NAME задает имя формы. Это имя нужно для адресации формы как свойства объекта Document.

Назначение параметра TARGET аналогично назначению этого же параметра в операторе <A>. Когда форма используется для передачи запроса расширению CGI сервера Web, ответ, полученный от сервера, отображается в окне. Имя этого окна задано параметром TARGET. Если ответ должен отображаться в том же окне, что и форма, то параметр TARGET задавать не нужно.

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

Параметр METHOD задает метод передачи данных из формы расширению сервера Web и может принимать значения GET или POST. Если данные из полей формы обрабатываются сценарием JavaScript локально, параметр METHOD задавать не нужно.

Параметр ENCTYPE задает тип MIME передаваемых данных и используется очень редко. Если форма предназначена для передачи текстовых данных (как это обычно бывает), этот параметр по умолчанию имеет значение application/x-www-form-urlencoded. В этом случае для передаваемых данных используется так называемая кодировка URL. Тип данных multipart/form-data позволяет передавать как текстовые, так и двоичные данные. При локальной обработке данных сценарием JavaScript параметр ENCTYPE не задается.



Помимо параметров, для формы можно определить обработчик события, связанный с кнопкой типа SUBMIT. Такая кнопка предназначена для посылки данных из заполненной формы расширению сервера Web. Назначив обработчик события, сценарий JavaScript может управлять этим процессом.

 

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

Объект form имеет два набора свойств, состав одного из которых является фиксированным, а состав другого зависит от того, какие поля и органы управления определены в форме. Первый набор свойств приведен ниже:

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

 

Большинство свойств первого набора просто отражает значения соответствующих параметров оператора <FORM>. Вы можете их использовать в сценариях JavaScript для проверки параметров. Что же касается массива elements, то в нем находятся объекты, соответствующие полям и органам управления, определенным в форме. Эти объекты образуют второй набор свойств объекта form:



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

 

Объекты, входящие в состав форм

Кнопка button

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

<INPUT TYPE="button" NAME="Имя_кнопки" VALUE="Надпись_на_кнопке" onClick="Обработчик_события">

Параметр TYPE оператора <INPUT> должен иметь значение button, как это показано в примере. С помощью параметра NAME задается имя объекта, соответствующего кнопке (а не надпись на кнопке). Надпись на кнопке указывается с помощью параметра VALUE. Определив обработчик события, можно задать сценарий JavaScript, который получит управление после того как пользователь нажмет на кнопку.



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

Объект button имеет два свойства, отражающие значения соответствующих параметров оператора <INPUT>:

Свойство Описание
name Значение параметра NAME
value Значение параметра VALUE

 

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

Для объекта button определен всего один метод, не имеющий параметров, - click:

click()

Вызов этого метода приводит к такому же эффекту, что и щелчок левой клавишей мыши по кнопке.

Пример сценария

В качестве примера приведен сценарий, выполняющий ообработку щелчка по кнопке с надписью Click me, расположенной в форме. Если нажать на эту кнопку, сценарий отобразит в окне браузера свойства кнопки как объекта класса button.

Листинг 1.

<HTML> <HEAD> <TITLE>Button demo</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function btnClick() { var szTxt=""; var szTxt1=""; szTxt=document.TestForm.bt.value; szTxt1=document.TestForm.bt.name; document.write("<HR>"); document.write("You press button: " + szTxt.bold() { метод .bold – жирное написание}+ ", name=" + szTxt1.bold()); document.write("<HR>"); } // --> </SCRIPT> </HEAD> <BODY BGCOLOR=white> <H1>Click Button</H1> <FORM NAME="TestForm"> <P><INPUT TYPE="button" NAME="bt" VALUE="Click me!" onClick="btnClick();"> </FORM> </BODY></HTML>

 

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

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

<INPUT TYPE="checkbox" NAME="Имя_переключателя_checkbox" VALUE="Значение" CHECKED onClick="Обработчик_события"> Текст, отображаемый рядом с переключателем

 

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

С помощью параметра VALUE вы можете определить строку, которая передается расширению сервера при посылке заполненной формы, если переключатель находится во включенном состоянии. Если этот параметр не указан, то по умолчанию посылается строка "on". Сценарий JavaScript также может получить значение параметра VALUE.

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

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

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

Объект checkbox имеет несколько свойств, отражающих значения соответствующих параметров оператора <INPUT>:

Свойство Описание
name Значение параметра NAME
checked Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае - false. С помощью этого свойства сценарий может изменять состояние переключателя
value Значение параметра VALUE
defaultChecked Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае - false. Сценарий может определять или устанавливать значение этого свойства

 

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

Для объекта checkbox определен один метод click, не имеющий параметров:

click()

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

 

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

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

<INPUT TYPE="radio" NAME=" Имя_переключателя_radio" VALUE="Значение" CHECKED onClick="Обработчик_события"> Текст, отображаемый рядом с переключателем

 

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

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

Объект radio имеет следующие свойства:

Свойство Описание
name Значение параметра NAME
checked Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае - false. С помощью этого свойства сценарий может изменять состояние переключателя
length Количество переключателей типа radio, определенных в группе с именем, заданным параметром NAME
value Значение параметра VALUE
defaultChecked Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае - false. Сценарий может определять или устанавливать значение этого свойства

 

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

Для объекта radio определен метод click, не имеющий параметров:

click()

При вызове этого метода переключатель выбирается для работы.


Просмотров 275

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




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