Створення екранних форм

Для виконання завдань з СРС опрацювати теоретичний матеріал та практичну частину.

Теоретична частина

Форми - це окремий об’єкт html-сторінок, який має своє ім’я та є найбільше дійовим елементом web-сторінок. Завдяки формам веб-сторінки набувають| інтерактивності та функціональності.

Проектування форм.

Основними елементами форми являються:|з'являються,являються|

-- Поля - призначені для введення даних користувачем;

-- Кнопки - для виконання певних дій.

У|в,біля| дескрипторі кожного|шкіряного| поля (<input type=”тип поля”>)необхідно вказувати| його| і`мя (значення| атрибуту name). Для створення форми використовується тег <form>. Він виступає в якості контейнера для усіх інших тегів, які описують елементи управління форми – кнопки, поля введення, списки, перемикачі, прапорці та ін. Код будь-якої форми| повинен міститися між парою дескрипторів <form> </form>.

Основні HTML-теги для створення елементів |створіння| форми :

• INPUT – для додавання|добавки| елементів введення;

• SELECT – для створення|створіння| списків вибору з|із| обмеженої кількості елементів;

• OPTIONS – створення|створіння| елементів у середині списків SELECT;

• TEXТAREA – створює багаторядкове текстове поле.

Основні елементи форми можна переглянути на малюнку1.

Мал.1

Після створення| і заповнення| форми| необхідно вказати| броузеру| куди| відсилаються дані форми|, якщо натиснути| на кнопку «Отправить».

1-ше, можливо| настроїти броузер| на відправку введеної користувачем| у форму інформації назад, на сервер, де| вона| буде| оброблена| програмою-сценарієм CGI. Поля в HTML-формах і введені|запроваджені| в них дані повинні відповідати тому типу інформації, який повинен одержати|отримати| CGI-сценарій.

2-ге, можливо| відіслати дані з форми| на ваш e-mail.

Базова конструкція форми в html виглядає так:

<FORM> початок форми

<INPUT> запрошує інформацію одним або декількома способами

<INPUT> створює поле форми (кнопку, поле введення и т.ін.), ви можете

ввести декілька полів

</FORM> кінець форми

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

1. FORM – тег створення форми, парний.

< FORM > .....</ FORM>

Атрибути: існує два обов’язкових атрибута: method і action.

– method – спосіб, який визначає метод передачі даних форми.

Методів є два: get – дані розміщуються в URL. Метод get має дві переваги і один величезний недолік|нестача|. Перевага|: серверу передається мінімальний об'єм|обсяг| даних, які дуже просто обробити. Недолік: оскільки інтернет-адреса не може бути довше 256 символів неможливо переслати скільки-небудь значний об'єм|обсяг| даних|. post - дані розміщуються в HTTP-запиті, застосовується коли одержані|отримані| з|із| форми дані необхідно спочатку обробити, наприклад, перевірити правильність заповнення форми. Метод post ідеальний для великих реєстраційних форм, дошок оголошень, взагалі для пересилки великих текстів і файлів на сервер.

– action – визначає URL тієї програми - сценарію на сервері, якій належить обробляти дані форми або адреса електронної пошти.

Для того, щоб відіслати дані з форми на e-mail, треба ввести в тег <FORM> наступні атрибути:

<form action=mailto:учетная запись @ провайдер.com method=”post”>

що ви можете тут змінити — це адресу електронної пошти на свою.

- name – атрибут задає ім'я форми, його можна опустити, якщо на сторінці всього одна форма, якщо їх декілька, то всім формам необхідно задати імена, наприклад: name = " form1"

Поля форми.

1. Текстові поля (text)- можуть бути 1- рядковими і багаторядковими.

2. Перемикачі (Radio Buttons) дозволяють вибрати один з декількох запропонованих варіантів;

3. Прапорці (Checkboxes) - дозволяють вибрати будь-який набір значень (декілька) з числа представлених|уявлених|.

4. Списки введення або вибору, що розкриваються - перший дозволяє вибрати елемент з|із| безлічі значень, представленої|уявленої| у вигляді списку. Другий, дозволяє не тільки|не лише| вибрати значення із|із| списку, але і ввести|запровадити| нові.

5. Вибір файлу - (File select) - поле дозволяє вибрати і передати на Web - сервер деякий файл.

6. Кнопки (Buttons). За допомогою кнопок може бути додана |добавлена| нова

функціональність. По клацанню |натисненню,щиглю| на кнопці виконується задана дія:

очищуються поля форми або її вміст відправляється |вирушає| на обробку.

2. < INPUT> - тег| створення і визначення типу|створіння| полів форми, непарний.

Атрибути використовуються для створення|створіння| елементів поля форми:

name - визначає ім'я поля, використовуване для передачі змісту|вмісту,утримання| даної форми на

сервер і застосовується для ідентифікації поля;

type - визначає тип елементу форми.

Основний варіант синтаксиса дескриптора <INPUT>:

<INPUT name="ім’я поля" type="тип поля" value="значення поля size=”ширина поля”>

Формат тега у загальному вигляді:

<INPUT TYPE="button | checkbox | file | hidden | image | password | radio| reset| ====>submit|text"

[ALIGN="left | right | top | texttop | middle | bottom |====>bottom" ]

[checked] [maxlength="{Максимальна кількість символів}"]

[SIZE="{Розмір поля введення}"] [SRC="{Aдpecа файлу малюнка}"]

Ключове слово INPUT завжди вказується першим, інші атрибути можуть вказуватися у будь якій послідовності, через пробіл.

Поля типу: Text, Password тегу INPUT

Типи полів:

Найбільш розповсюджений тип (type) елементів тегу INPUT – текстовий.