PHP та HTTP - Робота з HTML формами
Форма в HTML-документі реалізується тегом-контейнером FORM, в якому задаються всі елементи, що управляють, - поля введення, кнопки і.т.д. Якщо керуючі елементи вказані поза вмістом тега FORM , то вони не створюють форму, а використовуються для побудови інтерфейсу користувача на веб-сторінці, тобто для привнесення в неї різних кнопок, прапорців, полів введення.
Обробка елементів форми проводиться за допомогою скриптів, але вони можуть взагалі ніяк не оброблятися.
Імена елементам форми надаються через їх атрибут NAME.
Кожен елемент форми може мати початкове та кінцеве значення, які є символьними рядками. Початкові значення елементів не змінюються, завдяки чому може здійснюватися скидання значень, вказаних користувачем. Результатом цієї дії буде встановлення всіх керуючих елементів форми у своїх початкових значеннях, що використовуються за умовчанням.
У HTML 4.01 визначено такі типи керуючих елементів:
- Кнопки - задаються за допомогою елементів BUTTON та INPUT. Розрізняють:
» кнопки відправки - при натисканні на них вони здійснюють відправку форми серверу;
» кнопки скидання - при натисканні на них, керуючі елементи набувають початкових значень;
» Інші кнопки - кнопки, для яких не вказано дію, що виконується за умовчанням при натисканні на них.
- Залежні перемикачі (перемикачі із залежною фіксацією) - задаються елементом INPUT і є перемикачі "вкл/выкл". Якщо кілька залежних перемикачів мають однакові імена, вони є взаємовиключними. Це означає, що й одна з них ставиться у становище " вкл " , всі інші автоматично - у становище " викл " . Саме це і є перевагою їхвикористання.
- Незалежні перемикачі (перемикачі з незалежною фіксацією) - задаються елементом INPUT і є перемикачі "вкл/выкл", але на відміну від залежних, незалежні перемикачі можуть приймати і змінювати своє значення незалежно від інших перемикачів. Навіть якщо останні мають таке саме ім'я.
- Меню реалізується за допомогою елементів SELECT, OPTGROUP та OPTION. Меню надають користувачеві список можливих варіантів вибору.
- Введення тексту - реалізується елементами INPUT, якщо вводиться один рядок, і елементами TEXTAREA - якщо кілька рядків. В обох випадках введений текст стає поточним значенням елемента, що управляє.
- Вибір файлів - дозволяє разом із формою відправляти вибрані файли, що реалізується HTML-елементом INPUT .
- Приховані керуючі елементи - створюються керуючим елементом INPUT.
Як бачите, багато елементів задаються за допомогою універсального тега INPUT .
Повну специфікацію по HTML4 можна знайтитут.
Тег FORM - контейнер форм
Наведемо атрибути тега FORM:
- APPLICATION/X-WWW-FORM-URLENCODED (використовується за замовчуванням);
Тег INPUT та його методи
Елемент INPUT є найбільш уживаним тегом HTML-форм. З допомогою цього тега реалізуються основні функції форми. Він дозволяє створювати всередині форми поля введення рядка тексту, імені файлу, пароля тощо.
Зверніть увагу на особливість INPUT – у нього немає кінцевого (завершального) тега. Атрибути та особливості використання INPUT залежать від способу використання. Розглянемо ці методи.
» Однорядкові поля введення
Найчастіше використовуються поля введення - адже навіть кнопка є полем введенняінформації. Почнемо із поля введення текстової інформації. Формат тега INPUT для створення поля введення текстового рядка:
Цей тег створює поле води з максимально допустимою довжиною тексту maxlen і розміром у size знайомест. Якщо вказано атрибут value , то в полі спочатку відображатиметься значення атрибута. У квадратних дужках [] позначені необов'язкові атрибути.
Ось приклад однорядкового поля введення:
» Поля введення пароля
Звичайно, ім'я користувача можна ввести за допомогою текстового поля. А ось пароль не повинен відображатися на екрані під час його введення. У цьому нам допоможе поле введення пароля:
Ось приклад поля введення пароля:
» Приховане текстове поле
Для передачі службової інформації (про яку користувач навіть не повинен підозрювати) використовуються приховані поля. За допомогою таких полів, наприклад, можуть передаватися параметри налаштування.
Такі поля надсилаються серверу, але на веб-сторінці не відображаються.
» Незалежні перемикачі
Дуже часто користувачеві, що заповнює форму в браузері, необхідно надати можливість вказати свої налаштування за допомогою вибору певних значень. При цьому наводяться самі ці значення, а поряд з ними міститься невелике квадратне поле, в якому можна встановити, або забрати галочку. При цьому значення, відповідно, буде обрано, або ні.
Реалізувати це можна знову ж таки за допомогою тега INPUT. Для цього тільки необхідно як значення атрибуту type вказати chechbox.
Якщо перемикач був увімкнений на момент натискання кнопки надсилання даних, то скрипту буде передано параметр имя=значение . Якщо ж прапорець вимкнено, то сценарію взагалі нічого не буде передано – начебто перемикача взагалі немає.
Перемикач позамовчуванням або увімкнено, або вимкнено. Щоб перемикач був увімкнений, необхідно для нього вказати атрибут checked .
Перемикач checkbox називається незалежним, оскільки його стан залежить від стану інших перемикачів checkbox . Таким чином, в одній формі модет бути одночасно обрано кілька перемикачів.
Наведемо приклад незалежних перемикачів:
У HTML є і такий перемикач, який залежить від інших перемикачів, він розглядається далі.
» Залежні перемикачі
Залежні перемикач, так само як і незалежний перемикач, може бути включений або вимкнений. При цьому перемикач radio є залежним перемикачем, оскільки на формі може бути один включений перемикач типу radio . Точніше, якщо у формі є кілька однойменних залежних перемикачів, то включений з них може бути лише один. При виборі одного перемикача автоматично вимикаються всі однойменні залежні перемикачі. Як ім'я перемикачів сприймається значення атрибута name. Можливо лише один активний перемикач. Приклад лістингу форми із залежними перемикачами:
Дана форма виглядатиме так:
Перший перемикач (зі значенням yes) активний за умовчанням (ми встановили атрибут checked).
Як тільки користувач натисне кнопку "Надіслати", скрипту script.php буде передано параметр answer (атрибут name обох перемикачів) зі значенням yes або no (залежно від того, який варіант вибрав користувач).
А ось так виглядає текст скрипту, який приймає дані з розглянутої форми та обробляє відповідь.
» Кнопка відправки форми
Ще одним елементом керування типу INPUT є кнопки. Кнопканадсилання служить для надсилання скрипту введених у форму параметрів. Синтаксис тега INPUT при цьому такий:
Атрибут value визначає текст, написаний на кнопці відправки. Атрибут name визначає ім'я кнопки та є необов'язковим. Якщо значення цього атрибуту не вказувати, то скрипту будуть передані введені у форму значення та всі. Якщо атрибут name для кнопки буде вказано, додатково до основних даних форми буде відправлена пара ім'я = значення від самої кнопки.
» Кнопка скидання параметрів
Крім кнопки submit є ще кнопка reset, яка скидає параметри форми, а точніше, встановлює для всіх елементів форми значення за промовчанням. Бажано, щоб на формі була така кнопка, особливо якщо це велика форма. Наявність цієї кнопки забезпечує очищення форми, наприклад, у разі введення неправильних параметрів. Синтаксис кнопки скидання:
» Кнопка відправки з малюнком
Замість кнопки submit можна використовувати малюнок для надсилання даних. Клік на цьому малюнку дає те саме, що й натискання на кнопку submit . Однак, крім цього, сценарію буде передано координати місця кліка на малюнку. Координати будуть передані у форматі имя.x=коор_X , y=коор_Y . Синтаксис кнопки відправки з малюнком:
Багаторядкові текстові поля. Тег TEXTAREA
У HTML багаторядкові текстові поля створюються за допомогою тега TEXTAREA. Поле, створюване цим тегом, дозволяє вводити та відправляти не один рядок, а одразу кілька рядків. Синтаксис тега TEXTAREA :
Декілька значень щодо використання атрибутів: необов'язкові параметри cols і rows бажано все-таки вказувати. Перший задає кількість символів у рядку, а другий - кількість рядків в області. Атрибут wrap визначає типперенесення тексту, як виглядатиме текст у полі введення:
- Virtual – праворуч від текстового поля виводиться смуга прокручування. Текст, що вводиться, виглядає розбитим на рядки, а символ нового рядка вставляється при натисканні клавіші ENTER;
- Physical - цей тип залежить від типу браузера та виглядає по-різному;
- None - текст виглядає у полі у вигляді, у якому користувач його вводить. Якщо текст не змінюється в один рядок, з'являється горизонтальна смуга прокручування.
Слід зазначити, що найзручнішим є тип Virtual. Ось приклад багаторядкового текстового поля з використанням атрибуту wrap=Virtual:
Списки вибору. Тег SELECT
» Списки з єдиним вибором
Досить часто існує необхідність подати якісь дані у вигляді списку та передбачити можливість вибору в цьому списку. У HTML списки реалізуються за допомогою тега SELECT. Список вибору дозволяє вибрати один варіант із множини. Приклад списку з єдиним вибором:
А ось його практична реалізація:
Атрибут name визначає ім'я параметра, який буде передано скрипту. Якщо атрибут size дорівнює 1, то список буде "оснащений" смугою прокручування. Значення, вибране у списку за промовчанням, можна вказати за допомогою атрибута selected для відповідного тега option . У наведеному прикладі день тижня за умовчанням - Середа. Атрибут value є необов'язковим. Якщо його не вказати, то буде передано рядок, укладений у тег option .
» Списки множинного вибору
За допомогою тега SELECT також можна створювати списки множинного вибору. У списках можна вибрати не одне, а відразу кілька варіантів значень. Для того, щоб створити список із множинним вибором, необхідно для тега SELECTвказати атрибут multiple. Ось практичний приклад такого списку:
Завантаження файлів на сервер
Тег INPUT дозволяє реалізувати ще одну можливість форм, а саме створювати поле вибору файлу для надсилання на сервер. Синтаксис наступний:
Детально про завантаження файлів на сервер (Upload) можна ознайомитисятут.