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

Форми — це фрагменти HTML-документа, що “відповідають” за введення інформації клієнтом. За допомогою HTML можна створювати як прості форми (пропонується вибрати одну або декілька відповідей), так і складні (для тестів, замовлень тощо). Форми розміщуються у контейнері <FORM>…</FORM>. Даний тег повинен містити атрибут ACTION, який вказує на адресу серверного з¢єднання та є обов¢язковим. Найпростіша форма має таку структуру:

<form action="адреса серверного сценарію">

....Різні елементи форми (серед них обов¢язково присутній SUBMIT).....

</form>

Елемент INPUT створює поле форми (кнопку, поле вводу, чекбокс тощо), він повинен розміщуватися всередині елемента FORM. Всі елементи форм створюються тегами, що мають початок: <input type=¢¢…¢¢>, де виставляється значення атрибута TYPE і визначається тип елемента. Можливі такі значення цього атрибута:

TEXT (текстове поле) — створює поле вводу для одного рядка тексту;

<input type=¢¢text¢¢ name=¢¢ім¢я поля¢¢ valur=¢¢початковий текст¢¢ align=¢¢LEFT¢¢ size=¢¢число символів¢¢ maxlength=¢¢максимальне число символів¢¢>

Наприклад:

<INPUT NAME = "FIO" VALUE=" Іванов Іван Іванович " ALIGN="CENTER" SIZE="23" MAXLENGTH="30">

TEXTAREA(текстова область) — створює поле для вводу декількох рядків тексту. Цей елемент повинен розміщуватися всередині блоку FORM.

<textarea name="ім¢я" cols="число стовпців" rows="число строчок" wrap="спосіб переносу строчок"> текст, розміщений у текстовій області </textarea>

Наприклад:

<FORM>

<TEXTAREA NAME="address" WRAP="virtual" COLS="40" ROWS="3">

Ваша адреса...

</TEXTAREA>

</FORM>

SELECT (поле списку) — дозволяє створити вибір одного пункту або багатьох пунктів із заданого списку. При цьому елемент OPTION описує окремі пункти меню. Структура HTML- коду, що визначає поле списку, така:

<select name="ім¢я списку" size="число видимих опцій" multiple>
<option value="значення" selected>текст
<option value="значення">текст
...... і так далі......
<option value="значення">текст
<option value="значення">текст
</select>

Наприклад:

<select name="week" size="7">

<option value="1">Понеділок</option>

<option value="2">Вівторок</option>

<option value="3">Середа</option>

<option value="4">Четвер</option>

<option value="5">П¢ятниця</option>

<option value="6">Субота</option>

<option value="7">Неділя</option>

</select>

CHECKBOX (прапорець) — створює поле вводу для типу Boolean (так/ні)

<input type="Checkbox" name="ім¢я прапорця" value="значення" checked> текст, який, як правило, розміщують поряд із прапорцем

Наприклад:

Вкажіть Ваші навички: <BR>

<input type="checkbox" name="skill" value="1" checked>HTML<BR>

<input type="checkbox" name="skill" value="2">JavaScript<BR>

<input type="checkbox" name="skill" value="3">Perl<BR>

<input type="checkbox" name="skill" value="4">XML<BR>

<input type="checkbox" name="skill" value="5">FLASH<BR>

RADIOBUTTON (радіокнопка) — створює поле вводу для атрибутів, що приймають значення одне із декількох можливих. Радіокнопка створюється за допомогою коду:

<input type="radio" name="ім¢я радіокнопки" value="значення" checked> текст, який, як правило, розміщують поряд із радіокнопкою

Часто використовують декілька радіокнопок, наприклад:

Вкажіть Ваші навички: <BR>

<input type="radio" name="skill" value="1" checked>HTML<BR>

<input type="radio" name="skill" value="2">JavaScript<BR>

<input type="radio" name="skill" value="3">Perl<BR>

<input type="radio" name="skill" value="4">XML<BR>

<input type="radio" name="skill" value="5">FLASH<BR>

BUTTON (кнопка) — створення кнопок. Код має такий вигляд:

<input type="submit" name=" ім¢я кнопки" value=" надпис на кнопці ">

Наприклад:

<input type="submit" name="subm" value=" Відправити дані ">

Щоб передбачити можливість скидання усіх введених користувачем даних, використовується кнопка reset.

Наприклад:

<INPUT NAME = "FIO" VALUE=" Іванов Іван Іванович " ALIGN="CENTER" SIZE="23" MAXLENGTH="30">

<BR>

<TEXTAREA NAME="address" WRAP="virtual" COLS="30" ROWS="3">

Ваша адреса...

</TEXTAREA>

<BR>

<input type="reset" name="name" value=" ВІДМІНИТИ ВВЕДЕННЯ">

Поряд із кнопками submit та reset використовуються ¢¢звичайні¢¢ кнопки, з якими пов¢язують ту чи іншу дію:

<input type="button" name="ім¢я кнопки" value=" надпис на кнопці" onclick="дія, що пов¢язана з кнопкою ">

Наприклад:

<input type="button" value=" Показати сьогоднішнє число" onclick="alert(Date());">

PASSWORD (приховування змісту тексту) – створює поле вводу для одного рядка тексту, однак текст відображається у вигляді знака ¢¢*¢¢:

<input type="password" value=" значення за замовчуванням" size=" довжина поля (у символах)" maxlength=" максимальна допустима кількість введених символів ">

Наприклад:

<input type="password" value="123456" size="6" maxlength="8">

FILE (прикріплення файлів) — дозволяє користувачу прикріпити файл і відправити його на сервер разом із змістом текстових полів та інших елементів форми. Багато існує сайтів, де передбачено реєстрацію користувачів, а також відправку фото, текстових файлів із резюме, файлів із текстами статей та ін.

<input type="file" name="ім¢я елемента" size=" довжина адресного поля у символах" accept=" допустимий тип файла ">

Наприклад:

<input type=¢¢file¢¢ size=¢¢50¢¢ >

Завдання 1. Створити форму.

<HTML>

<HEAD>

<TITLE>Навчальний файл HTML</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</HEAD>

<BODY>

<form method="post" action="mailto:kis@ngasu.nsk.su?subject=Information">

<pre>Ваше ім¢я: <input name="name" type="text" maxlength="40" size="40" value="">

Ваша стать: <input type="radio" name="pol" value="male">Чоловіча

<input type="radio" name="pol" value="female">Жіноча

На якому курсі Ви навчаєтесь? <select name="curs" size="1">

<option value="1" selected> Перший </option>

<option value="2">Другий</option>

<option value="3">Третій</option>

<option value="4">Четвертий</option>

<option value="5">П¢ятий </option>

</select>

Які мови програмування Ви знаєте?

<input type="checkbox" name="pascal" value="yes" checked> Паскаль

<input type="checkbox" name="c" value="yes">Сі

<input type="checkbox" name="asm" value="yes"> Асемблер

Напишіть декілька слів про себе: </pre>

<textarea name="about" rows="6" cols="60" wrap="off"></textarea>

<p><input type="submit" value=" Відіслати дані ">

<input type="reset" value=" Очистити форму ">

</form>

</BODY>

</HTML>