6.3. Контрольні питання

1. Який тег служить для вставки таблиці в html-документ?

2. Які атрибути використовуються у тегу <TABLE>?

3. Для чого використовуються теги <TR> і <TD>?

4. Як можна створити заголовок стовпця в таблиці?

5. Для чого використовується атрибут ALIGN?

6. У якому тегу і для чого використовується атрибут BORDER?

7. Як об'єднати комірки таблиці по горизонталі?

8. Як об'єднати комірки таблиці по вертикалі?

9. Для чого використовується атрибут VALIGN?

10. Як можна задати фон в таблиці?

Лабораторна робота № 7. Програмування форм

Мета роботи: навчитися створювати форми, вказувати обробників форм; створювати елементи керування форми; закріпити навички, отримані при створенні таблиць.

7.1 Теоретичні відомості

7.1.1. Форми. Загальні відомості

Форма – це засіб, що дозволяє організувати в сторінці діалог з її користувачем. Форми в документах HTML розміщуються між тегами <FORM> та </FORM>. Всередині самої форми може бути розміщений звичайний текст, інші HTML-документи (таблиці), а також елементи форм (випадаючі списки, текстові поля, кнопки). Заповнені форми передаються певній програмі, яка обробляє отримані дані, але можна також відправити результати електронною поштою. Форми у HTML мають наступні атрибути:

Параметр action є обов’язковим. Він вказує адресу обробника форми (наприклад, адреса програми обробки або поштова адреса або просто адреса URL для переходу).

Параметр method не є обов’язковим. Він приймає одне з двох значень: get або post, пов’язаних з методом протоколу передачі інформації з анкети. За замовчуванням, METHOD= GET. Приклад команди FORM:

<FORM ACTION = "http://www.aport.ru" METHOD= POST >

Форма може складатися з різних елементів: текстові поля, випадаюче меню, списки, перемикачі та кнопки.

2. Текстові елементи

Для створення найпростішого текстового поля потрібно вставити елемент <INPUT> і присвоїти його атрибуту значення text. Всі елементи форми повинні мати ім’я. <input type=text name=name> Значенню атрибуту size елемента <INPUT> відповідає кількість символів, які будуть введені у це поле. Якщо користувач введе більше символів, то текст прокручуватиметься. Якщо треба обмежити розміри поля, можна визначити атрибут maxlength – максимальна кількість символів, яку можна ввести у поле.

7.1.3. Поле для паролів

Тег <input type= password name=name>. Дані, введені у це поле, показуються на екрані у вигляді "зірочок" для того, щоб введена інформація залишалась приватною. Для цього атрибуту type присвоюється значення password.

7.1.4. Багатострічкове текстове поле

У цього елемента є атрибути rows (кількість рядків), cols (кількість стовпців), name (ім’я). Наприклад, <textarea name=t1 rows=6 cols=60>…</textarea>. Для цього елемента можна задати значення по замовчуванню між тегами <textarea> та </textarea> .

7.1.5. Меню

Випадаюче меню дає користувачеві можливість вибрати один варіант з кількох можливих. Це меню створюється елементом <select> та </select>. Всередині його розміщуються кілька елементів <option>. При вказівці в атрибуті value іншого значення, ніж після <option> , на обробку відправлятиметься саме це значення. Можна вказати, який елемент буде вибраним за замовчуванням через атрибут selected. Можна також поставити атрибут size – тоді на екран виводиться лише певна кількість стрічок списку. <select name="s1">

<option value="Ukraine"> Ukraine

<option value="Russia"> Russia

<option value="Other"> Other country

</select>

7.1.6. Мітки

Якщо користувачеві потрібно обрати кілька пунктів з великої групи варіантів, можна використати поле для міток. Для цього атрибуту type елементу <input> присвоюється значення checkbox. За допомогою атрибута value можна вказати "своє" значення.

<input type=checkbox value="Cat" name=a1> Cat

<input type=checkbox value="Parrot" name=a1> Parrot

7. Кнопки-перемикачі

Користувач може обирати лише один варіант із запропонованих. Для цього атрибуту type елементу <input> присвоюється значення radio. Тут обов’язково потрібно вказувати однакове ім’я name і різні значення value.

<input type=radio name=r1 value="yes"> Yes

<input type=radio name=r1 value="no"> No