Скачать презентацию HTML і форми Викладач Нагірна К Т Скачать презентацию HTML і форми Викладач Нагірна К Т

Lesson_03_HTML-forms.pptx

  • Количество слайдов: 13

HTML і форми Викладач: Нагірна К. Т. , 2015 р. HTML і форми Викладач: Нагірна К. Т. , 2015 р.

Призначення форм Форма призначена для обміну даними між користувачем і сервером Область застосування форм Призначення форм Форма призначена для обміну даними між користувачем і сервером Область застосування форм не обмежена відправкою даних на сервер, за допомогою клієнтських скриптів можна отримати доступ до будь-якого елементу форми, змінювати його і використавувати у своїх скриптах. Документ може містити будь-яку кількість форм, але одночасно на сервер може бути відправлена тільки одна форма. Отже, дані форма форм повинні бути незалежні один від одного.

. . . Атрибут method може приймати" src="https://present5.com/presentation/134806094_424412229/image-3.jpg" alt="Форма та її елементи

Форма та її елементи

Тег <input> і його атрибути <input type=”тип поля” value=”значення” name=” ім’я”> , де name Тег і його атрибути , де name приймає будь-яке унікальне ім’я в межах однієї форми; Value - це значення за замовчуванням даного поля; type може приймати значення text, hidden, password, checkbox, radio, reset, submit

Елементи форми Поле введення <input type=”text” value=”…” name=” …” size =“…” maxlenght=“…”>, Де size Елементи форми Поле введення , Де size визначає довжину поля, а maxleght задає максимальна кількість символів, що може ввести користувач. Hidden - цей тип текстового поля браузер на відображає. Потрібний він для приховання відвідувача яких-небудь даних. Password - цей тип поля відображається аналогічно текстовому, тільки всі уведені в ньому символи будуть відображатися зірочками.

Елементи форми Прапорці <input type=”checkbox” value=”значення” name=” ім’я”> Checkbox - браузер відображає цей тип Елементи форми Прапорці Checkbox - браузер відображає цей тип поля квадратом, у якому можна поставити прапорець. Якщо поставити прапорець у це поле, то value прийме значення checked. Радіокнопки Radio – на відміну від checkbox тільки одне з декількох полів radio може бути включено Кнопка ОК! Submit - відображає кнопку, при натисканні на яку всі дані з форми відправляються сценарію, зазначеному в атрибуті action тега . Кнопка Відмінити Reset - при натисканні на цю кнопку вся уведена інформація у формі стирається

Елементи форми Багаторядкова область уведення <textarea> <textarea name=”ім’я” rows=” 10″ cols=” 20″>Цей текст буде Елементи форми Багаторядкова область уведення Список Кожний з варіантів якого задається тегом

Завдання Скласти сторінку з формою, яка подана нижче Завдання Скласти сторінку з формою, яка подана нижче

Завантаження файлів Для того щоб можна було завантажувати на сервер один або декілька файлів, Завантаження файлів Для того щоб можна було завантажувати на сервер один або декілька файлів, у формі застосовується спеціальне поле. Вид поля для завантаження файлів у Firefox Вид поля для завантаження файлів у Chrome Табл. 1. Атрибуты поля для отправки файла Атрибут accept size multiple name Описание Встановлює фільтр на типи файлів, які ви можете відправити через поле завантаження файлів. Ширина текстового поля Дозволяє вибрати і завантажити відразу декілька файлів. Імя поля, яке використовується для його ідентифікації обробником форми.

Завантаження файлів Перед тим як використовувати дане поле, у формі необхідно зробити наступне: 1. Завантаження файлів Перед тим як використовувати дане поле, у формі необхідно зробити наступне: 1. задати метод відправлення даних POST (method="post"); 2. встановити у атрибуті enctype значення multipart/form-data. Отправка файла на сервер

Допустимі значення для атрибута accept Табл. 2. Типи файлів Значение Описание image/jpeg Тілько файли в формате JPEG. image/jpeg, image/png Тільки файли в формате JPEG и PNG. image/* Будь-які графічні файли. image/*, video/* Будь-які графічні і відеофайли.

Поле для пошуку на сайті В HTML 5 для пошуку додано нове поле, синтаксис Поле для пошуку на сайті В HTML 5 для пошуку додано нове поле, синтаксис його наступний:

Відправлення даних на сервер Передача на сервер происходит двумя разными методами: GET и POST, Відправлення даних на сервер Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге

используется POST атрибут method, а его значениями выступают ключевые слова get и post. Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами. Ограничение на 4 Кб объём GET POST Ограничения задаются сервером. Передаваемые данные Видны сразу всем. Видны только при просмотре через расширения браузера или другими методами. Кэширование Страницы с разными запросами считаются различными, их можно кэшировать как отдельные документы. Страница всегда одна. Закладки Страницу с запросом можно добавить в закладки браузера и обратиться к ней позже. Страницы с разными запросами имеют один адрес, запрос повторить нельзя.

Відправлення даних на сервер Ниже перечислены типовые области применения этих методов на сайтах. GET Відправлення даних на сервер Ниже перечислены типовые области применения этих методов на сайтах. GET Передача небольших текстовых данных на сервер; поиск по сайту. Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме. POST Пересылка файлов (фотографий, архивов, программ и др. ); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.