Практична робота 5 Тема: Форми

Мета: 1. Навчитися створювати форми і вказувати обробники форм.
2. Створювати елементи управління форми.
3. Закріпити навики, отримані при створенні таблиць.

Питання для повторення:

1. Введення у форми.
2. Елементи, що управляють.
3. Елемент FORM.
4. Елемент INPUT.
5. Елемент BUTTON.
6. Елементи SELECT, OPTGROUP і OPTION.
7. Елемент TEXTAREA.
8. Елемент ISINDEX.
9. Елемент LABEL.
10. Метод відправки форми.

Завдання:

Створити HTML-сторінку з наведеними структурними елементами.

Хід роботи:

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

2. Зберегти анкету у файлі anketa.html у своїй папці. Звернути увагу, що вся форма повинна заключатися в тег <form>.

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

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

Рис 5.1. Завдання до лабораторної роботи

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

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

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

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

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

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

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

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

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

1. У якій тег заключаються всі елементи управління?

2. Який атрибут тегу <form> вказує на файл, який оброблятиме дані форми?

3. Які існують значення атрибуту type в тезі <input>?

4. У чому відмінності тегу <input type=”reset”> і <input type=”submit”>?

5. Як додати на форму перемикач?

6. Для чого призначений тег <textarea>?

7. Скільки тегів необхідно, щоб вивести на екран поле вводу для вказівки дороги до файлу і кнопки огляду?

8. Які існують методи передачі даних форми на сервер?

9. Як здійснюється обробка форм?

10. За рахунок чого перемикачі можна розбивати на групи?

11. Який атрибут тегу <input> дозволяє вказати значення, яке буде заповнено при першому відображенні форми?

12. Для чого призначений атрибут checked?

Не нашли, что искали? Воспользуйтесь поиском: