1 Бурибаев Бахыт Бурибаевич e-mail: baxit@mail.ru. - презентация

Нажмите “сброс” и заполните з" title="8 2.1. Посылка формы по e-mail Приведенный ниже пример можно использовать как образец кодирования посылки формы по электронной почте. Нажмите “сброс” и заполните з" class="link_thumb"> 8 Посылка формы по Приведенный ниже пример можно использовать как образец кодирования посылки формы по электронной почте. Нажмите “сброс” и заполните заказ. Ваше имя: Ваш адрес: Нажмите “сброс” и заполните з"> Нажмите “сброс” и заполните заказ. Ваше имя: Ваш адрес: Прислать: "> Нажмите “сброс” и заполните з" title="8 2.1. Посылка формы по e-mail Приведенный ниже пример можно использовать как образец кодирования посылки формы по электронной почте. Нажмите “сброс” и заполните з">

9 9 отсылает форму, а поручает эту работу почтовой программе, установленной по умолчанию в операционной системе компьютера (например, Outlook). Письмо посылается в виде: Subject: Форма отправлена из Microsoft Internet Explorer name = Горбунков Семен Семенович = obj = Программный соковыжиматель Если поместить этот код в HTML-программу, то на гипер-текстовой страничке возникнет картинка, подобная той, что изображена на рис. Пользователь нажимает кнопку сброс, и поля принимают значения, установленные по умолчанию. Форма заполняется, и по нажатию кнопки послать заказ отправляется по адресу Обычно браузер не сам

10 10 3. Кнопки. Элемент С помощью тега в форме можно задать разные элементы ввода и управления. Атрибут nате Каждый тег может содержать атрибут name. Значение этого атрибута можно использовать как имя объекта, который браузер создает для этого тега. Пусть, например, задана форма с единственной строкой ввода (ее вид на экране показан на рис.):

11 11 В программе на JavaScript можно использовать конст-рукцию document.anketa.obj.value для доступа к свойству value объекта, построенного для тега. Эта запись «расшифровывается» так: document – объект document (родитель объект window); document.anketa – объект anketa (родитель объект document); document.anketa.obj – объект obj (родитель объект anketa); document.anketa.obj.value – свойство value объекта obj, оно соответствует атрибуту value тега с именем obj. Можно прочитать значение свойства value: var str = document.anketa.obj.value; Можно и изменить значение этого свойства: document.anketa.obj.value = "пыле истребитель" Такое присваивание приведет к мгновенной перерисовке экрана. Текст «крошкосшиватель» в поле ввода заменится на «пыле истребитель». Значение атрибута name как имя переменной, поэтому нельзя использовать в имени русские буквы и цифру в качестве первого символа.

12 Экранные кнопки Конкретный вид интерфейсного элемента задается атрибутом type. Рассмотрим значения этого атрибута, задающие экранные кнопки: reset - задает кнопку, нажатие на которую автоматически возвращает форму в исходное состояние (все поля ввода формы принимают значения, установленные в HTML -коде). Атрибут value задает надпись на кнопке submit - задает кнопку, нажатие на которую отправляет форму в сеть. Атрибут value задает надпись на кнопке button - задает обычную кнопку

13 13 Программное управление Объект, построенный браузером для тега (или тегов, ) имеет свойство value, которое соответствует одноименному атрибуту тега. Ниже приводится пример, демонстрирующий работу с этим свойством. Загрузите в браузер приведенный ниже текст. Поработайте с экранными кнопками и разбери-тесь в алгоритме работы программы.

Умная кнопка Умная кнопка 14 14 Умная кнопка Умная кнопка Умная кнопка Умная кнопка "> Умная кнопка Умная кнопка

15 15 Можно упростить обращение к полям формы, если использовать указание this ссылку на текущий экземпляр объекта и указание this.form - ссылку на объект, построенный для текущей формы: Как видите, в этом коде не потребовалось имя для формы. Синонимом имени внутри формы оказалась конструкция this.form. А внутри второго тега не потребовалось имя этого тега, вместо него использован синоним this. Как видите, в этом коде не потребовалось имя для формы. Синонимом имени внутри формы оказалась конструкция this.form. А внутри второго тега не потребовалось имя этого тега, вместо него использован синоним this.">

16 Строка ввода Значения text и password для атрибута type тега задает строку ввода: text - обычная строка ввода. Дополнительные атрибуты: · Атрибут value задает значение поля ввода по умолча-нию (именно это значение восстанавливается, когда пользователь нажимает кнопку ); · Атрибут size задает размер поля в символах. Если атрибут опущен, размер поля определяется длиной строки, заданной как значение атрибута value; · Атрибут maxlength задает максимальную длину строки, которую можно вписать в поле ввода.Если атрибут пропущен, длина не ограничена; · Атрибут readonly определяет строку «только для чтения».Такую строку пользователь не может редактировать. ">

Програ" title="17 password - строка для «секретного» ввода. От значе-ния text отличается только тем, что символы на экране при вводе отображаются звездочками. Секретная строка не копируется в буфер обмена. Програ" class="link_thumb"> 17 17 password - строка для «секретного» ввода. От значе-ния text отличается только тем, что символы на экране при вводе отображаются звездочками. Секретная строка не копируется в буфер обмена. Программное управление Объект, построенный браузером для тега (или ) имеет следующие свойства: value – текущее содержание строки ввода; defaultValue значение атрибута value в соответствующем теге. Чтобы лучше понять смысл свойств value и defaultValue, загрузим в браузер программу испытатель (в папке Студент) и поработаем с ним. Поработаем также на другом испытателе в той же папке и по коду испытателя разберемся, как он устроен. Програ"> Программное управление Объект, построенный браузером для тега (или ) имеет следующие свойства: value – текущее содержание строки ввода; defaultValue значение атрибута value в соответствующем теге. Чтобы лучше понять смысл свойств value и defaultValue, загрузим в браузер программу испытатель (в папке Студент) и поработаем с ним. Поработаем также на другом испытателе в той же папке и по коду испытателя разберемся, как он устроен."> Програ" title="17 password - строка для «секретного» ввода. От значе-ния text отличается только тем, что символы на экране при вводе отображаются звездочками. Секретная строка не копируется в буфер обмена. Програ">

18 18 4. Формы (флажки, радиокнопки) Теперь рассмотрим пару интерфейсных элементов, которые часто используются на интерактивных страницах: флажки и радиокнопки Флажки Флажки, или, как говорят, кнопки с независимой фиксацией хорошо знакомый элемент компьютерного интерфейса Флажки не зависят один от другого. Их можно устанавливать и сбрасывать в любой комбинации. Флажок задается тегом.

19 19 Дополнительные атрибуты тега для флажков: name - имя используется в скриптах для доступа к объекту, созданному для тега checked - логический атрибут; для него не указывается значения. Присутствие атрибута означает, что флажок установлен по умолчанию. Программное управление Объект, построенный браузером для тега имеет свойство checked. Это свойство принимает значение true, когда флажок установлен, и false в противном случае. Рассмотрим следующую программу, затем попробуем вывести ее результат через браузер.

20 20 Программное управление флажком Программное управление флажком Теперь п роделаем следующие опыты. Теперь п роделаем следующие опыты.">

21 21

22 22 1. Нажмите кнопку Проверить. Появится сообщение «Флажок не установлен». Флажок пока не установлен, ведь он задан кодом, в котором отсутствует атрибут checked: Свойство checked объекта, построенного для тега, имеет значение false как и выражение this.form.flag.checked в команде if. 2. Нажмите кнопку Изменить. Сработает код: this.form.flag.checked=!this.form.flag.checked; Свойство checked изменит свое значение с false на true. На экране в поле флажка появляется отметка (хотя мы ее там не ставили, а устроили ее появление на экране при помощи программного кода). 3. Нажмите кнопку Проверить. На экран выводится сообщение «Флажок установлен». Теперь выражение this.form.flag.checked имеет значение true. Как видите, свойство checked можно не только читать, но и менять, устанавливая или сбрасывая флажок программным путем.

23 23 Здесь свойство checked объекта имеет совсем другой смысл, чем одноименный атрибут тега. Атрибут указывает, что флажок установлен по умолчанию, а свойство хранит текущее состояние флажка, которое может меняться пользователем или программой. Программы, которые «страдают склерозом», могут легко проверить, был ли установлен атрибут checked в теге, если обратятся к свойству defaultChecked соответствующего объекта. Загрузим в браузер следующий код, затем посмотрим его результат на странице.

24 24 checked и defaultChecked checked и defaultChecked ">

25 25 Проделаем следующие опыты: 1. Нажмем последовательно кнопки checked и defaultChecked. Получим сообщения «true» и «true». Это означает, что флажок установлен и отметка установлена по умолчанию. 2. Снимем отметку с флажка и снова нажмите кнопки checked и defaultChecked. Получим сообщения «false» и «true». Это означает, что флажок не установлен, но он был установлен по умолчанию. 3. Уберем из тега атрибут checked и снова нажмем кнопки checked и defaultChecked. Получим сообщения «false» и «false». Это означает, что флажок сейчас не установлен и не был установлен по умолчанию. 4. Отметим флажок и нажмите кнопки checked и defaultChecked. Получим сообщения «true» и «false». Это означает, что флажок установлен, но он не был установлен по умолчанию.

26 Радиокнопки Радиокнопки (селекторные кнопки, переключатель) предназначены для выбора одного варианта из нескольких альтернативных. Подобно кнопочному переключателю диапазона волн в радиоприемнике, выбор одной кнопки автоматически снимает отметку с другой (рис.). Радиокнопка задается тегом Дополнительные атрибуты приведены на следующей странице:

27 27 name - имя; используется в скриптах для доступа к объек-ту, созданному для тега. Кнопки, входящие в одну взаимосвязанную группу, должны иметь одинаковое имя. Именно по этому критерию (одинаковое имя) браузер распознает переключатель и организует снятие отметки с кнопки, когда выбрана другая в этой же группе. Доступ к отдельной кнопке в группе выполняется так же как к элем-ентам массива при помощи индекса. Кнопки в группе нумеруются в порядке их следования в HTML - коде, нумерация начинается с нуля. checked - логический атрибут; для него не указывается значение. Присутствие атрибута означает, что отметка на кнопке установлена по умолчанию. Программное управление. Объект, построенный браузером для тега, имеет свойство checked. Это свойство принимает значение true, когда кнопка выбрана,и false в противном случае. Рассмотрим следующую программу и ее результат.

28 28 Программное управление радиокнопкой Программное управление радиокнопкой ">

29 29 Проделайте следующие опыты. 1. Нажмите кнопку Проверить. Появится сообщение «Отметка на 1-й кнопке не установлена». Радиокнопка и в самом деле выключена, ведь она задана кодом, в котором отсутствует атрибут checked. Это означает, что свойс- тво checked объекта, построенного для этой радиокнопки, имеет значение false, как и выражение this.form.tst[0].checked в команде if. 2. Нажмите кнопку Изменить. Выполнится код: onclick="var x = this.form.tst[0].checked; this.form.tst[0].checked=this.form.tst[l].checked; this.form, test[1].checked=x;" Этот код перебросит отметку со второй кнопки на первую. 3. Нажмите кнопку Проверить. Последует сообщение «Отметка на 1-й кнопке установлена». Это означает, что теперь выражение this.form.tst[0].checked имеет значение true.

30 30 Свойство checked объекта не совпадает с одноименным атрибу- том тега. Атрибут checked устанавливает отметку на кнопке по умолчанию, а свойство checked отражает текущее состояние кнопки. Как и в случае с флажками, атрибуту checked соответствует свойство defaultChecked. Изменяя активность одной кнопки перек- лючателя, программист берет на себя от- ветственность правильно изменить свойс- тво checked у всех его остальных кнопок (отмечена может быть только одна кноп- ка в группе). Пример. Умножитель, программа кото- рого представлен ниже, отображается на экране так, как показано на рис.

31 31 Умножитель Умножитель

32 32 20 *

=0;) { if(this.form.op1[i].checked) ind1=i; if(this.form.op2[i].checked) ind2=i; } this.form." title="33 33 33 =0;) { if(this.form.op1[i].checked) ind1=i; if(this.form.op2[i].checked) ind2=i; } this.form."> =0;) { if(this.form.op1[i].checked) ind1=i; if(this.form.op2[i].checked) ind2=i; } this.form.result.value= op1[ind1]*op2[ind2];"> "> =0;) { if(this.form.op1[i].checked) ind1=i; if(this.form.op2[i].checked) ind2=i; } this.form." title="33

34 34

Похожие презентации

---

Лекция 11 Тема «Формы » Преподаватель: Халелова Е.Н.

Интернет- технологии МИИГаИК. Указание XML-документов в ориентире на будущее

Разработка и использование интерактивных форм Общие положения. Общие положения. Современные браузеры позволяют пользователю, заполнив специальную форму,

1 2 1.Формы в HTML-документах 2.1. Тег 3. ТЕГ 4. Тег 5. Тег.

5.7.7 Формы на Web-страницах.

Формы в HTML. Элемент FORM Элемент уровня «блок» Управляющие элементы Просто текст Атрибуты: action – url обработчика method – post или get enctype –

Списки на Web – страницах. Интерактивные формы на Web – страницах 23.07.20151.

JavaScript.6 2012. Объекты документа Объект History Свойства: current next previous length.

Web-программирование Кейно Павел Петрович pavel@mati.ru pavel@mati.ru.

Для создания интерактивных Web-страниц, обеспечивающих обратную связь, используются специальные формы. Форма – это набор элементов, таких как поля ввода,

Открытое занятие по дисциплине «Web-программирование»

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

Поисковые системы в Интернет Выход Почтовый клиент Mozilla Thunderbird Создание почтового ящика Скачать информацию из Интернета.

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

Язык создания web- страниц - HTML. Основные теги Указывает программе просмотра страниц что это HTML документ. Определяет место, где помещается различная.

Переменные и операторы УРОК 2. Переменные ПЕРЕМЕННАЯ – ?... контейнер для хранения данных. Переменная имеет имя – это….? последовательность букв, цифр.

Освоение электронной почты. Электронная почта (electronic mail, E-mail) – служба, которая позволяет любому пользователю сети передавать и получать электронные.

АЛГОРИТМИЗАЦИЯ. Алгоритм Алгоритм – описание конечной последовательности действий, приводящей от исходных данных к нужному результату. Где встречаются.

1 Бурибаев Бахыт Бурибаевич e-mail: baxit@mail.ru.

Объектно-ориентированный язык программирования. Выберите в реальной жизни любой объект (холодильник, магнитофон, машина) и опишите его свойства, методы,

Подбираем похожую презентацию...

Готово:

АЛГОРИТМИЗАЦИЯ. Алгоритм Алгоритм – описание конечной последовательности действий, приводящей от исходных данных к нужному результату. Где встречаются.