3 Форми

Форма - це інструмент, за допомогою якого HTML-документ може відправити інформацію замовнику. Відвідувачі сайту можуть уводити коментарі, робити замовлення, повідомляти контактну інформацію, або інші дані. Потім ця інформація автоматично передається замовнику (а якщо говорити точніше, сценарію CGI на сервері, або JavaScript, які відправляють інформацію із форми). Форма складається з елементів, які знаходяться між тегами <Form> і </Form>. Елемент Form має атрибути: Name - визначає ім'я форми, унікальне для даного документа. Використається, якщо в документі присутні декілька форм. Action - обов'язковий параметр. Визначає URL, по якому буде відправлений зміст форми. Це може бути або адреса електронної пошти, або шлях до скрипту сервера, що обслуговує дану форму. Method - визначає спосіб відправлення вмісту форми. Можливі значення GET (за замовчуванням) і POST. Хоча спосіб GET прийнятий значенням за замовчуванням, у більшості випадків розроблювачі користуються протоколом POST, що дозволяє передавати більші обсяги даних. Enctype - визначає спосіб кодування вмісту форми при відправленні. Target - визначає ім'я вікна, у яке повертається повідомлення про результат обробки відправленої форми. Можливі значення : _self, _parent, _top, _blank або явно зазначене ім'я вікна. Приклад:

<Form method="get" action="http://site.ru/cgi-bin/form.pl" name="form1" target="_blank">      елементи форми </Form>

Або для відправлення по електронній пошті;

<Form method="get" action="mailto:info@site.ua" name="form1" target="_blank"> елементи форми </Form>

В межах тега <Form> </Form> можна використовувати будь які теги HTML. Але існують деякі елементи, які можуть з'явитися тільки в межах тега FORM. Зокрема: INPUT - текстове однорядкове поле, поле пароля, перемикачі, радіокнопки, кнопки установки й перезавантаження, сховані поля, кнопки завантаження файлу, кнопки зображень і т.д. SELECT - меню одиничного або множинного вибору; TEXTAREA – багаторядковий текстовий блок. Розглянемо по черзі ці елементи. Елемент TEXTAREA створює багаторядковий текстовий блок, має атрибути:

Атрибут Name.

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

Атрибут Rows.

Визначає кількість рядків тексту, видимих на екрані. .

Атрибут Cols .

Визначає ширину текстового поля - у друкованих символах.

Атрибут Wrap.

Визначає спосіб переносу слів. Можливі значення:

Off (значення за замовчуванням, перенос слів не відбувається), Virtual -з даним значенням перенос слів тільки відображається, на сервер же надходить неподільний рядок, Physica - перенос відбувається скрізь.

Атрибут Readonly.

Даний атрибут указує на те, що в даному полі заборонена зміна вмісту форми, тобто дане поле призначене тільки для читання. Записується так: <FORM> <TEXTAREA NAME="readonly_text" WRAP="virtual" COLS="40" ROWS="3" readonly> Спробуйте змінити вміст даного поля. </TEXTAREA> </FORM>

Атрибут Disabled.

Данный атрибут указує на те, що дане поле є неактивним і в ньому також заборонене зміна вмісту форми.

Елемент SELECT. Елемент створює в заповнюваній формі меню типу "Вибір одного пункту з багатьох" або "Вибір декількох пунктів з багатьох". Повинен розташовуватися усередині елемента "Form" і мати як початковий, так і кінцевий тэги. Містить кілька елементів Option. Має атрибути;

Атрибут Multiple.

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

Атрибут Name.

Визначає ім'я меню, унікальне для даної форми, що буде використовуватись при передачі даних на сервер. Значення (value) формується елементом "Option".

Атрибут Size.

Визначає кількість видимих пунктів у меню. Якщо значення цього параметра більше одиниці, то результатом буде список пунктів

Елемент Option.

Використається тільки з елементом SELECT. Елемент OPTION описує окремі пункти меню. Кінцевий тег не обов’язковий. Має атрибути;

Selected.

Визначає пункт меню, що буде обраний при завантаженні документа. Якщо меню має тип "один з багатьох", то прапором "Selected" може бути позначений лише один пунктів меню.

Value.

Задає даному пункту значення, що буде використано поряд з іншими відомостями про вміст заповненої форми. При наданні інформації на сервер це значення буде об'єднано зі значенням параметра "Name" в елементі "Select".

Повністю елемент "Select" записується так; <form action="Url сценарію" method="get" name="select"> <select name="menu" size="1"> <option selected value="1">Перший пункт <option value="2">Другий пункт <option value="3">Третій пункт <option value="4">Четвертий пункт </select> </form>

Або; <form action="Url сценарію" method="get" name="select"> <select multiple name="menu" size="3"> <option selected value="1">Перший пункт <option value="2">Другий пункт <option value="3">Третій пункт <option value="4">Четвертий пункт </select>

Елемент INPUT. Цей елемент створює поле форми (кнопку, поле уведення, чекбокс і т.п.), зміст якого може бути змінено або активізовано користувачем. Елемент не має кінцевого тэга Має атрибути;

Атрибут Name. Визначає ім'я елемента, унікальне для даної форми.

Атрибут Type.

Визначає тип поля для уведення даних. За замовчуванням - це "text". Можливі значення

Text. Створює однорядкове текстове поле. Як правило використається разом з параметрами "Size" і "Maxlength". Записується так; <form action="Url сценарію " method="get"> <input name="e-mail" type="text" size="20" maxlength="15" value="Уведіть E-mail"> </form>

File. Дає можливість користувачеві прилучити файл до поточної форми. Можливе використання разом з параметром "Accept". Записується так; <form action="Url сценарію " method="get"> <input name="file" type="file" size="20" > </form> Checkbox. Створює поле уведення для атрибутів типу Boolean ("так"/"ні") або для атрибутів, які можуть одночасно приймати кілька значень. Ці атрибути являють собою кілька полів "Checkbox", які можуть мати однакові імена. Кожне обране поле "Checkbox" створює окрему пару name/value в інформації, що надсилається на сервер, навіть якщо результатом будуть імена, що дублюються. Поле типу "Checkbox" обов'язково повинне

мати параметри "Name" і "Value", а також необов'язковий атрибут "Checked", що вказує на те, що поле активізоване. Записується так; <form action="Url сценарію " method="get"> <input name="get_news" type="checkbox" value="yes" checked> Хочу одержувати E-mail розсилання<br> <input name="public" type="checkbox" value="yes"> Зробити мій E-mail доступним для всіх </form> Radio. Створює поле уведення для атрибутів, які приймають одне значення з декількох можливих. Всі кнопки (radio buttons) у групі повинні мати однакові імена, але тільки обрана кнопка в групі створює пари name/value, що буде надіслана на сервер. Як і для полів "Checkbox", атрибут "Checked" необов'язковий; він може бути використаний для визначення виділеної кнопки в групі кнопок (radio button). Записується так; <form action="Url сценарію " method="get"> Я живу<br> <input name="citi" type="radio" value="Moscow" checked> у Запоріжжі<br> <input name="citi" type="radio" value="Paris"> у Парижі<br> <input name="citi" type="radio" value="other"> в В іншому місті<br> </form> Submit. Створює кнопку, при натисканні якої інформація з форми надсилається на сервер. Параметр "Value" у цьому випадку змінює напис на кнопці. Записується так; <form action="Url сценарію " method="get"> <input name="some_name" type="submit" value="Відправити">

Password. Створює поле уведення під один рядок, однак текст, що вводить користувачем, відображається у вигляді значків "*". Записується так; <form action="" method="get"> <input name="psswd" type="password" size="20" maxlength="15"> </form>

Image. Багато в чому схожий на кнопку "Submit", тільки в якості кнопки використається зображення

Reset. Cоздает кнопку, що перезавантажує поля форми до їхніх первісних значень, тобто очищає поле уведення якщо користувач уже що те ввів.Напис на кнопці може бути змінена за допомогою параметра "Value". За замовчуванням напис на кнопці залежить від браузера. Записується так; <form action="" method="get"> <textarea name="proba" cols="26" rows="5"> </textarea> <input name="res" type="reset" value="Очистити"> </form> Hidden.. Поля цього типу не відображаються на екрані монітора, що дозволяє розмістити "секретну" інформацію в межах форми. Зміст цього поля надсилається на сервер у вигляді name/value разом з іншою інформацією форми. Цей тип може бути використаний для передачі інформації про взаємодію клієнт/сервер.

Button. Дозволяє створити кнопку в HTML документі, що викликає функції при використанні Visual Basic Script або Java Script. Параметр "Name" дозволяє задати ім'я даній кнопці, яке може бути використане для якої-небудь функції в скрипті. Параметр "Value" дозволяє задати текст, що буде відображений на кнопці в документі. Записується так; <form name="msg"> <input name="alert1" type="button" value="Запит" onClick="javascript:cliCk()" > </form>

Атрибут Value.

Задає текстовий заголовок для полів будь-якого типу, у тому числі й кнопок. Для типів, що мають значення виду Boolean, таких як "checkbox" або "radio", буде повернуте значення, задане в параметрі "Value".

Атрибут Checked

Указує, що поля типів "checkbox" і/або "radio" (див. вище параметр "Type") активізовані.

Атрибут Size.

Визначає розмір поля в символах. Наприклад, щоб визначити поле з видимою шириною в 24 символу, треба вказати size="24".

Атрибут Maxlength.

Визначає максимальна кількість символів, які можна ввести в текстовому полі. Воно може бути більше, ніж кількість символів, зазначених у параметрі "Size", у цьому випадку поле буде прокручуватися (scroll). За замовчуванням кількість символів не обмежено.

Атрибут Src.

Задає URL-адресу картинки, використовуваної при створенні графічної кнопки, що ініціює передачу даних. Використовується разом з параметром type="image".

Атрибут Align.

визначає спосіб вертикального вирівнювання для зображень. Використовується разом з параметром type="image". Повністю аналогічний параметру "Align" елемента "Img". За замовчуванням має значення "bottom".

Як приклад, розглянемо форму (Рис. 1). Для надійності позиціювання елементи форми розміщені в таблиці. Звісно, це робити не обов’язково.

Ім'я:
Тема:
Повідомлення:

Рисунок 3.1 - Зовнішній вид форми

Далі наведено HTML код форми:

<FORM NAME="mailer" METHOD="post" ACTION="" ENCTYPE="text/plain" onSubmit="(document.mailer.action += mailtoandSubject)"> <table border=2 align=center cellspacing=1 cellpadding=2 BgColor=#000FFF> <tr><td><FONT size="2" color="#FFFFFF">Ім'я:</font></td> <td><INPUT TYPE="text" NAME="Name" size="24" onChange="msg(this.form)"></td></tr> <tr><td><FONT size="2" color="#FFFFFF">Тема:</font></td> <td><INPUT TYPE="text" NAME="Subject" size="24" onChange="msg(this.form)"></td></tr> <tr><td><FONT size="2" color="#FFFFFF">Повідомлення:</font></td> <td><TEXTAREA NAME="Message" COLS=40 ROWS=6 onChange="msg(this.form)"></TEXTAREA></td></tr> <tr><td colspan=2 align=center><INPUT TYPE = "submit" VALUE = "Отправить" ONCLICK="return checkIt()"> <INPUT TYPE=reset VALUE=" Сброс "></td></tr></table> </FORM>

Наступна програма буде перевіряти, чи заповнив користувач всі поля й відправляти форму:

<SCRIPT LANGUAGE="JavaScript"> function checkIt() { // функція перевірки полів форми //----------- if (document.forms.mailer.Name.value != "") { // функція перевірки поля Name } else { alert("\nОбласть \"Ім'я\" у формі. \n\nУведіть своє ім'я.");

//-- виводить, якщо поле Name не заповнене document.forms.mailer.Name.focus(); //повертає курсор на поле Name return false; } //----------- if (document.forms.mailer.Subject.value != "") { // функція перевірки поля Subject } else { alert("\nОбласть \"Тема\" у формі. \n\nУведіть тему."); // виводить, якщо поле Subject не заповнене document.forms.mailer.Subject.focus(); // --повертає курсор на поле Subject return false; } //----------- if (document.forms.mailer.Message.value != "") { // функція перевірки поля Message return true; //ВСЕ ВІДПРАВЛЕНО } else { alert("\nОбласть \"Повідомлення\" у формі. \n\nНапишіть повідомлення."); //-- виводить, якщо поле Message не заповнене document.forms.mailer.Message.focus(); //-- повертає курсор на поле Message return false; } //----------- } function msg() { //-- функція відправлення document.mailer.action = "mailto:Ваша@пошта.ua" mailtoandSubject = (('?Subject=' + document.mailer.Subject.value) + '&Body=' + document.mailer.Message.value); } </SCRIPT>

В даному прикладі мова скрипта JavaScript. Для відправки форми можна використовувати скрипти і на інших мовах.