Программирование форм

Июль 26, 2022

Главная
Информатика
Программирование форм

Содержание

2. Как обратиться к форме в программах на JavaScript? 1) document.fname.iname.value="Текст"; 2) document.forms[0].elements[0].value="Текст"; document.forms['fname'].elements['iname'].value="Текст"; Контейнер FORM
3. Объект Form
4. Свойство action отвечает за вызов CGI-скрипта. В нем указывается URL этого скрипта. Но там, где можно
5. Свойство method определяет метод доступа к ресурсам HTTP-сервера из программы-браузера. В зависимости от того, как автор
6. document.write('По умолчанию установлен метод: '+document.f.method+'. '); Пример
7. Свойство target определяет имя окна, в которое следует загружать результат обращения к CGI-скрипту. Альтернативы: использовать значение
8. Свойство encoding объекта Form (а также атрибут enctype контейнера FORM ) задает, каким образом данные из
9. Значения свойства encoding объекта Form
10. При генерации встроенного в документ объекта Form браузер создает и связанный с ним массив ( коллекцию
11. Метод submit() позволяет проинициировать передачу введенных в форму данных на сервер: Ваше имя пользователя на intuit:
12. Метод reset() позволяет восстановить значения полей формы, заданные по умолчанию. Другими словами, вызов метода reset() равносилен
13. Событие Submit возникает (и соответствующий обработчик события onSubmit вызывается) при нажатии пользователем на кнопку типа submit
14. Событие Reset возникает (и соответствующий обработчик события onReset вызывается) при нажатии пользователем на кнопку типа reset
15. Стандартная схема именования по именам либо по индексам: document.форма.элемент.свойство // точечная нотация document.форма.элемент["свойство"] // скобочная нотация
16. value this.value //здесь this ссылается на элемент "e" form.e.value // form есть свойство объекта "e" (равное
17. Поля ввода (контейнер INPUT типа TYPE=text) являются одним из наиболее популярных объектов программирования на JavaScript. Это
18. value (текущее значение поля ввода) defaultValue (значение поля ввода по умолчанию) size (число умещающихся в поле
19. focus() - устанавливает фокус на данном поле blur() - убирает фокус с данного поля select() -
20. onChange вызывается, когда пользователь (но не скрипт) изменил значение в поле ввода (и кликнул вне поля
21. В HTML-формах для реализации списков вариантов используется контейнер , который вмещает в себя контейнеры . При
22. В отличие от многих других встроенных в DOM объектов JavaScript, имеет конструктор. Программист может сам создать
23. Встроенный массив ( коллекция ) options[] - это одно из свойств объекта Select. Элементы этого массива
24. Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе. В HTML-коде он расположен между
25. Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Посмотрим, что происходит, когда
26. Кнопки
27. В каком случае при вызове метода (из любого места JavaScript-программы) будет автоматически вызван и соответствующий обработчик
28. Кнопка типа button вводится в форму главным образом для того, чтобы можно было выполнить какие-либо действия
29. Кнопка отправки ( submit ) позволяет отправить данные, введенные в форму, на сервер. В простейшем случае
30. Вызов метода submit() формы не равносилен нажатию кнопки отправки. При вызове этого метода будет выполнено только
32. Скачать презентацию

Слайд 2

Как обратиться к форме в программах

на JavaScript?
1) document.fname.iname.value="Текст";
2) document.forms[0].elements[0].value="Текст";
document.forms['fname'].elements['iname'].value="Текст";

Контейнер FORM

Слайд 3

Объект Form

Слайд 4

Свойство action отвечает за вызов CGI-скрипта. В нем указывается URL этого скрипта. Но там,

где можно указать URL, можно указать и его схему javascript:.
ПРИМЕР.

Свойство action

Слайд 5

Свойство method определяет метод доступа к ресурсам HTTP-сервера из программы-браузера. В зависимости от того, как

автор HTML-страницы собирается получать и обрабатывать данные из формы, он может выбрать тот или иной метод доступа. На практике чаще всего используются методы GET и POST.

Свойство method

Слайд 6

метод на POST">

Пример

Слайд 7

Свойство target определяет имя окна, в которое следует загружать результат обращения к CGI-скрипту.
Альтернативы:
использовать

значение этого свойства внутри JavaScript-программ для указания окна, куда требуется загружать результат работы CGI-скрипта,
получить идентификатор окна или задействовать свойства окна opener, top и parent.

Свойство target

Слайд 8

Свойство encoding объекта Form (а также атрибут enctype контейнера FORM ) задает, каким образом данные из формы должны быть

закодированы перед их отправкой на сервер.

Свойство encoding

Слайд 9

Значения свойства encoding объекта Form

Слайд 10

При генерации встроенного в документ объекта Form браузер создает и связанный с ним

массив ( коллекцию ) полей формы elements[]. Обычно к полям обращаются по имени, но можно обращаться и по индексу массива полей формы.
ПРИМЕР.

Коллекция elements[]

Слайд 11

Метод submit() позволяет проинициировать передачу введенных в форму данных на сервер:

Ваше

имя пользователя на intuit:

Посмотреть рейтинг
В данном примере, кнопки отправки ( submit ) у формы нет, но нажав на ссылку, мы выполняем отправку данных на сервер.

Метод submit()

Слайд 12

Метод reset() позволяет восстановить значения полей формы, заданные по умолчанию. Другими словами, вызов

метода reset() равносилен нажатию на кнопку INPUT типа TYPE=reset, но при этом саму эту кнопку создавать не требуется.
ПРИМЕР.

Метод reset()

Слайд 13

Событие Submit возникает (и соответствующий обработчик события onSubmit вызывается) при нажатии пользователем на кнопку типа submit или

при выполнении метода submit().
Фукцию обработки этого события можно переопределить и даже вовсе отменить. Для этой цели введен атрибут onSubmit="код_программы" у контейнера

Слайд 14

Событие Reset возникает (и соответствующий обработчик события onReset вызывается) при нажатии пользователем на кнопку типа reset или

при выполнении метода reset().
Браузер сначала выполняет действия пользователя, а затем - свое действие по умолчанию. Но если последним оператором в обработчике onReset будет return false, то действие браузера по умолчанию выполняться не будет. Этот прием называется перехватом события.

Событие Reset

Слайд 15

Стандартная схема именования по именам либо по индексам:
document.форма.элемент.свойство // точечная нотация
document.форма.элемент["свойство"]

// скобочная нотация
document.forms["имя_формы"]. elements["имя_элемента"].свойство
document.forms[индекс_формы].elements[индекс_элемента].свойство

Поля формы и их объекты

Слайд 16

value
this.value //здесь this ссылается на элемент "e"
form.e.value // form

есть свойство объекта "e" (равное "f")
this.form.e.value // комбинируем оба способа
document.f.e.value // почти полная запись
window.document.f.e.value // это самая полная запись
document.f.e.form.e.value // можно итерировать "form.e."

Эквивалентные записи

Слайд 17

Поля ввода (контейнер INPUT типа TYPE=text) являются одним из наиболее популярных

объектов программирования на JavaScript. Это объясняется тем, что, помимо использования по прямому назначению, их применяют и в целях отладки программ, выводя в эти поля промежуточные значения переменных и свойств объектов.
ПРИМЕР

Текстовое поле ввода (объект Text)

Слайд 18

value (текущее значение поля ввода)
defaultValue (значение поля ввода по умолчанию)
size (число умещающихся в поле символов, т.е. видимых)
maxLength (максимальное число символов, которое

можно присвоить значению данного поля)
readOnly (может ли пользователь менять значение поля)
disabled (может ли пользователь установить фокус на этом поле).

Свойства

Слайд 19

focus() - устанавливает фокус на данном поле
blur() - убирает фокус с данного

поля
select() - выделяет весь введенный текст (чтобы, например, его можно было скопировать в буфер, либо удалить, нажав клавишу Delete).

Методы

Слайд 20

onChange вызывается, когда пользователь (но не скрипт) изменил значение в поле ввода (и кликнул вне поля ввода)
onSelect - когда пользователь начинает выделять текст,

расположенный в поле
onFocus и onBlur - когда поле получает и теряет фокус, соответственно
onClick и onDblClick - когда пользователь совершил одинарный или двойной щелчок мышью на поле, соответственно

Обработчики событий

Слайд 21

В HTML-формах для реализации списков вариантов используется контейнер

Списки вариантов (объекты Select и Option)

Слайд 22

В отличие от многих других встроенных в DOM объектов JavaScript, имеет конструктор. Программист

может сам создать объект класса Option:
opt = new Option([ text, [ value, [ defaultSelected, [ selected ]]]]);
text - строка текста, которая размещается в контейнере );
value - значение, которое передается серверу при выборе альтернативы, связанной с объектом Option ;
defaultSelected - выбрана ли эта альтернатива по умолчанию ( true / false );
selected - альтернатива была выбрана пользователем ( true / false ).

Создание объектов Option

Слайд 23

Встроенный массив ( коллекция ) options[] - это одно из свойств объекта Select. Элементы этого массива

являются полноценными объектами класса Option. Они создаются по мере загрузки страницы браузером. Количество объектов Option, содержащихся в объекте document.f.s класса Select, можно узнать с помощью стандартного свойства массива: document.f.s.options.length.
ПРИМЕРЫ

Коллекция options[]

Слайд 24

Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе. В HTML-коде

он расположен между тэгами . Свойство value содержит значение атрибута VALUE тэга
Где text, а где value?

Свойства text и value объекта Option

Слайд 25

Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Посмотрим,

что происходит, когда мы имеем дело с полем выбора множественных вариантов.
ПРИМЕР

Обработчик события onChange

Слайд 26

TYPE=image SRC=a.gif>

Кнопки

Слайд 27

В каком случае при вызове метода (из любого места JavaScript-программы) будет

автоматически вызван и соответствующий обработчик события, заданный пользователем в атрибуте кнопки или формы?
при вызове метода click() кнопки вызывается и обработчик события onClick этой формы;
при вызове метода submit() формы
не вызывается обработчик события onSubmit
формы;
при вызове метода reset() формы вызывается и обработчик события onReset формы.

Взаимодействие методов

Слайд 28

Кнопка типа button вводится в форму главным образом для того, чтобы можно было

выполнить какие-либо действия либо при ее нажатии пользователем, либо при вызове метода click().

Кнопка Button

Слайд 29

Кнопка отправки ( submit ) позволяет отправить данные, введенные в форму, на сервер. В

простейшем случае - стандартным действием браузера при отправке данных на сервер является просто перезагрузка текущей страницы

Кнопка submit

Слайд 30

Вызов метода submit() формы не равносилен нажатию кнопки отправки. При вызове этого метода будет выполнено

только третье из вышеперечисленных трех действий - отправка данных на сервер.
ПРИМЕРЫ

Метод submit() формы