![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Створення і використання форм
Форми — це фрагменти 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> Наприклад: < 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>
|