Основи програмування

Технологія "клієнт-сервер" передбачає поділ прикладної програми на дві частини - клієнтську, яка виконується на стороні клієнта, та серверну кімнату, яка, відповідно, виконується на стороні сервера.

Досі при вивченні HTML розглядалися питання розробки Web-сторінок і їх інтерпретації за допомогою браузера на стороні клієнта. Тому з точки зору технології "клієнт-сервер" створені Web сторінки є клієнтськими додатками. Всі зміни на цих сторінках відбуваються тільки при завантаженні нових Web-сторінок, тому вони називаються пасивними (static).

Щоб зробити Web-сторінку активної (динамічної), необхідно розробити програму, яка виконується на стороні сервера, за допомогою якої відбувається обробка і зміна вмісту Web сторінки.

Одним із засобів, які дозволяють здійснити взаємодія між клиенской і серверної частинами програми, є інтерфейс CGI (Common Gateway Interface - стандартний шлюзовий інтерфейс). Серверна частина програми, що використовує CGI-інтерфейс, називається CGI-додатком.

При використанні CGI-додатків необхідна інформація на Web-сторінці предствляется у вигляді форм.

Створення форми в HTML

Для створення форми на Web-сторінці в HTML-документі використовується тег-контейнер <form> ... </form>. Його вмістом є теги <input>, <textarea> <select>, які призначені для створення різних органів управління форми (полів вводу даних, кнопки, перемикачі та ін.).

Тег <form>містить наступні параметри:

• action - вказує URL-адреса програми (CGI-програми для виконання дій над формою;
• method - вказує один з двох основних способів передачі даних від форми на сервер:
  • GET - CGI-додаток отримує дані з форми на Web-сторінці через змінну середовища з ім'ям QUERY_STRING;
  • POST - CGI-додаток отримує дані з форми на Web-сторінці через стандартний потік вводу
• enctype - вказує MIME-тип передачі даних.

Тег <input> містить такі параметри:

• type - вказує тип органу управління, його значеннями є:

-     text - однорядкове поле для введення текстової інформації; розмір поля і число символів визначається значенням size та maxlength тега <input>
-     textarea - багаторядкове поле для введення текстової інформації; розмір поля і число символів визначається значенням size та maxlength тега <input> (для введення багаторядкових даних предподчтительнее використовувати тег <textarea>);
-     password - для введення пароля, аналогічний параметру text , але текст, введений користувачем не відображається на екрані;
-     checkbox - незалежний перемикач;
-     radio - перемикач, що залежить від стану інших перемикачів, використовується для вибору одного значення з декількох;
-     file - для вибору і передачі файлу;
-     button кнопка із заданою підписом;
-     submit - кнопка, предначначенная для надсилання даних з заповненої форми Web-серверу;
-  має таке ж начначение, що і параметр submit, але у вигляді зображення;
-     hidden - приховане поле, не відображається на екрані, але може бути передано сервера.

• name - вказує ім'я органу управління, надсилається програмі обробки форми;
• value - вказує значення або стан органу управління;
• checked - використовується для встановлення початкового стану перемикачів;
• size - вказує ширину поля для введення текстової інформації, за замовчуванням приймається рівним 20;
• maxlength - вказує максимальну кількість символів, які може бути введено в даному полі, за замовчуванням не має обмежень;
• align - вказує вирівнювання тексту біля форми;
• src - URL-адреса графічного зображення, якщо воно використовується в органі управління.

Для введення багаторядкового тексту краще скористатися тегом-контейнером <textarea> ... </textarea>, для якого можна встановити наступні три параметри:

• name - вказує ім'я багаторядкового поля, надсилається програмі обробки форми;
• rows - вказує розмір поля по вертикалі (в рядках);
• cols - вказує розмір поля по горизонталі (стрічки).

За допомогою тега-контейнера <select> ... </select> можна вказати у формі на Web-сторінці заздалегідь проинициализированный список довільних текстових рядків. Обрана рядок або вибрані рядки передаються Web-серверу поряд з вмістом інших полів форми. Для тегу <select> визначені наступні параметри:

• name - вказує ім'я списку, яке разом з обраної рядком передається серверу;
• size - вказує кількість рядків списку, що відображаються на екрані, решта згорнуті і для появи на екрані вимагають прокручування списку;
• multiple - вказує на те, що можуть бути відзначені і передані на сервер не один рядок, а всі зазначені.

Кожен рядок списку всередині контейнера <select> ... </select> задається за допомогою тега <option>, який містить наступні параметри:

• selected - відзначає спочатку вибраний рядок;
• value - задає значення вибраної рядка.

Кожний зазначений рядок передається на сервер у вигляді пари "ім'я=значення". В якості імені береться ім'я набору, тобто. "number". В якості значення береться значення параметра value, а якщо він не вказаний - текст після тега <option>. Наприклад, для другого рядка на Web-сервер передається пара "number=second", а для третьої рядка, якщо вона буде обрана, - "number=Example1_3".