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

Форми — це фрагменти 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=UTF-8" >

< /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>