1 of 9

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Використання форм. Основні елементи форми

2 of 9

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Веб-програмування

Основи мови HTML

Використання форм

Введення інформації можна організувати не лише через діалогові вікна, а й за допомогою форм — наборів елементів керування забезпечують взаємодію людини з програмою. Користувач може вводити інформацію з клавіатури, а також вибираючи потрібні перемикачі чи прапорці. Його дії потім опрацьовує програма-сценарій.

Форма — наборів елементів керування, що забезпечують взаємодію людини з програмою

Елементи форми

поля для введення

списки для вибору відповідей

прапорці

перемикачі

кнопки

3 of 9

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Веб-програмування

Основи мови HTML

Текстові поля

Для введення текстових даних у спеціальні поля використовують тег <INPUT>, в якого атрибут TYPE має значення text

Атрибути тегу <INPUT>

NAME

ім'я змінної, в якій зберігається введене значення

VALUE

початкове значення

SIZE

довжина текстового поля

MAXLENGTH

максимальна кількість символів для введення

<INPUT TYPE="text">

4 of 9

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Веб-програмування

Основи мови HTML

Текстові поля

Для текстів великого обсягу зі смугами прокручування використовують

парний тег <TEXTAREA>

Атрибути тегу <TEXTAREA>

ROWS

висота текстового прямокутника в символах

COLS

ширина текстового прямокутника в символах

WRAP

визначення способу переходу на інший рядок

NAME

ім'я для доступу до текстової області

<Textarea name = "comment"> коментар </textarea>

5 of 9

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Веб-програмування

Основи мови HTML

Перемикачі

Для створення перемикачів використовують тег <INPUT>, в якого атрибут TYPE (тип) має значення radio

<Input type = "radio" name = "Текст_" value = "Текст"> Текст

Особливості тегу Input type = "radio"

Групі перемикачів, що стосуються одного питання, обов'язково присвоюють однакове ім'я (NAME). Атрибут VALUE позначає відповідний перемикачу варіант відповіді для розробника форми, тоді як напис після тегу <INPUT> — для користувача

6 of 9

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Веб-програмування

Основи мови HTML

Прапорці

Прапорці дають змогу вибирати кілька варіантів із запропонованих. Для них атрибут TYPE тегу <INPUT> має значення checkbox

<Input type = “checkbox" name = "Текст_" value = "Текст"> Текст

7 of 9

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Веб-програмування

Основи мови HTML

Списки

Список розміщують між тегами <SELECT> та </SELECT>, а його елементи визначають за допомогою тегу <OPTION>

8 of 9

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Веб-програмування

Основи мови HTML

Кнопки

Кнопка створюється тегом <INPUT> з атрибутом TYPE="submit".

На цій кнопці буде напис, заданий атрибутом VALUE

Для оригінального оформлення кнопки

Вставити малюнок

Для цього використовують такий синтаксис:

<INPUT TYPE="image" SRC="... “ WIDTH=... HEIGHT=... ALT="..." VALUE=...>

9 of 9

Робота з комп'ютером

Чашук О.Ф., вчитель інформатики ЗОШ№23, Луцьк

Завдання.

Розробіть веб-сторінку з формою для виконання тесту з будь-якого предмета