ООП в JavaScript. Лабораторная работа 3
Форма, кнопка, текстовое поле

Вернемся к самому первому примеру:

Пример №1 Введите свое имя и нажмите кнопку

Это пример использования формы, которая содержит такие элементы как текстовое поле и кнопку. Формы предназначены для создания интерактивных страниц, т.е. страниц, позволяющих посетителю сайта ввести некую информацию. Как, например, в данном случае свое имя.

Формы размещаются в web-документе с помощью тега <form> </form>. Ввести элементы формы и определить их свойства можно с помощью тега <input>. В общем виде код для ввода элемента формы выглядит следующим образом:

<form id="имя формы " name="имя формы ">
<input type="тип элемента" id="имя-индентификатор элемента " name="имя элемента" value="надпись" />
</form>

Ключевое слово type определяет тип объекта (text - текстовое поле, button - кнопка и т.п.),
ключевое слово id задает имя-идентификатор объекта формы, также как и ключевое слово name;
value - текст, отображаемый в (на) объекте (одно из свойств объекта).

Обратите внимание, что объект форма сам обладает параметрами id и name.

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

Виды элементов форм:

1) текстовое поле

Однострочное текстовое поле. Используется для ввода простейшей информации: имена, адреса и пр. Выглядит так:

<input type="text" id="Text1" size="30" value="Начальное значение поля" / >

Результат - на web-странице появляется следующий объект:

2) кнопка

Кнопка - это область окна, которая реагирует на щелчки мыши. Элемент кнопка вводится следующим образом:

<input type="button" id="button1" value="Нажми меня!" />

Данным кодом мы вводим кнопку с надписью "Нажми меня!", однако при ее нажатие ничего не произойдет, так как любую желаемую реакцию интерфейса нужно программировать. Т.е. нужно ввести событие нажатие на кнопку onmousedown и написать что должно при этом произойти. например измениться свойство кнопки value.

<input type="button" id="button2" value="Нажми меня!" onmousedown="this.value='ну нажми еще раз...' "/>

В результате получим следующее:

Часто необходимо, чтобы при нажатии кнопки появлялось на экране диалоговое окно. Для этого можно использовать метод alert():

<input type="button" id="button3" value="Нажмите кнопку " onmousedown="alert('Добро пожаловать!')"/>

В примере 1 необходимо было изменить текст в текстовом поле, т.е. изменить свойство объекта текстовое поле. Для изменения свойства любого объекта необходимо записать следующее:

объект.свойство="новое значение свойства"

Но как обратиться к объекту текстовое поле? Для обращения к объекту формы служит id ( идентификатор объекта). Т.е. если мы задали id объекта - Text1, то следующая запись должна изменить его свойство - к старому тексту содержащемуся в объекте слева и справа будет добавлен текст "Здравствуйте" и "!"соответственно:

"Text1.value='Здравствуйте, '+ Text1.value + ' !' "

Но такое обращение к объекту можно использовать только в пределах одной формы, т.е. если объект текстовое поле и кнопка, содержатся внутри одного тега <form></form>! A если текстовое поле содержится в другой форме, то нужно соблюдать иерархию объектов. Т.е. сначала нужно обратится к объекту форма, а уже затем к объекту текстовое поле:

объект.вложенный объект.свойство вложенного объекта="новое значение свойства"

"Form1.Text1.value='Здравствуйте, '+ Form1.Text1.value + ' !' "

А если необходимо создать отдельную функцию для изменения свойства объекта, то оба вышеприведенных варианта будут работать только в Internet Explorer, так как только этот браузер поддерживает прямое обращение к объекту

Только для Internet Explorer!!!! <script type="text/javascript"> function PR1() { Text1.value="Здравствуйте,"+Text1.value + "!" } </script>

Для остальных браузеров, для того чтобы обратиться к элементу, нужно воспользоваться методом getElementById() объекта document:

document.getElementById("Text1").value="Здравствуйте,"+document.getElementById("Text1").value + "!"

Задание №1 1) Создайте файл, соответствующий стандарту XHTML 1.1 или XHTML 1.0 Strict 2) Создайте код для примера №1 всеми описанными выше способами.

 

Другие объекты формы

элемент	описание
text	Однострочное поле ввода текста (принято по умолчанию). Атрибут value задает начальное значение текста, size - размер поля ввода в символах, а maxlength - максимально возможное количество символов в данном поле. Атрибут readonly запрещает изменение текста поля.
password	Поле ввода пароля. Единственное отличие от поля ввода текста состоит в том, что вводимые символы маскируются, обычно заменой на звездочки. Однако, введенная информация передается серверу как обычный текст, поэтому этот элемент не обеспечивает уровня безопасности, достаточного для передачи номеров кредитных карт или другой существенно важной информации.
checkbox	Флажок. Атрибут value задает значение этого элемента, когда он выбран, а атрибут checked - выбран ли первоначально.
radio	Переключатель. Атрибут value задает значение этого элемента, когда он выбран, а атрибут checked - выбран ли первоначально.
reset	Кнопка сброса формы. Необязательный атрибут value перекрывает текст кнопки, принятый по умолчанию.
submit	Кнопка пересылки формы. Необязательный атрибут value перекрывает текст кнопки, принятый по умолчанию. Если форма содержит несколько таких кнопок, то атрибут name используется для передачи имени кнопки обработчику формы, что позволяет последнему осуществлять различные действия в зависимости от того, какая из кнопок пересылки формы была нажата.
image	Графическая кнопка пересылки формы. Атрибут src задает URI графического образа кнопки, а alt - альтернативный текст надписи на кнопке. При щелчке мышью по такой кнопке происходит пересылка формы, причем координаты щелчка мыши передаются серверу в виде name.x=x-value и name.y=y-value, где name - имя кнопки, а x-value и y-value - координаты в пикселях относительно верхнего левого угла образа. Атрибут usemap указывает на клиентскую карту ссылок и его значением должно быть имя закладки, заданное атрибутом name соответствующего элемента MAP. Атрибут ismap указывает на серверную карту ссылок.
button	Кнопка общего вида. Атрибут value задает текст кнопки, а атрибут onclick должен задавать сценарий, вызываемый при нажатии этой кнопки.
file	Селектор файлов. Атрибут value задает начальное имя файла, но обозреватели обычно игнорируют его из соображений безопасности. Необязательный атрибут accept задает список типов файлов, разделенных запятыми, которые поддерживаются сервером обработчика формы. Этот список может использоваться для отфильтровки только допустимых файлов, но современные обозреватели обычно игнорируют этот атрибут. Форма, содержащая селектор файлов, должна иметь атрибуты method=post и enctype="multipart/form-data".