INPUT - поля введення у формах

FORM (ФОРМА) - заповнювана форма

Для того щобпредставити заповнювану форму, використовувану для таких дій користувача, як реєстрація, упорядкування користувача чи формування запиту служать саме форми HTML. Форми можуть містити широкий діапазон прийомів розмітки HTML, включаючи такі види полей форм, як однорядкові чи багатострокові текстові поля, групи радіокнопок, перемикачі й меню. Для створення форм Вам знадобляться теги FORM і його атрибути INPUT, TEXTAREA і SELECT

Основний синтаксис форми виглядає в такий спосіб:

<FORM ACTION="URL">
зміст форми, включаючи елементи INPUT і, можливо, елементи TEXTAREA і SELECT
</FORM>

Можливі атрибути

ім'яатрибута	можливі значення	зміст атрибута
ACTION	URL	адреса сервера, що використовує форма
METHOD	GET, POST	метод передачі даних, отриманих від користувача, на сервер
ENCTYPE	рядок	механізм, який використовується для кодування змісту форми

Є деякі елементи, що можуть з'явитися тільки в межах елемента FORM. Зокрема:

INPUT

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

SELECT

меню одиничного чи множинного вибору

TEXTAREA

багатострокове текстове поле.

INPUT - поля введення у формах

Ціль

Специфікувати у межах форми вступного поля: однострокові текстові поля, поля пароля, перемикачі, радіокнопки, кнопки відсилання і перезавантаження, сховані поля, кнопки зображення і т.д.

Основний синтаксис

<INPUT TYPE=тип_поля_введення інші_атрибути>

Можливі атрибути

ім'яатрибута	можливі значення	зміст
TYPE	TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, FILE, HIDDEN, IMAGE	тип поля для введення
NAME	рядок	ім'я для ідентифікації поля, коли його вміст передається серверу
VALUE	рядок	первісне значення вступного поля; для атрибутів SUBMIT чи RESET - текстова мітка
CHECKED	установлений	коли TYPE = RADIO чи CHECKBOX, ініціалізує поле до встановленого стану
SIZE	ціле	відимий розмір поля; кількість символів
MAXLENGTH	ціле	максимальна кількість символів, дозволених у текстовому полі
SRC	URL	адреса зображення
ALIGN	TOP, MIDDLE, BOTTOM, LEFT, RIGHT	вирівнювання зображення для графічних керуючих кнопок

1.1.1. TYPE=TEXT (тип=текст - за замовчуванням)

Однострокове текстове поле, чий видимий розмір може бути встановлений атрибутом SIZE, наприклад, SIZE=40 для 40-символьного поля. Користувачі можуть вводити і більше символів, чим ця межа, але з текстовим скролінгом (пролистуванням) поля, щоб курсор уведення залишався видимим. Ви можете задати верхню межу кількості символів атрибутом MAXLENGTH. Атрибут NAME використовується для найменування поля, а атрибут VALUE ініціалізує текстовий рядок в полі, коли документ уперше завантажений.

Помітимо, що текстове введення обмежене одним рядком. Використовуйте елемент TEXTAREA, щоб визначити багатострокові текстові поля.

Приклад:

<INPUT TYPE=TEXT SIZE=40 NAME= користувальницьке value="Ваше ім'я">

Рис. 2.1. Відображення поля

1.1.2. TYPE=PASSWORD (тип=пароль)

Цей тип подібний TYPE=TEXT, однак усі символи, що вводяться, представляються у виді*, щоб сховати текст від очей, що підглядають, коли вводиться пароль. Ви можете використовувати атрибути SIZE і MAXLENGTH, щоб керувати видимою і максимальною довжинами поля точно так само, як для звичайного текстового поля.

Приклад:

<INPUT TYPE=PASSWORD SIZE=12 NAME=pw>

Рис.2.2. Відображення введення пароля

1.1.3. TYPE=CHECKBOX (тип=поле установки - перемикач)

Використовується для простих булевих атрибутів (тобто атрибутів, що приймають значення ІСТИНА чи НЕПРАВДА) чи для атрибутів, що одночасно можуть приймати безліч значень. Кожне заповнене перемикальне поле генерує окрему пару ім'я/значення у формованих даних, навіть якщо це приводить до дублювання імен. Використовуйте атрибут CHECKED для ініціалізації поля установки за замовчуванням.

Приклад:

<INPUT TYPE=CHECKBOX CHECKED NAME=xyz VALUE=yes>

Рис. 2.3. Перемикач

1.1.4. TYPE=RADIO (тип=радиокнопка)

Використовується для атрибута, що може приймати єдине значення з безлічі. Кожне поле радіокнопки в групі повинне бути задано тільки одним значенням атрибута NAME. Радіокнопки вимагають явного атрибута VALUE. Єдина натиснута радіокнопка в групі генерує парі ім'я/значення у формованих даних. Одна радіокнопка в групі з атрибутом CHECKED повинна бути попередньо встановлена за замовчуванням.

Приклад:

<INPUT TYPE=RADIO NAME=age VALUE="0-12">

<INPUT TYPE=RADIO NAME=age VALUE="13-17">

<INPUT TYPE=RADIO NAME=age VALUE="18-25">

<INPUT TYPE=RADIO NAME=age VALUE="26-35" CHECKED>

<INPUT TYPE=RADIO NAME=age VALUE="36-">

Рис. 2.4. Група перемикачів

1.1.5. TYPE=SUBMIT (тип=відсилання)

Визначає кнопку, що користувач може натиснути, щоб передати зміст форми серверу. Мітка встановлюється атрибутом VALUE. Якщо атрибут NAME задано, то пара найменування/значення для кнопки, що виконується, буде включена в передані дані. Ви можете включити кнопки, що виконуються у формі. Дивіться TYPE=IMAGE для графічних кнопок.

Приклади:

<INPUT TYPE=SUBMIT VALUE="Посилка">

Рис.2.5. Посилка

1.1.6. TYPE=RESET (тип=перезавантаження)

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

Приклад:

<INPUT TYPE=RESET VALUE="Start over...">

1.1.7. TYPE=FILE (тип=файл)

Цей тип дає можливість користувачам прикріпити файл до змісту форми. Елемент звичайно відображається, як текстове поле з кнопкою, при натисканні на який з'являється файловий броузер для добору імені файлу. Ім'я файлу також може бути введене прямо в текстове поле. /7/

У такий же спосіб, як для TYPE=TEXT, для TYPE=FILE можна використовувати атрибут SIZE, щоб установити видиму ширину поля. Ви також можете установити верхню межу для довжини імені файлу, використовуючи атрибут MAXLENGTH. Деякі програми перегляду підтримують здатність обмежувати види файлів, що можуть бути прикріплені до форми, перерахуванням поділюваного комами списку файлів із змістом типу MIME, який задається атрибутом ACCEPT. Наприклад, ACCEPT="image/*" обмежить файли зображеннями.

Приклад:

<INPUT TYPE=FILE NAME=photo SIZE=20>

Рис. 2.6.Добір імені файлу

1.1.8. TYPE=HIDDEN (тип=схований)

Цей тип поля не відображається користувачу. Сховане поле дає можливість для серверів зберігати інформацію про стан разом з формою. Коли форма "виповнюється" при натисканні відповідної кнопки, серверу буде передана пара ім'я/значення, визначена з використанням відповідних атрибутів. Цей тип створює робоче оточення для повноти можливостей HTTP і є альтернативою для використання так називаної HTTP cookies.

Приклад:

<INPUT TYPE=HIDDEN NAME=customerid VALUE="c2415-345-8563">

1.1.9. TYPE=IMAGE

Використовується для графічних кнопок відсилань, які відображаються зображенням. URL для зображень специфікується атрибутом SRC. Вирівнювання зображення може бути специфіковано атрибутом ALIGN. У цьому відношенні графічні кнопки відсилання ідентичні елементам IMG (так, Ви можете установити для ALIGN - LEFT, RIGHT, TOP, MIDDLE чи BOTTOM). Атрибути NAME і VALUE трактуються точно так, як текстові кнопки відсилання, і повинні бути задані для забезпечення роботи неграфічних програм перегляду.

Приклад:

<INPUT TYPE=IMAGE SRC="fg.bmp" VALUE="Малюнок">

1.2. OPTION - елемент вибору в меню

Ціль

Для представлення елемента вибору в меню вибора у межах форми.

Основний синтаксис

<OPTION>текст</OPTION>

Кінцевий тег завжди може бути опущений.

Можливі атрибути

ім'яатрибута	Можливі значення	зміст
SELECTED	SELECTED	задає опцію за замовчуванням
VALUE	Рядок	значення властивості використовується, коли серверу передається зміст форми; ця властивість сполучається з властивістю імені, що задається атрибутом NAME із зовнішнього елемента SELECT

Приклад:

<OPTION>людина</OPTION>

1.3. SELECT (ВИБРАТИ) - меню вибору у формі

Ціль

Специфікація в межах форми: меню, з якого користувач може вибрати один чи кілька елементів

Основний синтаксис

<SELECT NAME=ім'я>
елементи OPTION
</SELECT>

Можливі атрибути

ім'яатрибута	можливі значення	зміст
NAME	рядок	ім'я, що використовується для ідентифікації вибору меню, коли форма передається серверу
SIZE	ціле	установлює число водночас видимих опцій
MULTIPLE	MULTIPLE	означає, що користувач може зробити множинний вибір з меню

Приклад:

<SELECT NAME="Кращий">

<OPTION VALUE=a>Петя

<OPTION VALUE=b>Іван

<OPTION VALUE=c>Гена

<OPTION VALUE=d>Дмитрик

</SELECT>

Рис.2.7. Меню вибору

1.4. TEXTAREA – багатострокове поле текстового введення у формі

Ціль

Специфікувати у межах форми області для багатострокового користувальницького введення.

Основний синтаксис

<TEXTAREA NAME=ім'я ROWS=m COLS=n>
текст
</TEXTAREA>

Можливі атрибути

ім'яатрибута	можливі значення	зміст
NAME	рядок	ім'я, що використовується для ідентифікації поля з текстовим змістом, коли форма передається серверу
ROWS	ціле	кількість ліній видимого тексту
COLS	ціле	число, що задає видиму ширину тексту

Приклад:

<TEXTAREA NAME=address ROWS=4 COLS=40> Адреси </TEXTAREA>

Рис. 2.8. Адреса