Використання форм. Основні елементи форми
За навчальною програмою 2018 року
Урок 25
10
(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Форма має вигляд набору полів, у які користувач може вводити інформацію (це може бути ввід тексту, вибір варіантів зі списку або відмічання потрібних пунктів і навіть завантаження картинок і файлів).
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
HTML тег <form> використовується для створення HTML форми на сторінці.
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Додати текстове поле.
Вигляд в браузері
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Кожне із питань форми оформлюється тегом <input> певного типу:
текст
text
пароль
password
електронна скринька
веб-адреса
url
число
number
поле пошуку
search
вибір кольору
color
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
(Продовження…) Кожне із питань оформлюється тегом <input> певного типу:
прикріплений файл
file
введення дати
date
тип прапорці
checkbox
тип перемикачі
radio
Існують питання із вибором відповіді з поданого переліку:
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Дія, яку потрібно виконати над заповненою формою вказується у атрибуті тегу form action.
Найчастіше там можна зустріти адресу скрипту, який буде обробляти дані форми, або адресу електронної скриньки, на яку слід надіслати ці дані. Наприклад, при такому записі, заповнену форму буде передано у файл test.php:
<form action=“test.php" method=“get">
Тип запит до серверу
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Передача даних може відбуватись одним із двох методів:
get
post
Метод get застосовується для передачі невеликих текстових даних та пошуку на сайті. В такому разі зазвичай у рядку адреси відбуваються зміни і можна побачити доданий знак питання з подальшими символами. Це власне запит до сервера, який надсилається формою. Такий запит у явному вигляді доступний відвідувачеві сайту.
Метод post використовується для пересилки файлів, коментарів, додавання повідомлень на форумах тощо. Адреса у відповідному рядку браузера не змінюється, запит передається у більш захищеному режимі.
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Дію стосовно відправлення заповненої форми можна записати в кнопці типу submit:
Вигляд в браузері
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Також форму можна відправити натиснувши клавішу Enter в межах форми. Якщо кнопка типу submit відсутня, клавіша Enter імітує її використання.
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Деякі атрибути тегу <form>:
action
Вказує URL адресу обробника форми.
autocomplete
Включає або відключає автозаповнення текстових полів форми.
method
HTTP-метод відправки даних
(get, post)
name
Вказує унікальне імʼя форми.
target
Фрейм або вікно в яке буде завантажена відповідь сервера.
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Деякі атрибути тегу <form>:
Вигляд в браузері
Підказка користувачу
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Деякі атрибути тегу <form>:
Вигляд в браузері
Обов’язкове поле
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Додамо підпис до поля
Вигляд в браузері
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Використання перемикачів
Значення, які передаються
Вигляд в браузері
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Використання елементу вибір із списку
Вигляд в браузері
10�(11)
Використання форм.�Основні елементи форми
Розділ 4 § 25
Використання прапорців
Вигляд в браузері
10�(11)
Запитання для рефлексії
Розділ 4 § 25
10�(11)
Домашнє завдання
Розділ 4 § 25
Запланувати у щоденнику самоосвіти пізнавально-дослідницьку діяльність з питань створення форм
10�(11)
Працюємо за комп’ютером
Розділ 4 § 25
10�(11)
Дякую за увагу!
За навчальною програмою 2018 року
Урок 25
10
(11)