1. Внутрішній пристрій
2. Теги
3. приклад форми

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

Внутрішній пристрій

Фактично форма складається з двох частин: візуального оформлення і скрипта, який обробляє введені дані. Щоб написати скрипт, потрібно володіти однією з мов програмування. Ми тут їх вивченням не займаємося, тому будемо розбирати HTML-складову - вчитися створювати інтерфейс форми, припускаючи, що десь у нас вже є обробляє її скрипт.

HTML-форма створюється за допомогою парного тега <form>, усередині якого розташовуються теги її елементів.

Теги

Перед тим, як показувати приклади, пройдемося по тегам.

<form>. Створює форму. Якщо порівнювати форму з таблицею, то тег <form> виконує ту ж роль, що і тег <table>. До нього додаються такі атрибути.

• action. Адреса скрипта або документа, який обробляє дані форми. Як значення вказується URL.
• method. Метод передачі даних оброблювачу. Можна вказати GET (за замовчуванням) або POST. GET має на увазі передачу даних у вигляді частини URL. Можливо, ви бачили в адресах щось на зразок? Id = 225. Це воно і є. Метод POST працює по-іншому, а тому дані, що передаються від користувача приховані. Він більш безпечний, дозволяє передавати більше інформації, в тому числі і файли. Але все це більше стосується програмування, ніж HTML-розмітки.
• accept-charset. Встановлює кодування.
• autocomplete. Включає (on) або відключає (off) автозаповнення форм, коли браузер сам підказує вам, що вводити, грунтуючись на тому, що ви набирали в минулий раз. Відключати функцію має сенс для конфіденційних форм, щоб оглядач ненароком не показав важливих даних.
• name. Ім'я форми.

Є і ще атрибути, але використовуються вони вкрай рідко.

<input>. Цікавий тег, за допомогою якого можна створити будь-який елемент введення, який саме - задається атрибутом type. Строго кажучи, цей тег можна використовувати і поза формою, але тоді ви не зможете вказати адресу обробника, і елемент сторінки буде нефункціональним.

• type. Головний атрибут тега <input>, що визначає, як уже говорилося, тип елемента вводу. Значний у нього так багато, і вони так важливі, що вистачило на цілу таблицю (див. Нижче).

значення

опис

button

кнопка

checkbox

Прапорці. З їх допомогою ви можете вибрати відразу кілька варіантів

file

Кнопка вибору файлу

hidden

Приховане поле, в браузері не відображається

image

Кнопка з картинкою

password

Поле для введення пароля. Звичайне текстове поле, але Зауважте, що ви ховаються за зірочками (*)

radio

Перемикачі. Майже прапорці, але з їх допомогою можна вибрати тільки один із запропонованих варіантів

reset

Кнопка скидання даних форми до первинних значень

submit

Кнопка відправки даних на сервер. Зазвичай ви натискаєте їх, щоб підтвердити введення - Зберегти, Застосувати, ОК

text

Текстове поле

Безліч нових значень з'явилося в HTML5, але вони, на жаль, поки (червень 2016) підтримуються тільки частково.

• autofocus. Фокус введення буде за замовчуванням встановлюватися на тому елементі, для якого вказано цей атрибут.
• checked. Встановити прапорець або радіокнопку за замовчуванням.
• pattern. За допомогою цього атрибута можна змусити користувача ввести дані в певному форматі. Наприклад, ввести тільки одну цифру від 0 до 9 або тільки букви латинського алфавіту (повинно бути знайоме). Поки поле не буде заповнено правильно, дані форми не будуть передані на обробку.
• placeholder. Задає текст-підказку.
• <select>. Контейнер, за допомогою якого створюється список. Це може бути список, що розкривається або список з одним або множинним вибором. За елементи списку відповідають теги <option>.
• size. Головне властивість, яке вказує кількість відображуваних рядків списку. Наприклад, якщо значення дорівнює 1, то список виходить розкривається, в іншому випадку виходить або список, все елементи якого відразу видно, або список, за елементами якого можна переміщатися за допомогою смуги прокрутки.
• multiple. Атрибут без значень. Вкажіть його, щоб отримати список з множинним вибором.
• required. Робить список обов'язковим для вибору, тобто поки користувач не вкаже в ньому значення, форма не відправиться. Часто так чинять зі списком Пол в реєстраційних формах.
• <option>. Тег елемента списку, який використовується всередині <select>.
• value. Значення пункту списку для обробки скриптом.
• selected. Пункт з цим атрибутом за замовчуванням буде виділено, як ніби користувач вибрав саме його.
• <optgroup>. Контейнер дозволяє групувати елементи списку <option>.
• disabled. Робить групу списку недоступною для вибору (при цьому вона відображається іншим кольором).
• label. Текст заголовка групи.

приклад форми

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

Код буде таким.

Розберемо деякі його частини.

<form method = "get" action = "script.php"> - створюємо форму, оброблювану файлом script.php. Дані передаються методом GET.

<Br> - тег переходу на наступний рядок.

<Input name = "login" type = "text" size = "25" maxlength = "30" value = "Михайло"> - створюємо текстове поле з ім'ям login шириною в 25 символів. Як значення за замовчуванням вказуємо Михайло, щоб користувачеві було зрозуміло, що і як вводити.

<Input name = "pass" type = "password" size = "25" maxlength = "30" value = ""> - створюємо поле введення пароля (символи заміщаються зірочками). Ширина поля - 25, максимальна довжина пароля - 30 символів.

<Select> <option value = "c 1"> Гість </ option> <option value = "c 2"> Адміністратор </ option> </ select> - створюємо простий список, що розкривається з двох пунктів.

<Input name = "save" type = "checkbox" value = "yes"> Запам'ятати - додаємо прапорець і пишемо пояснювальний текст.

<Br> <input type = "submit" name = "enter" value = "Вхід"> - створюємо кнопку, натискання якої запускає процес обробки даних.

</ form> - закриваємо форму.

У браузері веб-форма буде виглядати, як на малюнку нижче.

Її можна заповнювати, але щоб вона почала працювати, необхідно написати код і зберегти його у файлі script.php поруч з HTML-сторінкою.