1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer

Лекція 2.1 - Структурування форм

Поняття форми - FORM, ACTION, METHOD
Однорядкові поля вводу, пароля, прихованого значення
– input: type=text, type=password, type=hidden

Незалежні та залежні перемикачі - input: type=checkbox, type=radio
Кнопки – input: type=submit, type=reset, type=image
Багаторядкові текстові поля - TEXTAREA
Списки вибору - SELECT
Передавання параметрів форми

 

Поняття форми - FORM, ACTION, METHOD

Форма в HTML-документі реалізується тегом-контейнером FORM, в якому задаються всі керуючі елементи - поля введення, кнопки і.т.д. Якщо керуючі елементи вказані поза вмістом тега FORM, то вони не створюють форму, а використовуються для побудови інтерфейсу користувача на веб-сторінці, тобто для привнесення в неї різних кнопок, прапорців, полів вводу.
Імена елементів форми присвоюються через атрибут NAME.
Зокрема NAME - визначає ім'я форми, унікальне для даного документа. Використовується тільки, якщо в документі присутні кілька форм.
ACTION - обов'язковий атрибут. Вказує шлях до скрипту (або програмі) сервера, який обслуговує дану форму.
METHOD - визначає спосіб відправки вмісту html форми. Можливі значення GET (за замовчуванням) і POST.
Метод GET використовується для передачі різних змінних, або дуже коротких повідомлень. Інформація передається в явному вигляді через рядок браузера, тобто її можна перехопити. Наприклад якщо ви бачите в рядку набору браузера щось на зразок http://adress.com/lessons.php?rub=28 це означає, що передається значення змінної rub рівне 28. У html формах зазвичай не використовується.
Метод POST створений спеціально для передачі текстових повідомлень. Майже завжди застосовується у формах. Передає інформацію в прихованому вигляді.

Однорядкові поля вводу, пароля, прихованого значення
– input: type=text, type=password, type=hidden

Елемент INPUT є найбільш вживаним тегом HTML-форм. Він дозволяє створювати всередині форми поля введення рядка тексту, імені файлу, пароля і.т.д.
Формат тега INPUT для створення поля введення текстового рядка:

<input type=text name=ім'я_параметра [value=значення] 
                         [size=розмір_поля] [maxlen=довжина_поля]>
    

Даний тег створює поле з максимально допустимою довжиною тексту maxlen і розміром в size знакомісць. Якщо вказаний атрибут value, то в полі буде спочатку відображатися значення даного атрибута. У квадратних дужках [] позначені необов'язкові атрибути.

Поля введення пароля
Ім'я користувача можна ввести за допомогою звичайного текстового поля. А ось пароль не повинен відображатися на екрані при його введенні. У цьому нам допоможе поле введення пароля:

<input type=password name=ім'я_параметра [value=значення] 
                                [size=розмір] [maxlen=довжина]>					}

Принцип роботи даного тега такий же, як і текстового. Різниця полягає в тому, що інформація, що вводиться в поле не відображається, а замінюється "зірочками". Не рекомендуеться встановлювати значення за замовчуванням з міркувань безпеки (value).

Приховане текстове поле
Для передачі службової інформації (про яку користувач навіть не повинен підозрювати) використовуються приховані поля. За допомогою таких полів, наприклад, можуть передаватися параметри налаштувань.

<input type=hidden name=ім'я_параметра value=значення>

Незалежні та залежні перемикачі - input: type=checkbox, type=radio

Незалежні перемикачі
Дуже часто користувачеві, що заповнює форму в браузері, необхідно дати можливість вказати свої налаштування за допомогою вибору певних значень. При цьому наводяться самі ці значення, а поряд з ними міститься невелике квадратне поле, в якому можна встановити, чи прибрати галочку. При цьому значення, відповідно, буде або вибрано, або ні. Реалізувати це можна знову ж за допомогою тега INPUT. Для цього тільки необхідно як значення атрибуту type вказати chechbox.

<input type=checkbox name=імя_параметра value=значення [checked]>
  

Якщо перемикач був включений на момент натискання кнопки відправки даних, то скрипту буде переданий параметр ім'я = значення. Якщо ж прапорець вимкнений, то сценарієм взагалі нічого не буде передано - наче перемикача взагалі немає.
Перемикач за замовчуванням або включений, або вимкнений. Щоб перемикач був за замовчуванням включений, необхідно для нього вказати атрибут checked. В одній формі модет бути одночасно обрано декілька перемикачів.

Залежні перемикачі Залежні перемикач, так само як і незалежний перемикач, може бути або включений, або вимкнений. При цьому перемикач radio є залежним перемикачем, оскільки на формі може бути тільки один включений перемикач типу radio. Точніше, якщо в формі присутні кілька однойменних залежних перемикачів, то включений з них може бути тільки один. При виборі одного перемикача всі однойменні залежні перемикачі автоматично вимикаються. Як ім'я перемикачів сприймається значення атрибута name. Може бути тільки один активний перемикач. Приклад лістингу форми з залежними перемикачами:

<form action="http://localhost/script.php" method="GET">
<input type=radio name=answer value=yes checked> Так
<input type=radio name=answer value=no> Ні
<input type=submit value=Відправити>
</form>
  

Кнопки – input: type=submit, type=reset, type=image

Ще одним елементом управління типу INPUT є кнопки. Кнопка відправки служить для відправки скрипту введених у форму параметрів. Синтаксис тега INPUT при цьому такий:

<input type=submit [name=go] value=Відправити>
  

Атрибут value визначає текст, який буде написаний на кнопці відправки. Атрибут name визначає ім'я кнопки і є необов'язковим. Якщо значення цього атрибута не вказувати, то скрипту будуть передані введені у форму значення і все. Якщо атрибут name для кнопки буде вказаний, то додатково до основних даних форми буде відправлена пара ім'я = значення від самої кнопки.

Кнопка скидання параметрів
Крім кнопки submit є ще кнопка reset, яка скидає параметри форми, а точніше, встановлює для всіх елементів форми значення за замовчуванням. Бажано, щоб на формі була така кнопка, особливо, якщо це велика форма. Наявність даної кнопки забезпечує очищення форми, наприклад, у випадку, коли були введені неправильні параметри. Синтаксис кнопки скидання:

<input type=reset value=Скидання>
  


Кнопка відправки з малюнком
Замість кнопки submit можна використовувати малюнок для відправки даних. Клік на цьому малюнку дає те ж саме, що й натискання на кнопку submit. Однак, крім цього, сценарієм будуть передані координати місця кліка на малюнку. Координати будуть передані у форматі ім'я.x = коорд_X, y = коорд_Y. Синтаксис кнопки відправки з малюнком:

<input type=image name=імя src=малюнок>
  

Багаторядкові текстові поля - TEXTAREA

Багатострічкові текстові поля створюються за допомогою тегу TEXTAREA. Поле, що створюється цим тегом, дозволяє вводити і відправляти не один рядок, а відразу кілька рядків. Синтаксис тега TEXTAREA:

<textarea name=імя [cols=ширина_в_символах] 
                [rows=висота_в_символах] wrap=тип_переносу>
...текст ....
</textarea>

необов'язкові параметри cols і rows бажано все-таки вказувати. Перший з них задає кількість символів в рядку, а другий - кількість рядків в області.
Атрибут wrap визначає тип перенесення тексту, тобто як виглядатиме текст в полі вводу:
• Virtual - праворуч від текстового поля виводиться смуга прокручування. Введений текст виглядає розбитим на рядки, а символ нового рядка вставляється при натисканні клавіші ENTER;
• Physical - цей тип залежить від типу браузера і виглядає по-різному;
• None - текст виглядає в полі в тому вигляді, в якому користувач його вводить. Якщо текст не вміщається в один рядок, з'являється горизонтальна смуга прокручування.
Слід зауважити, що найбільш зручним є тип Virtual.

Списки вибору - SELECT

Списки з єдиним вибором
Досить часто існує необхідність представити які-небудь дані у вигляді списку і передбачити можливість вибору в цьому списку. В HTML списки реалізуються за допомогою тега SELECT. Список вибору дозволяє вибрати один варіант з множини. Приклад списку з єдиним вибором:

<select name=day size=1>
<option value=1> понеділок </ option>
<option value=2> вівторок </ option>
<option value=3 selected> середа </ option>
<option value=4> четвер </ option>
<option value=5> п'ятниця </ option>
<option value=6> субота </ option>
<option value=7> неділя </ option>
</select>

Атрибут name визначає ім'я параметра, який буде переданий скрипту. Якщо атрибут size дорівнює 1, то список буде "оснащений" смугою прокручування. Значення, вибране у списку за замовчуванням, можна вказати за допомогою атрибуту selected для відповідного тега option. У наведеному прикладі день тижня за замовчуванням - середа. Атрибут value є необов'язковим. Якщо його не вказати, то буде передана рядок, укладена в тег option.

Списки множинного вибору
За допомогою тега SELECT можна також створювати списки множинного вибору. У таких списках можна вибрати не одне, а відразу кілька варіантів значень (здійснювати вибір при натисненій клавіші CTRL). Для того, щоб створити список із множинним вибором, необхідно для тега SELECT вказати атрибут multiple. Ось практичний приклад такого списку:

<select name=day size=7 multiple>
<option value=1> понеділок </option>
<option value=1> вівторок </option>
<option value=1> середу </option>
<option value=1> четвер </option>
<option value=1> п'ятницю </option>
<option value=1> суботу </option>
<option value=1> неділю </option>
</select>

Передавання параметрів форми

Спочатку напишемо HTML-документ, який буде містити практично всі елементи HTML-форми Параметри форми будемо передавати скрипту для наступної обробки. Отже, лістинг HTML-документа send.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Test  </ title>
</ Head>
<body>
<h3> Тестова форма </ h3>
<form name="form1" method="post" action="script.php">
<p> <span> Текстове поле: </span>
<input type="text" name="textfield">
</p>
<p> Поле введення пароля:
<input type="password" name="pswfield">
</p>
<p> Приховане поле hidden
<input name="hidden" type="hidden" id="hidden" value="Приховане_значення">
</p>
<hr size="1">
<p> Незалежні перемикачі (checkbox): </p>
<p>
<input type="checkbox" name="checkbox1" value="1">
Варіант перший
<input type="checkbox" name="checkbox2" value="1">
Варіант другий
<input type="checkbox" name="checkbox3" value="1" checked>
Варіант третій (за замовчуванням) </p>
<hr size="1">
<p> Залежні перемикачі (radio): </p>
<p>
<input name="radiobutton" type="radio" value="yes">
Так
<input name="radiobutton" type="radio" value="no">
Ні </p>
<hr size="1">
<p> Багаторядкове текстове поле (textarea): </p>
<p>
<textarea name="textarea" cols="40" rows="10"> Текст за умовчанням </ textarea>
</p>
<hr size="1">
<p> Список з єдиним вибором: </p>
<p>
<select name=day_s size=1>
<option value=1> понеділок </option>
<option value=2> вівторок </option>
<option value=3 selected> середа </option>
<option value=4> четвер </option>
<option value=5> п'ятниця </option>
<option value=6> субота </option>
<option value=7> неділя </option>
</select>
</p>
<p> Список із множинним вибором (multiple): </p>
<p>
<select name=day_m[] size=7 multiple>
<option value=1 selected> понеділок </option>
<option value=2> вівторок </option>
<option value=3> середа </option>
<option value=4> четвер </option>
<option value=5> п'ятниця </option>
<option value=6> субота </option>
<option value=7> неділя </option>
</select>
</p>
<hr size="1">
<p>
<input type="submit" value="Відіслати форму">
<input type="reset" value="Очистити форму">
</p>
</form>
</body>
</html>

Коли користувач натискає кнопку "Відіслати форму", браузер передасть скрипту наступні параметри:
• textfield - значення текстового поля;
• pswfield - значення поля введення пароля;
• hidden - значення прихованого поля;
• параметри checkbox: checkbox1, checkbox2 і checkbox3 будуть передані тільки в тому випадку, якщо відповідні їм незалежні перемикачі активні;
• radiobutton - значення групи radio (буде передано одне із значень: Yes або No);
• textarea - вміст багатострічкової текстової області;
• day_s - значення списку з єдиним вибором;
• day_m - значення списку із множинним вибором.

Тепер перед нами стоїть завдання обробки всіх параметрів переданої форми за допомогою PHP скрипта.
Параметри textfield, pswfield і textarea обробляються досить просто. Наприклад, для відображення значення параметра textfield достатньо написати в обробному скрипті: echo $_POST['textfield'];
З параметрами checkbox1, checkbox2, checkbox3, і radiobutton справа дещо складніша. Якщо перемикач не активний, то перелічені параметри взагалі не будуть передані на сервер, ніби їх взагалі не було.
Отже, при спробі звернутися в скрипті до цих параметрів, ми отримаємо повідомлення, що змінна не існує. Тому просто написати echo $_POST['checkbox1']; ми не можемо, нам необхідно спочатку перевірити існування цих параметрів в запиті.
Перевірка існування параметра здійснюється за допомогою функції isset (), яка служить для перевірки існування змінних.
if (isset ($ _POST['checkbox1'])) echo $ _POST['checkbox1'];
if (isset ($ _POST['radiobutton'])) echo $ _POST['radiobutton'];
Тільки після перевірки існування перерахованих параметрів форми можна починати роботу з змінними.


Складніше обробляти параметри списку із множинним вибором, оскільки в цьому випадку параметри передаються так:
day_m = 01 & day_m = 03 & day_m = 07 ...
Ми опинилися в ситуації, коли один параметр має кілька значень. Це нагадує нам масив даних. В цьому випадку множинний список можна представити у вигляді масиву, а обробити його елементи за допомогою циклу foreach. Навіть не обов'язково знати кількість елементів множини списку. Потрібно лише попередньо дати зрозуміти транслятору PHP, що ми будемо передавати масив:
<select name="day_m[]" size=7 mutiple>
Квадратні дужки [] - це ознака масиву. Циклічна обробка масиву здійснюється так:
foreach ($ _POST['day_m'] as $ key => $ value)
echo "$ key = $ value ";
А тепер наведемо остаточний лістинг PHP скрипта, обробника нашої тестової форми:

<? php
/ / Виводимо HTML-заголовки:
echo '<html>';
echo '<head>';
echo '<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">';
echo '<title> Test </ title>';
echo '</ head>';
echo '<body>';
echo '<h3> Тестова форма </ h3>';
echo "<p> Передане значення текстового поля: <b>". $ _POST['textfield']. "</ b> </ p>";
echo "<p> Передане значення поля пароля: <b>". $ _POST['pswfield']. "</ b> </ p>";
echo "<p> Передане значення прихованого поля hidden: <b>". $ _POST['hidden']. "</ b> </ p>";
echo '<hr size="1">';
echo '<p> Були включені наступні незалежні перемикачі: </ p>';
if (isset ($_POST['checkbox1'])) echo "<p> <b> Перший </ b> </ p>";
if (isset ($_POST['checkbox2'])) echo "<p> <b> Другий </ b> </ p>";
if (isset ($_POST['checkbox3'])) echo "<p> <b> Третій </ b> </ p>";
echo '<hr size="1">';

if (isset ($_POST['radiobutton']))
{
echo '<p> Був обраний незалежний перемикач з наступним значенням:';
if ($_POST['radiobutton'] === "yes") echo "<b> Yes </b>";
if ($_POST['radiobutton'] === "no") echo "<b> No </b>";
echo '</p>';
}
else echo '<p> Жоден з незалежних перемикачів не був вибраний </p>';
echo '<hr size="1">';
echo '<p> Значення багатострічкового текстового поля: </p>';
echo "<p> <b>".$_POST['textarea']. "</b> </p>";
echo '<hr size="1">';
echo "<p> Значення списку з єдиним вибором: <b>". $_POST['day_s']. "</b> </p>";
echo '<hr size="1">';
echo '<p> Значення списку із множинним вибором: </p>';
foreach ($_POST['day_m'] as $ keys => $ values)
 echo "<b> $ values </b> <br>";
echo '<hr size="1">';
echo '</body>';
echo '</html>';
?>

 

  •  Facebook 

Обрати мову

Хто на сайті

На сайті 88 гостей та відсутні користувачі