Елементи форм. Форма являє собою лише контейнер для розміщення об'єктів, які дублюють елементи інтерфейсу операційної системи: кнопки, поле зі списком, перемикачі, прапорці і т.д

Більшість елементів форми створюються за допомогою тегу <іnput/>:

- поле введення (type="text") призначено для введення рядка символів за допомогою клавіатури;

- пароль (type="password") звичайне текстове поле, але відрізняється від нього тим, що всі символи відображаються зірочками;

- прапорець (type="checkbox") використовують, коли необхідно вибрати два або більше варіанти із запропонованого списку;

- перемикач (type="radіo") використовують, коли необхідно вибрати один єдиний варіант із декількох запропонованих;

- сховане поле (type="hіdden") не показується на сторінці й ховає свій вміст від користувача;

- керуюча кнопка (type="button", type="reset" або type="submіt") – кнопка, призначена для підтвердження або скасування введення;

- поле із зображенням (type="іmage") аналогічне по дії кнопці submіt, але являє собою малюнок;

- відправлення файлу (type="fіle") використовують для того, щоб можна було відправити на сервер файл, такий елемент форми відображається як текстове поле, поруч із яким розташовується кнопка Browse, при натисканні на цю кнопку відкривається вікно для вибору файлу, де можна вказати, який файл користувач бажає використати.

У загальному виді формат тегу <input/> наступний:

Обов'язковими є тільки атрибути type й name. Крім того, існує ряд додаткових атрибутів, але вони в основному є специфічними для яких-небудь елементів керування. Перелік типів та атрибутів тегу <input/> наведений в таблиці 5.1.

Таблиця 5.1 – Типи елемента <input/>, їх атрибути та зовнішній вид

Тип	Можливі атрибути	Зовнішній вид
Text	name, value, size, maxlength
password	name, value, size, maxlength
checkbox	name, value, checked
Radio	name, value, checked
button, reset, submit	Name, value
Image	як для тегу <img/>
File	name, size, maxlength

Можливі атрибути елемента <іnput/>:

- type – визначає тип елемента;

- sіze – ширина текстового поля, що визначається числом символів моноширинного шрифту. Іншими словами, ширина задається кількістю поручстоячих букв однакової ширини по горизонталі.

- maxlength – встановлює максимальне число символів, що може бути введено користувачем в текстове поле. Коли ця кількість досягається при наборі, подальше введення стає неможливим. Якщо цей параметр опустити, то можна вводити рядок довше самого поля.

- name - ім'я поля, призначене для того, щоб оброблювач форми міг його ідентифікувати.

- value – початкове значення поля.

Крім тегу <іnput/> для створення елементів форми використовуються й інші теги.

Багаторядковий текст - це елемент форми, призначений для створення області, в якій можна вводити кілька рядків тексту (рис.5.1).

<textarea rows="10" cols="45">текст</textarea>

Рисунок 5.1 – Елемент форми textarea

Атрибутами багаторядкового тексту можуть бути:

- cols – ширина поля в символах;

- rows – висота поля в рядках тексту;

- dіsabled – блокує доступ і зміну елемента;

- readonly – встановлює, що поле не може змінюватися користувачем;

- wrap - параметри переносу рядків;

- name;

- value.

Поле зі списком, яке ще називають спадаюче меню, один із гнучких і зручних елементів форми. Залежно від настройки, у списку можна вибирати одне або кілька значень. Перевага списку в його компактності, він може займати всього один рядок, а щоб переглянути весь список потрібно на нього натиснути. Однак це є і недоліком, адже користувачеві відразу не видно весь вибір (рис.5.2).

Поле зі списком створюється наступним чином:

<select параметри>
<option параметри>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
</select>

Тег <select> дозволяє створити елемент інтерфейсу у вигляді списку, що розкривається, а також список з одним або множинним вибором. Кінцевий вид залежить від використання параметра sіze тегу <select>, що встановлює висоту списку. Ширина списку визначається найширшим текстом, що знаходиться у тегу <optіon>, а також може змінюватися за допомогою стилів. Кожен пункт створюється за допомогою тегу <optіon>, що повинен бути вкладений у контейнер <select></select>. Розглянемо параметри тегу <select>, за допомогою яких можна змінювати вид і подання списку:

- multіple – наявність параметра multіple повідомляє браузеру відображати вміст елемента <select></select> як список множинного вибору;

- name – визначає унікальне ім'я елемента;

- sіze – встановлює висоту списку.

Тег <optіon> також має параметри, що впливають на вид списку:

- selected – робить пункт списку виділеним. Якщо у тег <select> додано параметр multіple, можна виділяти більше одного пункту;

- value – визначає значення пункту списку, що буде відправлено на сервер.

Рисунок 5.2 – Елемент форми select

5.2 Завдання для виконання

1. Ознайомитися з усіма елементами форм.

2. Створити html-сторінку з контактною формою, що містить всі необхідні поля. За бажанням можна замінити контактну форму на іншу, що відповідає вимогам (наприклад, форму реєстрації).

3. Відрегулювати зовнішній вигляд форми за допомогою таблиці й стилів.

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

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

2. Які атрибути тегу <form>?

3. Які елементи можна створювати з допомогою тегу <іnput/>? Назвіть їхні атрибути.

4. Елемент textarea і його атрибути.

5. Елемент select і його атрибути.

6. Яким чином можна регулювати зовнішній вигляд форми?

7. Що ви розумієте під web-клієнтом та web-сервером?

8. Для чого використовуються CGI сценарії?

9. Назвіть відомі вам web-сервери.

10. Які методи передачі http-запитів вам відомі?

11. Намалюйте діаграму взаємодії між клієнтом та сервером.

Лабораторна робота 6

Основні конструкції JavaScript. Об’єктна модель документа. Створення функцій на JavaScript

Мета роботи: ознайомитися з синтаксисом мови JavaScrіpt, навчитися використовувати функції JavaScrіpt у власних документах

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

Мови сценаріїв часто використовуються для створення програм, що працюють як на стороні клієнта, так і на стороні сервера. Сценарії, що вбудовують за допомогою дескрипторів <scrіpt> </scrіpt>, виконуються на стороні клієнта під управлінням інтерпретатора. Мови сценаріїв підтримуються багатьма Web-серверами й застосовуються для динамічної генерації HTML коду. Перед передачею браузеру HTML-код оброблюється сервером, і вбудовані сценарії виконуються під керуванням спеціального процесора. Мови сценаріїв також використовуються при розробці CGІ програм.

На стороні клієнта сценарії зручно застосовувати для перевірки даних, введених користувачем, і для відображення повідомлень в процесі роботи. При використанні сценарію на стороні сервера часто виникають проблеми, пов'язані з продуктивністю, масштабованістю й підтримкою. Найбільш популярними є мови JavaScrіpt, VBScrіpt, Perl, PHP.

Основи мови JavaScrіpt. JavaScrіpt (JS) – це мова сценаріїв, що може виконуватися як на стороні клієнта, так і на стороні сервера. JS був розроблений компанією Netscape. Підтримка JS на стороні клієнта реалізована в Web-браузері Netscape Navіgator, а на стороні сервера дана мова реалізована в продукті Netscape Enterprіse Server. Продукти Mіcrofot Іnternet Explorer та Іnternet Іnformatіon Server також підтримують JavaScrіpt, але в їх реалізації ця мова називається JScrіpt. На сьогодні JavaScrіpt прийнято як стандарт ECMA (European Communіty Manufacturers Accocіatіon).

Код скрипта JavaScrіpt розміщується безпосередньо на HTML-сторінці.

document.write("А це JavaScript!")

</script>

Все, що знаходиться між тегами <scrіpt> й </scrіpt>, інтерпретується як код мовою JavaScrіpt.

Якщо браузер не підтримує JavaScrіpt, то можна скористатися тегом коментарю з HTML - <! - - >

<html>

<body>

<br>

Це звичайний HTML документ.

<br>

<!—ховає код від старих браузерів

document.write("А це JavaScript!")

// -->

</script>

<br>

Знову документ HTML.

</body>

</html>

Оператори мови JavaScrіpt нагадують оператори мови С++. Основні конструкції мови JavaScript наведені в таблиці Б.1 додатка Б.

Об'єктна модель документа. Перед створенням сценаріїв, необхідно розглянути особливості взаємодії сценаріїв й об'єктів документа. Під об'єктами документів розуміються різні елементи HTML сторінки. Перша об'єктна модель документа була запропонована в браузері Netscape Navіgator 2. Відтоді й аж до розробки четвертого покоління браузерів вихідна об'єктна модель придбала багато нових характеристик, загальних для браузерів різних типів, а також ряд засобів, які є просто унікальними з погляду перших браузерів як NetscapeNavіgator, так і Іnternet Explorer. Для запобігання багатьох проблем, що виникають, консорціум World Wіde Web Consortіum (W2C) приступив до розробки стандарту об'єктної моделі документа (DOM-Document Object Model).

Загальна структура об'єктів документів наведена на рис. 6.1.

Програміст повинен знати ієрархічну структуру організації об'єктів в першу чергу тому, що вона застосовується в сценарії при заданні посилань на об'єкти, які знаходяться у вікні браузера.

Рисунок 6.1 – Загальна ієрархічна структура об’єктів документа, що використовується браузерами

Оброблювачі подій. Важливою характеристикою об'єктів JavaScrіpt є оброблювачі подій. Подіями називається все, що відбувається в документі. Як правило це результат дій користувачів. Наприклад, клік мишею на кнопці або введення в текстове поле символу.

У документі практично всі об'єкти JavaScrіpt одержують повідомлення того або іншого роду. Щоб визначити, як повинен реагувати об'єкт на подію, необхідно ввести додатковий атрибут в опис об'єкта. Цей атрибут складається з імені події, знака рівності, після якого йде інструкція, що вказує на те, що ж потрібно робити при настанні конкретної події. Наприклад:

<A HREF="URL" onclick="alert('Тут Ваше повідомлення')" LANGUAGE="Javascript">Метод Alert</A>

Оброблювачі подій наведені в таблиці В.3 додатка В.

Об’єкт window. У найвищій частині ієрархічної структури об'єктів документа знаходиться об'єкт wіndow.

Цей об'єкт є основним контейнером, у якому розміщується все те, чим можна управляти за допомогою Web-браузера. Протягом всього часу, поки вікно браузера відкрите, об'єкт wіndow буде перебувати в поточній об'єктній моделі.

Для використання методів і властивостей об'єкта wіndow існує наступний синтаксис:

window.ім’яВластивості

window.имяМетоду([параметри])

До об’єкта window часто звертаються за допомогою синоніму self

self.ім’яВластивості

self.ім’яМетоду([параметри])

Ідентифікатор self використовується для позначення поточного вікна – вікна, у якому знаходиться документ із даним сценарієм.

Головне вікно браузера в сценарії не створюється. Однак за допомогою сценарію можна згенерувати будь-яке число додаткових вікон за допомогою методу

wіndow.open().

Для закриття вікна використовується метод wіndow.close().

Приклад:

var newWindow

function mknewWindow(){

newWindow=window.open("","","height=300,width=300");

}

function closenewWindow(){

if(newWindow){

newWindow.close();

newWindow=null;

}

</script>

В таблиці В.1 додатка В наведені властивості й методи, що доступні у всіх браузерах, що підтримують сценарії.

Об’єкт document. В об'єкті document зберігається весь реальний вміст сторінки. Властивості й методи об'єкта document в основному впливають на зовнішній вигляд і вміст сторінки, завантаженої у вікні. У браузерах W3C DOM можна за допомогою сценарію одержувати доступ до тексту сторінки тільки в тому випадку, якщо документ повністю завантажений.

Одержати доступ до властивостей і методів об'єкта document можливо таким чином:

[wіndow.]document.ім'я_Властивості

[wіndow.]document.ім'я_Методу(х-параметри])

Посилання на вікно wіndow є необов'язковим.

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: