Контрольні запитання:
Який тег служить для вставки таблиці в html-документ?
Які атрибути тегу <table> дозволяють змінити фон таблиці і ширину границі таблиці?
Чи задається ширина границі таблиці одна для всієї таблиці або задається окремо для зовнішньої границі і внутрішніх комірок?
Який тег відповідає за початок рядка?
Який тег відповідає за початок комірки?
Як змінити вирівнювання тексту у комірці?
Чи може бути в одному рядку комірка з різним вертикальним вирівнюванням?
Якщо для таблиці встановити колір фону і фонове зображення одночасно, що відображуватиметься на екрані?
Як можна об’єднати комірки по горизонталі?
Як можна в таблиці об’єднати комірки по вертикалі?
Практична робота 5 Тема: Форми
Мета: 1. Навчитися створювати форми і вказувати обробники форм. 2. Створювати елементи управління форми. 3. Закріпити навики, отримані при створенні таблиць.
Питання для повторення:
Введення у форми.
Елементи, що управляють.
Елемент FORM.
Елемент INPUT.
Елемент BUTTON.
Елементи SELECT, OPTGROUP і OPTION.
Елемент TEXTAREA.
Елемент ISINDEX.
Елемент LABEL.
Метод відправки форми.
Завдання:
Створити HTML-сторінку з наведеними структурними елементами.
Хід роботи:
Створити форму для заповнення анкети, представлену на рисунку 5.1. Звернути увагу, що сторінка з анкетою верстається у вигляді таблиці з невидимою рамкою.
Зберегти анкету у файлі anketa.html у своїй папці. Звернути увагу, що вся форма повинна заключатися в тег <form>.
Створити поля для введення імені користувача і пароля користувача (символи, які вводяться в поле Пароль повинні відображатися зірочками). Вставка полів здійснюється тегом <input> з різними значеннями атрибуту type.
Створити поля для введення дати народження. День і місяць народження вибирається з випадного списку, а рік вводиться в ручну в поле введення, причому кількість символів, що вводяться, не повинна перевищувати чотири. Для формування списку використати тег <select>, а для завдання обмеження на кількість символів, що вводяться – атрибут maxlength тегу <input>.
Рис 5.1. Завдання до лабораторної роботи
Створити перемикачі для вибору статі. Реалізувати можливість вибору лише одного варіанту. Використати тег <input>.
Створити прапорець, з текстом «Так, я бажаю отримувати спам» з прапорцем, встановленим за замовчуванням. Використати тег <input>.
Створити перемикачі для вибору кількості листів, отримуваних в день, перевірити, щоб перемикачі із завдання 3 і 5 формували дві різні групи.
Створити список інтересів з можливістю вибору декількох елементів.
Додати поле для введення декількох рядків тексту з додатковою інформацією про користувача. Поле повинно мати розміри 7 рядків і 30 стовпців. Для вставки такого поля використати тег <textarea>.
Створити поле з кнопкою «Огляд…» для завантаження файлу зображення. Використати тег <input>.
Створити дві кнопки. Першу кнопку для передачі даних форми на сервер, а другу – для очищення форми. Використати тег <input>.
Показати виконану роботу викладачеві.