Державний університет інформаційно-комунікаційних технологій

Львівський коледж Державного університету інформаційно-комунікаційних технологій

Навчальна дисципліна: Програмування в Internet

Лабораторія: Internet

Спеціальність “Обслуговування компютерних систем та мереж”

	Розглянуто			Затверджую Заступник директора з НВР __________ Я.М. Плешівський “_____” ___________ 2012 р.
на засіданні циклової комісії Обслуговування комп’ютерної техніки Протокол № __ від _______ 2012 р. Голова циклової комісії __________Л.І.Кужій

Інструкції до лабораторної роботи № 9 " Застосування форм."

Склав викладач

__________ С.Р. Синюк

Львів 2012

Лабораторна робота № 9

Тема:. Застосування форм.

Мета:. Навчитись застосовувати форми. Набути навиків застосування форм у html – документі.

Теоретичні відомості:

1. Html-форми

Форми були створені і використовуються в WWW для отримання відгуку користувача на надану інформацію та збору даних про користувача. Після заповнення користувачем форми і запуску процесу її обробки, інформація з неї потрапляє до програмі, що працює на сервері. Простота використання тега <MAILTO:> у формах дозволяє навіть власникам невеликих сторінок отримувати відгук від своїх читачів. Для обробки великої кількості відгуків використовуються програми, що підтримують Common Gateway Interface (CGI) і розташовані на сервері, на адресу якого надходять відгуки. Таким чином користувач може інтерактивно взаємодіяти з Web-сервером через Internet.

2. Задання форми - елемент form

Елемент FORM позначає документ як форму і визначає межі використання інших тегів, які розташовані у формі. Тег <FORM> визначається послідовністю тегів <INPUT>, розміщених всередині пари <FORM> і </ FORM>. У формі використовується як метод (method), так і дія (action) для опису обробки даних, що вводяться користувачем у форму.  Метод (GET або POST) визначає, як повинні оброблятися вхідні дані з форми, а дія вказує на URI (Uniform Resource Identifier) ​​програми, відповідальної за обробку цих даних.

Синтаксис

<form method="get | post">...</form>

Значення

Значення атрибута method не залежить від регістра. Розрізняють два методи - get і post.

get

Цей метод є одним з найпоширеніших і призначений для отримання необхідної інформації та передачі даних в адресному рядку. Пари «ім'я = значення» приєднуються в цьому випадку до адреси після знака питання і розділяються між собою амперсандом (символ &). Зручність використання методу get полягає в тому, що адреса з усіма параметрами можна використовувати неодноразово, зберігши його, наприклад, в закладки браузера, а також міняти значення параметрів прямо в адресному рядку.

post

Метод post посилає на сервер дані в запиті браузера. Це дозволяє відправляти більшу кількість даних, ніж доступно методом get, оскільки у нього встановлено обмеження в 4 Кб. Великі обсяги даних використовуються в форумах, поштових службах, заповненні бази даних, при пересиланні файлів та ін

<FORM METHOD = post

ACTION = mailto: yourname@your.email.address>

3. Визначення елементів управління форми - тег <INPUT>

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

1. Атрибут TYPE = text

Коли користувачеві необхідно ввести невелику кількість тексту (одну чи кілька рядків), використовується тег <INPUT>, і атрибут TYPE встановлюється в значення text. Це значення прийнято за замовчуванням і вказувати його необов'язково. Крім того, задається атрибут NAME для визначення найменування змінної поля.

Ваше ім'я <INPUT NAME=Name SIZE=35>

Є ще три додаткових атрибуту, які можна використовувати. Перший називається MAXLENGTH, він обмежує число символів, що вводяться користувачем в поточне поле. За замовчуванням дане число не обмежене. Другим атрибутом є SIZE, що визначає розмір видимої на екрані області, займаної поточним полем. Значення за умовчанням визначається типом браузера. Якщо значення MAXLENGTH більше, ніж SIZE, браузер буде прокручувати дані у вікні. Останнім з додаткових атрибутів є атрибут VALUE, що забезпечує початкове значення поля введення.

2. Атрибут TYPE = checkbox

Для створення незалежних прапорів у формах HTML використовується тег <INPUT> зі значенням атрибута TYPE = checkbox. Залежно від змісту форми користувач може відзначити кілька прапорів. Коли форма використовує тег <INPUT> зі значенням атрибута CHECKBOX, в ньому повинні бути присутніми і атрибути NAME, і VALUE. Атрибут NAMEвказує на найменування даного поля (прапора) введення. В атрибуті VALUE буде міститися значення поля.

<BR> Росія <INPUT NAME = "Країна" TYPE = checkbox

VALUE = "Росія">

Країни СНД <INPUT NAME = "Країна" TYPE = checkbox

VALUE = "СНД">

У деяких випадках необхідно ініціалізувати даний прапор, як уже відзначений. У таких випадках тег <INPUT> повинен містити атрибут CHECKED.

3. Атрибут TYPE = radio

У деяких випадках потрібно організувати вибір одного з кількох можливих значень. Для створення форми введення при виборі користувачем одного значення з кількох можливих необхідно використовувати тег <INPUT> з атрибутом TYPE = radio. Коли в формі застосовується даний атрибут, в теге <INPUT> повинні бути вказані атрибути NAME іVALUE. Атрибут NAME вказує найменування відповідного поля (кнопки). Атрибут VALUE містить значення поля.

<BR> Стать чоловіча <INPUT NAME = "Пол" TYPE = radio

VALUE = "Чоловічий">

Пол жіночий <INPUT NAME = "Пол" TYPE = radio

VALUE = "Жіночий">

4. Атрибут TYPE = image

В залежності від вмісту форми може трапитися так, що користувачеві буде потрібно клацнути мишею на зображенні, щоб завершити роботу з формою. Для цього програмісти використовують тег <INPUT> з атрибутом TYPE = image. Коли користувач клацає мишею по зображенню, браузер зберігає координати відповідної точки екрана. Далі він "обробляє" введену в форму інформацію. Коли форма використовує атрибут image, тег <INPUT> повинен містити також атрибути NAME і SRC. NAME вказує найменування поля введення форми. Атрибут SRC містить URI файлу - джерела зображення. Атрибут ALIGN є додатковим і використовується аналогічно тому ж атрибуту тега <IMG>.

<BR> Виберіть точку <INPUT TYPE = image NAME = point

SRC = image.gif>

5. Атрибут TYPE = password

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

<BR> Підпис <INPUT NAME=login> Пароль

<INPUT TYPE=password NAME="Слово">

6. Атрибут TYPE = reset

Коли користувач заповнює форму, йому може знадобитися почати все спочатку. На такий випадок існує кнопка Reset, у якій користувач може клацнути мишею, щоб повернутися до первинних значень полів. Коли користувач вибирає дану кнопку, форма відновлює початкові значення всіх елементів, в яких присутній атрибут TYPE = reset.Для створення кнопки Reset використовується тег <INPUT> з атрибутом TYPE = reset. Браузер в свою чергу буде виводити зображення даної кнопки. Якщо у формівикористовується атрибут reset, тег <INPUT> може додатково містити атрибут VALUE. Даний атрибут визначає напис на зображенні кнопки.

<INPUT TYPE=reset VALUE="Стерти форму">

7. Атрибут TYPE = submit

Використовуючи форму HTML для введення інформації від користувача, необхідно забезпечити користувачеві можливість завершити введення даних. Для цього використовується тег <INPUT> з атрибутом TYPE = submit. Браузер, у свою чергу, виводить даний елемент, як кнопку, у якій користувач може клацнути, щоб завершити процес редагування. Коли у формі використовується тег <INPUT> з атрибутом submit, даний елемент може містити два додаткових атрибути: NAME і VALUE. Атрибут NAMEзберігає назву змінної поля у вашій формі. Атрибут VALUE - визначає значення елемента форми, яке буде відправлено на сервер або отримано за допомогою клієнтських скриптів.

<BR> <INPUT TYPE = submit

VALUE = "Надіслати повідомлення">

8. Атрибут TYPE = hidden

Приховані поля. Додавання в тег INPUT атрибуту TYPE = hidden дозволить включити в  форму для выдправки значення атрибутів NAME і VALUE, які користувач змінити не може.Такі мітки корисні при наявності декількох форм для подальшої обробки даних.

4. Створення багаторядкових областей введення тексту - тег <TEXTAREA>

В залежності від типу форми може знадобитися організувати введення великої кількості тексту. У таких випадках використовується тег <TEXTAREA> для створення текстового поля з кількох рядків. Даний тег використовує три атрибути: COLS, NAME і ROWS.