Лабораторна робота №7

Тема: Форми в HTML.

Мета: Вивчити основи організації форм в HTML.

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

Форми були створені і використовуютьсяWWWв для отримання відгуку користувача на надану інформацію і збору даних про користувача. Після заповнення користувачем форми і запуску процесу її обробки інформація з неї потрапляє програми, що працює на сервері. Простота використання тега<MAILTO:> у формах дозволяє навіть власникам невеликих сторінок отримувати відгук від своїх читачів. Для обробки великої кількості відгуків використовуються програми, підтримуючі Common Gateway Interface (CGI) і розташовані на сервері, в адресу якого поступають відгуки. Таким чином користувач може інтерактивно взаємодіяти з Web-сервером через Internet.

Завдання форми — елемент FORM

Елемент FORM позначає документ як форму і визначає межі використання інших тегів, що розміщуються у формі. Тег <FORM> визначається послідовністю тегів <INPUT>, розміщених усередині пари<FORM> і </FORM>. У формі використовується як метод (method), так і дія (action) для опису обробки даних, що вводяться користувачем у форму. Метод (GET або POST) визначає, як повинні оброблятися вхідні дані з форми, а дія указує наURL програми, відповідальної за обробку цих даних.

<FORM METHOD="post" ACTION="mailto:yourname@your.email.address">

Визначення елементів управління форми — тег <INPUT>

Даний тег використовують для визначення області усередині форми, куди вводяться дані. Він формує поле для введення інформації користувачем. Це може бути текстове поле, опція, зображення або кнопка. Вид поля введення визначається значенням атрибуту TYPE.

Атрибут TYPE=text

Коли користувачеві необхідно ввести невелику кількість тексту(одну або декілька рядків), використовується тег <INPUT>, і атрибут TYPE встановлюється в значення text. Це значення прийняте за умовчанням і указувати його необов'язково. Крім того, задається атрибут NAME для визначення найменування змінної поля.

Ваше ім'я <INPUT NAME="Name" SIZE="35">

Є ще три додаткові атрибути, які можна використовувати. Перший називається MAXLENGTH, він обмежує число символів, що вводяться користувачем в поточне поле. За умовчанням дане число не обмежене. Другим атрибутом єSIZE, що визначає розмір видимої на екрані області, займаної поточним полем. Значення за умовчанням визначається типом браузера. Якщо значення MAXLENGTH більше, ніж SIZE, браузер прокручуватиме дані у вікні. Останнім з додаткових атрибутів є атрибут VALUE, що забезпечує початкове значення поля введення.

1

Атрибут TYPE=checkbox

При створенні форм часто потрібно отримати відповідь користувача на питання типу "Так/Ні". Для створення незалежних кнопок у формах HTML використовується тег <INPUT> з атрибутом TYPE=checkbox. Залежно від змісту форми користувач може відзначити декілька прапорів. Коли форма використовує тег<INPUT> з атрибутом CHECKBOX, в нім повинні бути присутніми і атрибутиNAME, і VALUE. Атрибут NAME указує на найменування даного поля (прапора) введення. У атрибуті VALUE міститиметься значення поля.

В деяких випадках необхідно ініціалізувати даний прапор, як вже відмічений. У таких випадках тег <INPUT> повинен містити атрибут CHECKED.

Атрибут TYPE=radio

В деяких випадках потрібно організувати вибір один з декількох можливих значень. Для створення форми введення при виборі користувачем одного значення з декількох можливих необхідно використовувати <INPUT>тег з атрибутом TYPE=radio. Коли у формі застосовується даний атрибут, в теге <INPUT> повинні бути вказані атрибутиNAME і VALUE. Атрибут NAME указує найменування відповідного поля (кнопки). Атрибут VALUE містить значення поля.

Чоловіча стать<INPUT NAME="Пол" TYPE=radio VALUE="Чоловіча"> %

Жіноча стать<INPUT NAME="Пол" TYPE=radio VALUE="Жіноча">

Атрибут TYPE=image

Залежно від вмісту форми може трапитися так, що користувачеві потрібно буде клацнути мишею на зображенні, щоб завершити роботу з формою. Для цього програмісти використовують тег<INPUT> з атрибутом TYPE=image. Коли користувач клацає мишею по зображенню, браузер зберігає координати відповідної точки екрану. Далі він "обробляє" введену у форму інформацію. Коли форма використовує атрибут image, тег <INPUT> повинен містити також атрибути NAME і SRC. NAME указує найменування поля введення форми. Атрибут SRC містить URI файлу — джерела зображення. Атрибут ALIGN є додатковим і використовується аналогічно тому ж атрибуту тега <IMG>.

<BR>Виберіть точку<INPUT TYPE=image NAME=point SRC="image.gif">

Атрибут TYPE=password

Якщо у формі потрібно організувати введення пароля, то атрибут TYPE можна встановити в значенняpassword (TYPE=password). Використовуючи даний тип, можна організувати введення пароля без виводу на екран складових його символів.

При цьому слід пам'ятати, що введені дані передаються по незахищених каналах зв'язку і можуть бути перехоплені.

Логін<input NAME="login">

Пароль <INPUT TYPE=password NAME="pass">

Атрибут TYPE=reset

Коли користувач заповнює форму, йому може потрібно почати все спочатку. На такий випадок існує кнопкаReset, по якій користувач може клацнути мишею, щоб

2

повернутися до первинних значень полів. Коли користувач вибирає дану кнопку, форма відновлює первинні значення всіх елементів, яких присутній атрибут TYPE=reset. Для створення кнопкиReset використовується тег <INPUT> з атрибутом TYPE=reset. Браузер у свою чергу виводитиме зображення даної кнопки. Якщо у формі використовується атрибут reset, тег <INPUT> може додатково містити атрибут VALUE. Даний атрибут визначає напис на зображенні кнопки.

<INPUT TYPE=reset VALUE="Очистити форму">

Атрибут TYPE=submit

Використовуючи форму HTML для введення інформації від користувача, необхідно забезпечити користувачеві можливість завершити введення даних. Для цього використовується тег<INPUT> з атрибутом TYPE=submit. Браузер, у свою чергу, виводить даний елемент, як кнопку, по якій користувач може клацнути, щоб завершити процес редагування. Коли у формі використовується тег<INPUT> з атрибутом submit, даний елемент може містити два додаткові атрибути: NAME і VALUE. Атрибут NAME зберігає значення змінної поля у вашій формі. Атрибут VALUE — указує найменування кнопки Submit.

<BR><INPUT TYPE=submit VALUE="Відправити повідомлення">

Атрибут TYPE=hidden

Приховані поля. Додавання в тегINPUT атрибуту TYPE=hidden дозволить включити у форму, що відправляється, значення атрибутів NAME і VALUE, які користувач змінити не може. Такі мітки корисні за наявності декількох форм для подальшої обробки даних.

Створення багаторядкових областей введення тексту — тег <TEXTAREA>

Залежно від типу форми може потрібно організувати введення великої кількості тексту. У таких випадках використовується тег<TEXTAREA> для створення текстового поля з декількох рядків. Даний тег використовує три атрибути: COLS, NAME і ROWS.

Атрибут COLS Указує (число символів) число колонок, що містяться в текстовій області.

Атрибут NAME Визначає найменування поля.

Атрибут ROWS Задає кількість видимих рядків текстової області.

<TEXTAREA NAME=тема COLS=38 ROWS=3> </TEXTAREA>

Використання списків у формі — тег <SELECT>

Коли форми HTML стають складнішими, в них часто включають списки з прокруткою і випадні меню. Для цього використовують тегSELECT з атрибутом TYPE=select. Для визначення списку пунктів використовують тег<OPTION>. Тег <SELECT> підтримує три необов'язкові атрибути: MULTIPLE, NAME і SIZE.

Атрибут MULTIPLE Дозволяє вибрати більш ніж одне найменування.

3

Атрибут NAME Визначає найменування об'єкту.

Атрибут SIZE Визначає число видимих користувачеві пунктів списку. Якщо у формі встановлено значення атрибуту SIZE=1, то браузер виводить на екран список у вигляді випадного меню. У разі SIZE > 1 браузер представляє на екрані звичайний список.

У формі може використовуватися <OPTION>тег тільки усередині тега <SELECT>. Ці теги підтримують два додаткові атрибути: SELECTED і VALUE.

Атрибут SELECTED Використовується для первинного вибору значення елементу за умовчанням.

Атрибут VALUE Указує на значення, повертане формою після вибору користувачем даного пункту. За умовчанням значення поля рівне значенню тега

<OPTION> (відкрити).

Вибір <SELECT NAME="Вибір"> % <OPTION>Варіант 1 </OPTION>% <OPTION>Варіант 2 </OPTION>%

<OPTION VALUE="Варіант 3">Варіант 3 </OPTION>% <OPTION SELECTED>Варіант 4 </OPTION>% </SELECT>

Завдання:

1.Створити форму приведену на малюнку 1.

2.Знати відповіді на запитання

1)Що таке форма?

2)Який тег описує форму у HTML коді?

3)Які атрибути є обов’язковими при додаванні форми?

4)Назвіть елементи форми.

5)Який атибут допомагає створити кнопку із зображенням?

4

Мал. 1. Приклад форми

5