Урок 9. Форми. Частина 2

Здрастуй, шановний читачу.

Це друга частина дев`ятого уроку вивчення html, в якому ми продовжимо говорити про форми. З даного уроку ви дізнаєтеся як і які параметри передаються, методи передачі даних з форми.

Перед прочитанням даного уроку рекомендую пройти попередні уроки:

Урок 1. Що таке html?
Урок 2. Частини, заголовки
Урок 3. Списки
Урок 4. Зображення
Урок 5. Посилання. Частина 1
Урок 5. Посилання. Частина 2
Урок 6. Атрибути
Урок 7. Таблиці
Урок 8. Виділення тексту
Урок 9. Форми. Частина 1

Теорія та практика

У минулому частині уроку ми розглянули як створюються форми і її елементи, а також атрибути елементів форм. Якщо ви не пройшли минулий урок, рекомендую його пройти. Спочатку закінчимо з елементами, які залишилися нас не розглянутими в минулому уроці. Почнемо з елементу radio button. У коді він виглядає наступним чином:

1234567

lt;formgt;lt;pgt; Виберіть Вашу країну:lt;/pgt;lt;input name="Country" type="Radio" value="Blr" checkedgt; Білорусьlt;input name="Country" type="Radio" value="Rus"gt; Росіяlt;input name="Country" type="Radio" value="Ukr"gt; Українаlt;input name="Country" type="Radio" value="Usa"gt; СШАlt;/formgt;

Як це виглядає в браузері:

Як ви помітили, для того щоб створити radio button необхідно присвоїти значення атрибуту type = "radio".

Далі перейдемо до місця тексту. Це не просто маленьке поле для введення імені, а велика область. Вона задається за допомогою окремого тега . Розглянемо приклад коду сторінки:

1234

lt;formgt;lt;pgt; Додаткова інформаціяlt;/pgt;lt;textarea name="Other" cols="40" rows="6"gt; lt;/textareagt;lt;/formgt;

Як це виглядає в браузері:

Розглянемо атрибути текстової області.

name = "other" - ім`я елемента. Даний атрибут обов`язково писати і його ім`я повинне бути унікальним.

cols = "40" - кількість стовпців. Визначає ширину області тексту.

rows = "6" - кількість рядків. Визначає висоту текстової області.

Тут немає нічого складного. Всі атрибути краще запам`ятаються, коли ви будете пробувати їх писати руками. Нехай спочатку підглядаючи, але саме писати.

Останнє що хотів розповісти про форми це які бувають методи передачі з форми й про файл обробник.

Розглянемо приклад коду:

Відео: Школа сноуборду | Сезон 9 урок 6 | Фрірайд. Частина 2

123456789101112

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;/headgt;lt;bodygt;lt;form method="POST" action="Handler.php"gt;lt;pgt; Ваше ім`яlt;/pgt;lt;input type="Text" name="Name" size="20" maxlength="15"gt;lt;pgt; lt;input type="Submit" name="Submit" value="Відправити"gt; lt;input type="Reset" name="Reset" value="Очистити форму"gt; lt;/pgt;lt;/formgt;lt;/bodygt;lt;/htmlgt;

Як це виглядає в браузері:

Для того щоб відправити дані форми, необхідно розмістити ВСЕРЕДИНІ форми елемент з атрибутом type = "submit". Тоді форма зрозуміє що по натисканню на цю кнопку необхідно передати дані одним з методів (POST або GET), які описані нижче.

В атрибуті method = "" задається потрібний тип надсилання даних форми. Він буває POST і GET. Відмінність полягає в тому, що при передачі методом GET дані форми передаються в адресному рядку. Тобто їх можна побачити. А при передачі методом POST дані ховаються і користувач їх не може побачити. Ось як це виглядає:

метод GET

метод POST

Щоб стало ще зрозуміліше. Подивіться приклади прямо в браузері:

метод GET

Подивитися прімерСкачать

метод POST

Подивитися прімерСкачать

Подивитися роботу ви зможете прямо в браузері. Але коли скачаєте архів і розпакуєте прямо на робочий стіл, воно працювати у вас не буде, так як там є php файл. І це компільований файл, для якого необхідний сервер. У себе на компьюетере під windows ви можете встановити Denwer.

І після того як натиснута кнопка «Надіслати», форма перетворюється на файл обробник. Він вказується в атрибуті action = "handler.php". Це повинен бути php файл, для того щоб обробити надійшли ці з форми.

За два уроки ми повністю розглянули створення форми, її елементи, атрибути елементів форми, які методи відправки бувають і куди дані відправляються при натисканні кнопки «Відправити». Пробуйте все прописати руками. Тоді ви краще запам`ятайте їх і будете пам`ятати де і як їх застосувати.

Відео: Вплив масажу на сечову і ендокринну системи | Урок 9, частина 2 | уроки масажу

Більше практикуйтеся!