- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Основы WEB. HTML формы презентация
Содержание
- 1. Основы WEB. HTML формы
- 2. Формы HTML Форма (англ. form) в HTML
- 3. Теги форм - определяет границы формы
- 4. Элементы управления INPUT - тег определяющий
- 5. Элемент управления INPUT type="text" - ввод
- 6. Элемент управления INPUT type="submit" - кнопка
- 7. Пример работы простой формы
- 8. Пройденный материал: Функции. Основы работы Процедурное программирование
- 9. Элемент управления INPUT+ - поле ввода
- 10. Элемент управления INPUT++ - задание флажка
- 11. Элемент управления INPUT+++ - поле выбора
- 12. Элемент управления TEXTAREA - элемент ввода
- 13. Элементы управления SELECT и OPTION -
- 14. Пройденный материал: Функции. Основы работы Процедурное программирование
- 15. Самостоятельная работа Создавайте формы с различными элементами
Формы HTML Форма (англ. form) в HTML — раздел документа, позволяющий пользователю вводить информацию для последующей обработки Формы служат для сбора данных, вводимых пользователем и отправки этих данных на веб-сервер
Слайд 2Формы HTML
Форма (англ. form) в HTML — раздел документа, позволяющий пользователю
вводить информацию для последующей обработки
Формы служат для сбора данных, вводимых пользователем и отправки этих данных на веб-сервер (однако данные могут быть использованы и в работе программ, выполняемых на клиентской стороне)
Синтаксически форма в HTML задаётся с помощью элемента form и в дополнение к разметке обычных элементов содержит разметку для элементов управления (англ. controls).
Формы служат для сбора данных, вводимых пользователем и отправки этих данных на веб-сервер (однако данные могут быть использованы и в работе программ, выполняемых на клиентской стороне)
Синтаксически форма в HTML задаётся с помощью элемента form и в дополнение к разметке обычных элементов содержит разметку для элементов управления (англ. controls).
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 3Теги форм
- определяет границы формы
action= - указывает приложение – обработчик
формы;
method=get | post - определяет метод передачи параметров;
enctype=application/x-www-form-urlencoded | multipart/form-data - тип кодирования для содержимого , multipart/form-data употребляется только с методом POST и, обычно, для передачи ввода с содержанием файла
target= - определяет фрейм для отображения результата;
method=get | post - определяет метод передачи параметров;
enctype=application/x-www-form-urlencoded | multipart/form-data - тип кодирования для содержимого , multipart/form-data употребляется только с методом POST и, обычно, для передачи ввода с содержанием файла
target=
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 4Элементы управления INPUT
- тег определяющий элемент управления, предназначен для ввода
данных различных типов
Тип данных, который позволяет вводить данный элемент INPUT определяется значением обязательного атрибута type: type: text | textarea | file | password | checkbox | radio | submit | image | reset | hidden
Если элемент управления должен передавать данные, он обязан иметь имя, определяемое значением атрибута name
)
Тип данных, который позволяет вводить данный элемент INPUT определяется значением обязательного атрибута type: type: text | textarea | file | password | checkbox | radio | submit | image | reset | hidden
Если элемент управления должен передавать данные, он обязан иметь имя, определяемое значением атрибута name
)
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 5Элемент управления INPUT type="text"
- ввод одной строки текста
name: CDATA
– имя передаваемого параметра
size: integer – размер окна поля ввода
maxlength: integer – допустимая длинна ввода в символах
size: integer – размер окна поля ввода
maxlength: integer – допустимая длинна ввода в символах
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 6Элемент управления INPUT type="submit"
- кнопка передачи формы, запускает передачу
собранных в форме данных на сервер
value: CDATA – текст, изображенный на кнопке
name: CDATA – имя передаваемого параметра
value: CDATA – текст, изображенный на кнопке
name: CDATA – имя передаваемого параметра
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 8Пройденный материал:
Функции. Основы работы
Процедурное программирование и подпрограммы
Функции в PHP и особенности
работы с ними
Описание функций
Использование псевдотипов для описания функций
Примеры описания функций
Описание функций
Использование псевдотипов для описания функций
Примеры описания функций
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 9Элемент управления INPUT+
- поле ввода пароля
size: integer –
размер окна поля ввода
maxlength: integer – допустимая длинна ввода в символах
- кнопка сброса формы, запускает передачу собранных в форме данных на сервер
value: CDATA – текст, изображенный на кнопке (по умолчанию – Reset)
- элемент для передачи скрытого параметра на сервер
value: CDATA – значение передаваемого параметра
- пользовательская кнопка - изображение, при нажатии отправляет данные формы на сервер, добавляя координаты указателя мыши
src: URL – указание изображения кнопки
align – выравнивание изображения, аналогично атрибуту тега IMG
maxlength: integer – допустимая длинна ввода в символах
- кнопка сброса формы, запускает передачу собранных в форме данных на сервер
value: CDATA – текст, изображенный на кнопке (по умолчанию – Reset)
- элемент для передачи скрытого параметра на сервер
value: CDATA – значение передаваемого параметра
- пользовательская кнопка - изображение, при нажатии отправляет данные формы на сервер, добавляя координаты указателя мыши
src: URL – указание изображения кнопки
align – выравнивание изображения, аналогично атрибуту тега IMG
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 10Элемент управления INPUT++
- задание флажка (поля группы checkbox), при
передаче на сервер группа значений разделяется запятыми
value: CDATA – значение флажка
- задание радиокнопки (поля группы радиокнопок)
value: CDATA – значение флажка
value: CDATA – значение флажка
- задание радиокнопки (поля группы радиокнопок)
value: CDATA – значение флажка
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 11Элемент управления INPUT+++
- поле выбора файлов
size: integer – размер
окна поля ввода
maxlength: integer – допустимая длинна ввода в символах
maxlength: integer – допустимая длинна ввода в символах
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 12Элемент управления TEXTAREA
- элемент ввода многострочного текста
name: CDATA – определяет
имя параметра для идентификации сервером
rows – определяет количество строк текста видимых на экране;
cols – определяет ширину текстового поля в печатных символах;
wrap: off | virtual | physical - определяет способ переноса при заполнении формы
rows – определяет количество строк текста видимых на экране;
cols – определяет ширину текстового поля в печатных символах;
wrap: off | virtual | physical - определяет способ переноса при заполнении формы
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 13Элементы управления SELECT и OPTION
- задает список выбора
name: CDATA –
имя передаваемого параметра
multiple – флаг возможности множественного выбора
size: n – число строк в прокручиваемом списке (выпадающее меню при n=1)
multiple – флаг возможности множественного выбора
size: n – число строк в прокручиваемом списке (выпадающее меню при n=1)
Слайд 14Пройденный материал:
Функции. Основы работы
Процедурное программирование и подпрограммы
Функции в PHP и особенности
работы с ними
Описание функций
Использование псевдотипов для описания функций
Примеры описания функций
Описание функций
Использование псевдотипов для описания функций
Примеры описания функций
© НГУЭУ 2013-2015
Основы WWW: HTML формы
Слайд 15Самостоятельная работа
Создавайте формы с различными элементами управления и параметрами. Просматривайте HTTP
трафик, определяя какие данные были переданы формой на веб-сервер.
© НГУЭУ 2013-2015
Основы WWW: HTML формы
