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

Презентация:



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

Лекция 11 Тема «Формы » Преподаватель: Халелова Е.Н.
JavaScript Объекты документа Объект History Свойства: current next previous length.
Интернет- технологии МИИГаИК. Указание XML-документов в ориентире на будущее
Web-программирование Кейно Павел Петрович
Действия выполняются в момент загрузки кода в браузер Действия выполняются в момент щелчка на ссылке.
Интерактивные формы на Web- страницах - перевод строки - перевод строки - форма на Web-странице - форма на Web-странице - поле раскрывающего cписка -
1 Учебный курс Введение в JavaScript и CGI Лекция 3 Программирование форм и графики кандидат технических наук Павел Брониславович Храмцов
1 2 1.Формы в HTML-документах 2.1. Тег 3. ТЕГ 4. Тег 5. Тег.
5.7.7 Формы на Web-страницах.
Списки на Web – страницах. Интерактивные формы на Web – страницах
Работа с DOM-моделью и пользовательский интерфейс По материалам курса University of Washington
Лекция 8 Обработка событий. Примеры привязки обработчиков событий Привязка с помощью атрибута обработчика: ; Информация о модели DOM консорциума W3C Привязка.
Все, что происходит в мире XML связано с хранением данных. Одна из технологий, позволяющих извлекать данные, не прибегая к методу программирования, именуется.
AJAX 1. AJAX изнутри 2. Фреймворк JQuery 3. Формирование и разбор данных в формате XML 4. Передача данных в формате JSON 5. Селекторы 6. Фреймворки JForm.
МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ Основы языка HTML.
Занятие 3. Верстка сайтов. Frame, FORM, CSS Докладчик: Калимуллин К.Г. Генеральный директор ООО «Группа Компаний ИТМ»
Создание Web-сайта Тема раздела:Создание Web-сайта Тема раздела:
JQuery Form Changer plugin Forms is comfortable and nicely Формы это удобно и красиво.
Создание форм Лекция 6. Сбор информации Элементы форм, такие как области редактирования текста, поля ввода флажков или меню, позволяют посетителям веб-сайта.
Транксрипт:

Формы в HTML

Элемент FORM Элемент уровня «блок» Управляющие элементы Просто текст Атрибуты: action – url обработчика method – post или get enctype – тип содержимого (для post) accept-charset target onSubmit

Управляющие элементы форм INPUT. Задаются атрибуты name, value Типы элемента INPUT (атрибут type): text, password – текстовое поле checkbox – флажок radio – «радио» кнопка submit, reset – кнопки для отсылки и «сброса» hidden – скрытое поле image – изображение button – кнопка без специального действия file – элементы для отправки файла

Дополнительные атрибуты элемента INPUT type=text, password size – ширина в символах maxlength – максимальный размер в символах type=radio, checkbox checked type=image src – url изображения type=reset, submit, button value – подпись

Примеры Флажки Получать уведомления по почте Скрывать адрес от посетителей Радиокнопки Ваш возраст: До 16 лет От 16 до 40 лет Больше 40 лет

Элементы для создания меню SELECT + OPTION name – атрибут элемента SELECT value – атрибут элемента OPTION Пример: Выберите напиток: Сок Пиво Молоко OPTGROUP с атрибутом label

Другие элементы форм TEXTAREA rows, cols, accesskey disabled, readonly BUTTON type (reset, submit, button) LABEL for – id элемента, для кот. метка accesskey FIELDSET – группа элементов LEGEND – заголовок для группы

Пример Возраст До 16 лет От 16 до 40 лет Больше 40 лет Почта Получать уведомления по почте Скрывать адрес от посетителей

События для форм FORM – onSubmit, onReset BUTTON – onFocus, onBlur, OnClick text, password – onChange, (onFocus, onBlur) SELECT – onChange, (onFocus, onBlur) Методы элементов формы: focus(), blur(), select()

Доступ к значениям формы Доступ клиента: Поля для всех элементов: name, value – соответствующие значения form – сама форма Поле только для SELECT: selectedIndex – номер выбранного пункта Для формы: все элементы являются подобъектами формы Доступ на сервере: при методе GET пары name, value попадают в часть адреса – запрос в виде name1=value1&name2=value2&…

Обработка событий Обработка клиентом: Вызов кода происходит ДО стандартной обработки Возврат значения false отменяет стандартную обработку (это позволяет, в частности, проверить данные перед отправкой на сервер) Обработка сервером: На сервере вызывается программа- обработчик запроса