А в ліву частину сторінки давайте помістимо форму. Для цього спочатку додамо спеціальний тег <FORM>, без якого неможливо буде відправити дані на сервер звичайними засобами. Тут нам потрібно буде вказати атрибут METHOD=, за допомогою якого броузер визначає спосіб відправки даних: у вигляді “добавки” до рядка URL (метод get) або у вигляді блоку даних (метод post). Як значення атрибут ACTION= необхідно вказати URL-адреса сервера, куди відправляться дані. Тут можна також вказати адресу електронної пошти (з префіксом mailto:)

Атрибут VALUE= при цьому визначає напис на кнопці. Якщо його не задати, то на кнопці буде написано Submit. Які ж дані будуть відправлені? Спершу давайте запитаємо у користувача його ім'я, виділивши для цього невелике однорядкове текстове поле, і думку про послуги фірми, для чого виділимо багаторядкове текстове поле.

Щоб створити однорядкове текстове поле, потрібно також скористатися тегом <INPUT>, але вже з атрибутом TYPE="text". При цьому його ширина задається за допомогою атрибуту SIZE=. Щоб програмі обробки даних (або людині, яка в цих даних розбиратиметься) було зрозуміле, які дані до якого поля відносяться, бажано для кожного поля вказати атрибут NAME=. В даному випадку ми запрошуємо у користувача його ім'я, тому хай значенням цього атрибуту буде слово Ім'я (по-англійськи теж Name):

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

- Добре, - скажете ви, - але як користувач дізнається, що від нього потрібно ввести в це поле?

Щоб дати йому “підказку”, можна просто написати її текст перед текстовим полем:

Ваше ім'я: <INPUT TYPE="text" NAME="Name" УАШЕ="Аноним" SIZE="30">

Проте краще скористатися тегом <LABEL>, який був введений в Internet Explorer версії 4. Він гарантує прив'язку влучні до поля введення. У нім потрібно вказати єдиний атрибут FOR=, значення якого повинне містити ім'я поля введення:

Тепер давайте створимо багаторядкове текстове поле для введення думки клієнта про послуги фірми. Для цього необхідно використовувати тег <TEXTAREA>. У нім можна за допомогою атрибутів COLS= і ROWS= визначити кількість символів в рядку і число рядків текстового поля:

Як бачите, тут ми також визначили атрибут NAME=. А оскільки це текстове поле є багаторядковим, ми застосували ще і стильову властивість vertical-align, щоб “підказка” користувачеві розташувалася по центру (за умовчанням вона розташовується внизу).

Крім того, не забудьте поставити що закриває тег </TEXTAREA>, оскільки все, що знаходиться між тим, що відкриває і закриваючим тегамі, трактуватиметься як вміст текстового поля. Якщо не поставити закриваючий тег, все подальший вміст веб-сторінки опиниться в текстовому полі, причому у вигляді початкового тексту!

Тепер давайте додамо ще одну “традиційну” кнопку, при натисненні на яку всі поля форми очищаються (або набувають початкових значень, визначених атрибутом VALUE=, - в даному випадку при її натисненні в полі Ваше ім'я з'явиться запис Анонім). Таку кнопку можна створити за допомогою тега <INPUT> з атрибутом <TYPE="reset">:

Як і у випадку з кнопкою Submit, значення VALUE= тут визначає напис на кнопці. Якщо цей атрибут не встановлений, на кнопці буде написано: Reset. Давайте подивимося, що v нас виходить в цілому.

Результат роботи цього коду показаний на мал. 7.1. Як бачите, користувач має можливість ввести своє ім'я і висловити свою думку текстових полів, а натиснувши кнопку Відправити, може послати ці дані серверу.

В принципі, на цьому розгляд класичної HTML-форми можна б і завершити, але річ у тому, що окрім текстових полів форма може містити ще деякі елементи, які ми поки не розглянули. Тому давайте для прикладу доповнимо нашу форму ще декількома питаннями про користувача - хай він вкаже свій вік, підлогу і інтереси.

Вибір вікової категорії можна організувати у вигляді списку, що розкривається. Для створення такого списку використовується тег <SELECT> . Між ним і що його закриває тегом </SELECT> можна помістити декілька пунктів майбутнього списку. Кожен з них повинен починатися з тега <OPTION> . В даному випадку ми можемо написати так:

Мал. 7.1. Проста форма HTML

При цьому на екрані буде відображений список, що розкривається, з якого користувач може вибрати будь-який з пунктів. Значення атрибуту VALUE= вибраного пункту буде передано на сервер при відправці даних форми.

Ви, ймовірно, звернули увагу ще на один атрибут тега <SELECT> - атрибут SIZE=. Тут його значення рівне 1 (до речі, це значення визначене за умовчанням, так що можна було цей атрибут і не указувати). Якщо вказати значення, більше 1, то у вікні броузера замість списку, що розкривається, відобразиться так званий прокручуваний список. На мал. 7.2 приведений приклад прокручуваного списку при атрибуті SIZE="3". Як видно, в даному випадку в списку одночасно відображаються три рядки (число рядків прокручуваного списку, що одночасно відображаються, і визначається за допомогою атрибуту S1ZE=). Якщо ж треба дати користувачеві можливість вибору відразу декількох пунктів із списку, то в теге <SELECT> треба встановити атрибут MULTIPLE=.

Мал. 7.2. Прокручуваний список

допомогою такого списку можна було б організувати і вибір підлоги, проте давайте застосуємо для цього інший елемент форми - перемикачі. Вони уживаються групами, в яких тільки один перемикач може бути включений одночасно. Кожен з перемикачів створюється за допомогою тега <INPUT> з атрибутом TYPE="radio". У групу будуть об'єднані ті перемикачі, теги яких мають однакові значення атрибуту NAME=. Наприклад, в даному випадку ми можемо написати так:

Як бачите, значення атрибуту NAME= однаково у обох тегов <INPUT>, тому користувач не зможе вибрати обидва пункти одночасно (при виборі одного з пунктів вибір попереднього відміняється). До речі, в даному прикладі спочатку не вибраний жоден з пунктів. Якщо ж треба, щоб який-небудь пункт був вибраний заздалегідь, то необхідно у відповідному теге <INPUT> встановити атрибут CHECKED, наприклад, от так:

Установка цього атрибуту відразу у декількох перемикачів однієї групи сенсу не має, оскільки при виводі на екран при цьому буде відмічений тільки останній з них.

Тепер давайте запитаємо користувача про його інтереси. Для цього органі зуєм список з декількох пунктів, які він зможе відзначити флаж камі. Кожен з пунктів такого списку створюється за допомогою все того ж тега <INPUT>, проте тепер у нього повинен бути атрибут TYPE="checkbox". Втім, цей варіант практично нічим не відрізняється від попереднього, крім того, що користувач може вибрати відразу декілька пунктів або навіть все. Наприклад:

В даному випадку ми встановили для кожного пункту різні значення атрибуту NAME=, але вони могли б бути і однаковими. Як і в предиду щем випадку, тут можна встановити атрибут CHECKED, щоб відповідний пункт з'явився на екрані заздалегідь відміченим за умовчанням.

Давайте подивимося, що у нас виходить (для економії місця приведемо текст не всієї сторінки, а тільки її лівій частині):

Результат роботи коду показаний на мал. 7.3. Як бачите, ця форма підлозі чилась різноманітнішою завдяки використанню різних типів елі ментів управління для введення даних. Тому вона і виглядає привабливіше.

Мал. 7.3. Форма з елементами управління

Непогано б було ще логічно об'єднати те, що пов'язане з відомостями про користувача, і те, що пов'язане з його думкою. Для такого группірова нія елементів форм в HTML 4.0 був введе тег <FIELDSET> . Все, що нахо дітся між ним і що його закриває тегом </FIELDSET>, буде обведене в рамку і озаглавлене так, як вказано в теге <LEGEND>. Теги <FIELDSET> і <LEGEND> підтримуються поки тільки в Internet Explorer версії 4 і вище, а броузер Netscape почав підтримувати їх тільки в шостій версії. Крім того, елементи <FIELDSET> поки не дуже добре позиціонуються на веб- сторінках. Як ви побачите в наступному прикладі, для коректного цент рірованія їх на сторінці (у Internet Explorer 5) нам довелося помістити всю форму в центровану таблицю і, крім того, окремо центріро вать те, що розташоване між кожною парою тегов <FIELDSET> і </FIELDSET>.

Тег <FIELDSET> можна спожити таким чином:

Після цього можна помістити декілька елементів форми і поставити що закриває тег </FIELDSET> . У броузере Internet Explorer значення атрибуту TITLE= виводиться як спливаюча підказка при наведенні миші на вміст елементу <FIELDSET> . До речі, це відноситься також і до інших тегам, які можуть мати атрибут TITLE=. Можна, наприклад, встановити його навіть у елементу <BODY> . А то, що знаходиться між тегамі <LEGEND> і </LEGEND>, буде винесено в заголовок рамки.

Аналогічно, давайте створимо рамку для тієї частини форми, в яку користувач вводить свою думку:

Тепер давайте надамо користувачеві можливість вибору між введенням думки в текстове поле і вказівкою імені файлу, в якому він ця думка описує. Для вказівки імені файлу, в принципі, підійшло б і звичайне однорядкове текстове поле. Проте воно мало б один недолік: вводити ім'я файлу користувачеві доводилося б тільки уручну.

Цей недолік можна усунути, використовуючи спеціальний тип тега <INPUT> . Якщо в цьому теге встановити атрибут TYPE="file", то користувач побачить на екрані текстове поле для введення імені файлу, а поряд з ним буде розташована кнопка, при натисненні на яку відкриється стандартне вікно вибору файлу. Ім'я вибраного файлу буде автоматично введено в текстове поле. Можна написати, наприклад, так:

Як бачите, за допомогою атрибуту SIZE= тут також можете задати ширину текстового поля.

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

Результат показаний на мал. 7.4. Напис на кнопці вибору файлу залежить від використовуваного броузера, але, як правило, це Огляд або Browse.

Мал. 7.4. Логічне об'єднання елементів форми.

Отже, запам'ятаємо, що тег <INPUT> може використовуватися у формах для створення самих різних елементів управління. Вид елементу залежить від значення атрибуту TYPE= цього тега. Деякі з цих значень ми вже розглянули. Тепер давайте просто перерахуємо ті, що залишилися:

Такий запис створює текстове поле, в якому введений текст відображається зірочками. Зазвичай такі поля використовуються для введення паролів.

А такий запис створює кнопку довільного призначення. На відміну від кнопок типу Submit (Відправити) або Reset (Скидання), при натисненні на цю кнопку нічого не відбудеться, якщо не написаний відповідний обробник події (з обробниками подій ми познайомимося в наступному розділі). Тег <lNPUTTYPE="button"> багато в чому аналогічний розглянутому в розділі 3 тегу <BUTTON> . Проте, на відміну від останнього, він не дозволяє відображати на кнопках графіку і інші нестандартні об'єкти. З іншого боку, будучи елементом форми, він доступний для обробки в броузере Netscape 4.

А цього поля на екрані взагалі не буде видно. Зазвичай його використовують для передачі на сервер якої-небудь інформації пояснення (значення цього поля, не дивлячись на його невидимість, все одно передається на сервер).

Отже, закінчимо на цьому “формальну” частину цього розділу і перейдемо до прикладів того, як елементи веб-сторінок можуть реагувати на дії користувача.