Списки вибору.

Списки вибору бувають двох типів: списки, що розкриваються (меню, що випадають) і списки із множинним вибором. Незалежно від типів списків описуються вони однаково за допомогою пари тегів <select></select>. Окремі елементи списку задаються з використанням тегу <option>. Тип списку визначається за допомогою атрибута multiple тегу <select>. Приклад використання форми наведено в лістингу 5.1:

Лістинг 5.1 – Використання форми та елементів керування

Результат виконання лістингу 5.1 зображено на рисунку 5.2

Рис.5.2 - Результат виконання лістингу 5.1

Практична частина

1. Створити форму для заповнення анкети. Зверніть увагу що сторінка з анкетою зверстана у вигляді таблиці з невидимою рамкою (див. рис. 5.3).

2. Збережіть анкету у файлі anketa.html на своєму домене. Зверніть увагу, що вся форма повинна полягати в тег <form>.

3. Створити поля для введення імені користувача і пароля користувача (символи, що вводяться в поле Пароль повинні відображатися зірочками). Вставка полів здійснюється тегом <input> з різними значеннями атрибута type.

4. Створити поля для введення дати народження. День і місяць народження вибирається зі списку, що випадає, а рік вводиться в ручну в поле введення, причому кількість символів, що вводяться, не повинне перевищувати чотири. Для формування списку використовувати тег <select>, а для завдання обмеження на кількість символів, що вводяться, атрибут maxlength тегу <input>.

5. Створити перемикачі для вибору статі. Реалізувати можливість вибору тільки одного варіанта. Використовувати тег <input>.

6. Створити прапорець, з текстом «Да, я бажаю регулярно одержувати спам» із прапорцем, встановленим за замовчуванням. Використовувати тег <input>.

7. Створити перемикачі для вибору кількості листів одержуваних за тиждень, перевірити що б перемикачі із завдання 4 і 6 формували дві різні групи.

8. Створити список з можливістю вибору декількох елементів.

9. Додати поле для введення декількох рядків тексту з додатковою інформацією про користувача. Поле повинне мати розміри 7 рядків і 30 стовпців. Для вставки такого поля використовуйте тег <textarea>.

10. Створити поле із кнопкою «Відкрити» для завантаження файлу зображення. Використовувати тег <input>.

11. Створити дві кнопки. Першу для передачі даних форми на сервер, а другу для очищення форми. Використовувати тег <input>.

12. Покажіть виконану роботу викладачеві

рис. 5.3 - Форма заповнення анкети

Лабораторна робота №6 Фрейми. Карти зображень

Мета роботи: Навчитися створювати фрейми. Навчитися керувати властивостями фреймів. Навчитися створювати і застосовувати карти зображень для посилань.

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

1. Для чого використовуються фрейми?

2. За що відповідає атрибут target тегу <a>?

3. Як вказати посиланню в якому фреймі треба відкритися?

4. В яких одиницях можна задати ширину або висоту фрейму?

5. Чи можна змінювати границі між фреймами?

6. Для чого використовуються карти зображень?

7. Які форми фігур можуть використовуватися в картах зображень?

8. Як можна підписати фігури карти зображень?

   9. Які види карт зображень бувають?

   10. Що може служити альтернативою використання карт зображень?