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

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

<FORM METHOD="post" ACTION="mailto:yourname@srt.com">

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

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

Атрибут TYPE=text

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

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

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

Атрибут TYPE=checkbox

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

Україна<input NAME="Країна" TYPE=checkbox VALUE="Україна"> %

Країни СНГ<input NAME="Країна" TYPE=checkbox 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 містить URL файлу — джерела зображення. Атрибут 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, по якій користувач може клацнути мишею, аби повернутися до первинних значень полів. Коли користувач вибирає дану кнопку, форма відновлює первинні значення всіх елементів, в яких присутній атрибут 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.