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

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

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

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

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

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

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

INPUT

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

SELECT

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

TEXTAREA

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

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

Ціль

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

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

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

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

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>

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

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

Приклад:

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

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

Ціль

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

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

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

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

Приклад:

<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>

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

Приклад:

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

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

• ⇐ Назад
• 1
• 2
• 34