Назад Вперед Зміст

ЛАБОРАТОРНА РОБОТА № 6

Приклад

Створити html-сторінку, де знаходиться форма. Усі елементи форми розташувати як таблиці. На формі мають бути такі елементи:

1. текстове поле, в яке вводитиметься заголовок.
2. багаторядкове текстове поле, в яке вводитиметься абзац тексту.
3. Дві радіокнопки для вибору кольору фону.
4. Список, що випадає, для вибору шрифту заголовка (Arial, Comic Sans MS)
5. Прапорці, щоб вибрати накреслення: курсив/ні, підкреслення/ні.
6. Дві радіокнопки, щоб вибрати міжрядковий інтервал тексту.
7. Випадаючий список, для вибору картинки (собака, кіт)
8. кнопка Reset для очищення форми.
9. кнопка Start для динамічного створення нового вікна з урахуванням обраного оформлення.

Заповнимо форму:

Отримаємо нове вікно, в яке виводиться заголовок, текст та картинка з урахуванням обраного оформлення.

Форма:

Скрипт (початок): вибір об'єктів документа

Скрипт (продовження): функція формування нового вікна у разі виникнення події click у кнопки Start

Скрипт: (весь скрипт): функція очищення форми при виникненні події click у кнопки Reset

Завдання

Створити html-сторінку, де знаходиться форма. Усі елементи форми розташувати як таблиці. На формі мають бути такі елементи:

• текстове поле, в яке вводитиметься заголовок.
• багаторядкове текстове поле, в яке вводитиметься абзац тексту.
• дві групи радіокнопок
• два списки, що випадають
• набір прапорців, для вибору зображення: жирний/ні, курсив/ні, підкреслення/ні.
• кнопка Reset для очищення форми.
• кнопка Start для динамічного створення нового вікна з урахуванням обраного оформлення.

При натисканні на кнопку Start повинен виконуватися скрипт, який робить таке:

• зчитує дані з текстових полів. Одне поле заголовка, друге містить абзац тексту.
• динамічно створює нове вікно, виводить туди введений заголовок, текст та картинку.
• нове вікно створюється з тлом. Фон може бути кольором, може бути картинкою. Для вибору кольору фону або картинки для фону використовуються радіокнопки або список, що випадає (див. таблицю).
• заголовок виводити у форматі < h1 > з деякими додатковими властивостями. Можливі властивості: шрифт, розмір шрифту, колір шрифту, вирівнювання заголовка. Для вибору потрібних значень використовувати радіокнопки або список, що випадає (див. таблицю).
• текст виводити у форматі з деякими додатковими властивостями: шрифт, розмір шрифту, колір шрифту, вирівнювання, міжрядковий інтервал. Для вибору потрібних значень використовувати радіокнопки або список, що випадає (див. таблицю).
• для вибору зображення заголовка або тексту (жирність, курсив, підкреслення) використовувати прапорці.
• для вибору зображення використовувати радіокнопки або список, що випадає (див. таблицю).

Графа фону. У графі вказано, що вибиратиметься колір фону або картинка фону. А також, який елемент буде використовуватися для вибору: радіокнопки або список, що випадає.

Графа заголовок. У графі вказано, яка властивість буде використовуватися для оформлення заголовка, а також який елемент використовуватиметься для вибору: радіокнопки або список, що випадає.

Графа накреслення. У графі вказано, для заголовка або для тексту (або для того й іншого) будуть застосовуватись властивості накреслення: жирний/ні, курсив/ні, підкреслення/ні. Для вибору потрібних значень використовувати прапорці.

Графа текст. У графі вказано, яка властивість буде використовуватися для оформлення абзацу тексту, а також який елемент використовуватиметься для вибору: радіокнопки або список, що випадає.

Графа картинка. У графі вказано, який елемент буде використовуватися для вибору картинки: радіокнопки або список, що випадає. Картинки будь-які, відповідні за текстом.

Оформлення нової сторінки визначається варіантом завдання (див. таблицю).

Для кожного елемента вибору, варіантів має бути два.

Назад Вперед Зміст