Значення TYPE

Тип Опис Вид
button Кнопка
checkbox Прапорці. Дозволяють вибрати більше одного варіанту із запропонованих
file Поле для введення імені файлу, який пересилається на сервер
hidden Приховане поле. Воно ніяк не відображується на web-сторінці  
image Поле із зображенням. При натисненні на зображення дані форми надсилаються на сервер
password Звичайне текстове поле, але відрізняється від нього тим, що всі символи показуються зірочками. Призначено для того, щоб ніхто не підглянув пароль, що вводився
radio Перемикачі. Використовуються, коли слід вибрати один варіант із декількох запропонованих
reset Кнопка для повернення даних форми в первинне значення
submit Кнопка для відправки даних форми на сервер
text Текстове поле. Призначено для введення символів за допомогою клавіатури

 

Для кожного елементу існує свій список атрибутів, які визначають його вигляд і характеристики. Крім того, в HTML5 додано ще більше десятка нових елементів.

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

Введіть ім’я <INPUT NAME=ім’я SIZE=35>

Поле має іще три додаткових атрибути, які можна використовувати:

· Перший – MAXLENGTH – обмежує кількість символів, які користувач може ввести в поточне поле: <INPUT TYPE="text" MAXLENGTH="число">. За промовчанням ця кількість не обмежена.

· Другий атрибут – SIZE – задає видиму ширину поля: <INPUT TYPE="text" SIZE="ширина">. Значення за промовчанням визначається типом браузера. Якщо значення MAXLENGTH більше ніж SIZE, браузер буде прокручувати дані в вікні. Ширина текстового поля, яке визначається числом символів шрифту. Іншими словами, ширина задається кількістю ближніх літер однакової ширини по горизонталі. Якщо розмір шрифту змінюється за допомогою стилів, ширина також відповідно змінюється.

· Останнім з додаткових атрибутів є атрибут VALUE, який задає початкове значення текстового поля (значення за промовчанням). Визначає значення елементу форми, яке буде відправлене на сервер або отримане за допомогою клієнтських скриптів. На сервер вирушає пара «ім’я=значення», де ім’я задається атрибутом NAME тега <INPUT>, а значення – атрибутом VALUE.

Атрибут TYPE=checkbox. Для створення незалежних перемикачів в формах HTML використовується тег <INPUT> з атрибутом TYPE=checkbox. За необхідності користувач може відмітити декілька перемикачів. Якщо в формі використовується тег <INPUT> з атрибутом checkbox, в ньому повинні бути присутніми і атрибути NAME та VALUE. Атрибут NAME задає назву даного елементу, а VALUE містить його значення. Наприклад:

Україна <INPUT NAME="Україна" TYPE=checkbox VALUE="Україна"><br/>

Польща <INPUT NAME="Польща" TYPE=checkbox VALUE="Польща"> <br/>

Румунія <INPUT NAME="Румунія" TYPE=checkbox VALUE="Румунія"><br/>

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

Атрибут 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>. Наприклад:

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

Атрибут TYPE=password. Якщо в формі потрібно організувати введення паролю, то атрибут TYPE можна встановити в значення password. Використовуючи цей тип, можна організувати введення паролю без виведення на екран символів. При цьому слід пам’ятати, що введені дані передаються по незахищених каналах зв’язку і можуть бути перехоплені. Наприклад:

Логін <INPUT NAME=login>

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

Атрибут 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. Наприклад:

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

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

 

3. Використання списків у формі

Форми HTML часто містять списки та поля зі списками. Для цього використовують тег <SELECT>, який дозволяє створити елемент інтерфейсу у вигляді списку, що розкривається, а також список з одним або множинним вибором. Кінцевий вигляд залежить від використання атрибуту SIZE тегу <SELECT>, який встановлює висоту списку. Ширина списку визначається найширшим текстом, вказаним у тегу <OPTION>, а також може змінюватися за допомогою стилів. Кожен пункт створюється за допомогою тегу <OPTION>, який має бути вкладений в контейнер <SELECT>:

<SELECT>

<OPTION>Пункт 1</OPTION>

<OPTION>Пункт 2</OPTION>

</SELECT>

Якщо планується відправляти дані списку на сервер, то потрібно помістити елемент <SELECT> всередину форми. Це також необхідно, коли до даних списку йде звернення через скрипти.

Тег <SELECT> підтримує три необов’язкових атрибути: MULTIPLE, NAME та SIZE:

· Атрибут MULTIPLE дозволяє вибирати більше одного елементу списку. Наявність атрибуту MULTIPLE повідомляє браузер відображувати вміст елементу <SELECT> як список множинного вибору.

· Атрибут NAME визначає унікальне ім’я елементу <SELECT>. Як правило, це ім’я використовується для доступу до даних через скрипти або для набуття вибраного значення списку на сервері. Як ім’я використовується набір символів, включаючи числа і літери. JavaScript чутливий до регістра, тому при зверненні до елементу <SELECT> по імені, слід дотримуватися однакової форми написання, що і в атрибуті NAME.

· Атрибут SIZE встановлює висоту списку. Кінцевий вигляд списку залежить від використовуваного атрибуту SIZE і браузера. При SIZE="1" Firefox встановлює висоту списку рівною одному пункту, Safari і Chrome ігнорують SIZE, Opera перетворює список на «крутилку». Для вибору декількох значень списку застосовуються клавіші Ctrl і Shiftспільно з курсором миші. Значенням є будь-яке позитивне ціле число.

Для задання переліку пунктів використовується тег <OPTION>. Даний тег може використовуватися тільки всередині тегу <SELECT>. Тег підтримує два додаткових атрибути: SELECTED та VALUE:

· Атрибут SELECTED використовується для задання вибраного за промовчанням елементу. Якщо в тегу <SELECT> доданий атрибут MULTIPLE, то можна виділяти більш за один пункт.

· Атрибут VALUE вказує на значення, що повертається формою після вибору користувачем даного пункту. За промовчанням значення поля рівне значенню тегу <OPTION>. Визначає значення пункту списку, яке буде відправлено на сервер. На сервер вирушає пара «ім’я=значення», де ім’я задається атрибутом NAME тегу <SELECT>, а значення – атрибутом VALUE виділених пунктів списку. Значення може як збігатися з текстом пункту, так бути і самостійним. Також атрибут VALUE застосовується для набуття значень даних через скрипти. Наприклад:

Вибір

<SELECT NAME="Вибір" size="1">

<OPTION>Варіант 1</OPTION>

<OPTION>Варіант 2</OPTION>

<OPTION VALUE="Варіант 3"> Варіант 3</OPTION>

<OPTION SELECTED>Варіант 4</OPTION>

</SELECT>

Тег<OPTGROUP> є контейнером, усередині якого розташовуються теги <OPTION> об’єднані в одну групу:

<SELECT>

<OPTGROUP LABEL="...">

<OPTION>...</OPTION>

</OPTGROUP>

</SELECT>

Особливістю тегу <OPTGROUP> є те, що він не виділяється як звичайний елемент списку, а акцентується за допомогою жирного зображення й всі елементи, що входять в цей контейнер, зміщуються вправо від свого вихідного положення.

Містить один обов’язковий атрибут LABEL – текст, який входитиме в список у вигляді заголовка групи. Це звичайний текстовий рядок без всяких кодів HTML.

Наприклад, на рис. 6.1 наведено групування тегів <OPTION> по групам:

<form action="handler.php">

<p><select>

<optgroup label="Колір">

<option value="c1">Червоний</option>

<option value="c2">Жовтий</option>

<option value="c3">Зелений</option>

</optgroup>

<optgroup label="Відтінок">

<option value="s1">Світлий</option>

<option value="s2">Нормальний</option>

<option value="s3">Темний</option>

</optgroup>

</select></p>

<p><input type="submit" value="Надіслати"></p>

</form>

Рис. 6.1. Групування тегів <OPTION> в одну групу