Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
2
PAGE 17
EMBED PBrush
EMBED PBrush
EMBED PBrush
EMBED PBrush
EMBED PBrush
EMBED PBrush
EMBED PBrush
EMBED PBrush
EMBED PBrush
EMBED PBrush
EMBED PBrush
Лабораторна робота №2 “Створення форм”
Ціль. Створення Web сторінки з використанням форм, робота з зображеннями, простий пошук.
1. FORM (ФОРМА) - заповнювана форма
Для того щоб представити заповнювану форму, використовувану для таких дій користувача, як реєстрація, упорядкування користувача чи формування запиту служать саме форми HTML. Форми можуть містити широкий діапазон прийомів розмітки HTML, включаючи такі види полей форм, як однорядкові чи багатострокові текстові поля, групи радіокнопок, перемикачі й меню. Для створення форм Вам знадобляться теги FORM і його атрибути INPUT, TEXTAREA і SELECT
Основний синтаксис форми виглядає в такий спосіб:
<FORM ACTION="URL">
зміст форми, включаючи елементи INPUT і, можливо, елементи TEXTAREA і SELECT
</FORM>
Можливі атрибути
|
ім'я атрибута |
можливі значення |
зміст атрибута |
|
ACTION |
URL |
адреса сервера, що використовує форма |
|
METHOD |
GET, POST |
метод передачі даних, отриманих від користувача, на сервер |
|
ENCTYPE |
рядок |
механізм, який використовується для кодування змісту форми |
Є деякі елементи, що можуть з'явитися тільки в межах елемента FORM. Зокрема:
INPUT
текстове однострокове поле, поля пароля, перемикачі, радіокнопки, кнопки установки й перезавантаження, сховані поля, кнопки вивантаження файлу, кнопки зображень і т.д.
SELECT
меню одиничного чи множинного вибору
TEXTAREA
багатострокове текстове поле.
1.1. INPUT - поля введення у формах
Ціль
Специфікувати у межах форми вступного поля: однострокові текстові поля, поля пароля, перемикачі, радіокнопки, кнопки відсилання і перезавантаження, сховані поля, кнопки зображення і т.д.
Основний синтаксис
<INPUT TYPE=тип_поля_введення інші_атрибути>
Можливі атрибути
|
ім'я атрибута |
можливі значення |
зміст |
|
TYPE |
TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, FILE, HIDDEN, IMAGE |
тип поля для введення |
|
NAME |
рядок |
ім'я для ідентифікації поля, коли його вміст передається серверу |
|
VALUE |
рядок |
первісне значення вступного поля; для атрибутів SUBMIT чи RESET - текстова мітка |
|
CHECKED |
установлений |
коли TYPE = RADIO чи CHECKBOX, ініціалізує поле до встановленого стану |
|
SIZE |
ціле |
відимий розмір поля; кількість символів |
|
MAXLENGTH |
ціле |
максимальна кількість символів, дозволених у текстовому полі |
|
SRC |
URL |
адреса зображення |
|
ALIGN |
TOP, MIDDLE, BOTTOM, LEFT, RIGHT |
вирівнювання зображення для графічних керуючих кнопок |
1.1.1. TYPE=TEXT (тип=текст - за замовчуванням)
Однострокове текстове поле, чий видимий розмір може бути встановлений атрибутом SIZE, наприклад, SIZE=40 для 40-символьного поля. Користувачі можуть вводити і більше символів, чим ця межа, але з текстовим скролінгом (пролистуванням) поля, щоб курсор уведення залишався видимим. Ви можете задати верхню межу кількості символів атрибутом MAXLENGTH. Атрибут NAME використовується для найменування поля, а атрибут VALUE ініціалізує текстовий рядок в полі, коли документ уперше завантажений.
Помітимо, що текстове введення обмежене одним рядком. Використовуйте елемент TEXTAREA, щоб визначити багатострокові текстові поля.
Приклад:
<INPUT TYPE=TEXT SIZE=40 NAME= користувальницьке value="Ваше ім'я">
Рис. 2.1. Відображення поля
1.1.2. TYPE=PASSWORD (тип=пароль)
Цей тип подібний TYPE=TEXT, однак усі символи, що вводяться, представляються у виді *, щоб сховати текст від очей, що підглядають, коли вводиться пароль. Ви можете використовувати атрибути SIZE і MAXLENGTH, щоб керувати видимою і максимальною довжинами поля точно так само, як для звичайного текстового поля.
Приклад:
<INPUT TYPE=PASSWORD SIZE=12 NAME=pw>
Рис.2.2. Відображення введення пароля
1.1.3. TYPE=CHECKBOX (тип=поле установки - перемикач)
Використовується для простих булевих атрибутів (тобто атрибутів, що приймають значення ІСТИНА чи НЕПРАВДА) чи для атрибутів, що одночасно можуть приймати безліч значень. Кожне заповнене перемикальне поле генерує окрему пару ім'я/значення у формованих даних, навіть якщо це приводить до дублювання імен. Використовуйте атрибут CHECKED для ініціалізації поля установки за замовчуванням.
Приклад:
<INPUT TYPE=CHECKBOX CHECKED NAME=xyz VALUE=yes>
Рис. 2.3. Перемикач
1.1.4. TYPE=RADIO (тип=радиокнопка)
Використовується для атрибута, що може приймати єдине значення з безлічі. Кожне поле радіокнопки в групі повинне бути задано тільки одним значенням атрибута NAME. Радіокнопки вимагають явного атрибута VALUE. Єдина натиснута радіокнопка в групі генерує парі ім'я/значення у формованих даних. Одна радіокнопка в групі з атрибутом CHECKED повинна бути попередньо встановлена за замовчуванням.
Приклад:
<INPUT TYPE=RADIO NAME=age VALUE="0-12">
<INPUT TYPE=RADIO NAME=age VALUE="13-17">
<INPUT TYPE=RADIO NAME=age VALUE="18-25">
<INPUT TYPE=RADIO NAME=age VALUE="26-35" CHECKED>
<INPUT TYPE=RADIO NAME=age VALUE="36-">
Рис. 2.4. Група перемикачів
1.1.5. TYPE=SUBMIT (тип=відсилання)
Визначає кнопку, що користувач може натиснути, щоб передати зміст форми серверу. Мітка встановлюється атрибутом VALUE. Якщо атрибут NAME задано, то пара найменування/значення для кнопки, що виконується, буде включена в передані дані. Ви можете включити кнопки, що виконуються у формі. Дивіться TYPE=IMAGE для графічних кнопок.
Приклади:
<INPUT TYPE=SUBMIT VALUE="Посилка">
Рис.2.5. Посилка
1.1.6. TYPE=RESET (тип=перезавантаження)
Визначає кнопку, що користувач може натиснути, щоб повернути поля форми до вихідного стану, коли документ був уперше завантажений. Ви можете установити мітку за допомогою атрибута VALUE. Кнопки перезавантаження ніколи не посилаються як частина змісту форми.
Приклад:
<INPUT TYPE=RESET VALUE="Start over...">
1.1.7. TYPE=FILE (тип=файл)
Цей тип дає можливість користувачам прикріпити файл до змісту форми. Елемент звичайно відображається, як текстове поле з кнопкою, при натисканні на який з'являється файловий броузер для добору імені файлу. Ім'я файлу також може бути введене прямо в текстове поле. /7/
У такий же спосіб, як для TYPE=TEXT, для TYPE=FILE можна використовувати атрибут SIZE, щоб установити видиму ширину поля. Ви також можете установити верхню межу для довжини імені файлу, використовуючи атрибут MAXLENGTH. Деякі програми перегляду підтримують здатність обмежувати види файлів, що можуть бути прикріплені до форми, перерахуванням поділюваного комами списку файлів із змістом типу MIME, який задається атрибутом ACCEPT. Наприклад, ACCEPT="image/*" обмежить файли зображеннями.
Приклад:
<INPUT TYPE=FILE NAME=photo SIZE=20>
Рис. 2.6.Добір імені файлу
1.1.8. TYPE=HIDDEN (тип=схований)
Цей тип поля не відображається користувачу. Сховане поле дає можливість для серверів зберігати інформацію про стан разом з формою. Коли форма "виповнюється" при натисканні відповідної кнопки, серверу буде передана пара ім'я/значення, визначена з використанням відповідних атрибутів. Цей тип створює робоче оточення для повноти можливостей HTTP і є альтернативою для використання так називаної HTTP cookies.
Приклад:
<INPUT TYPE=HIDDEN NAME=customerid VALUE="c2415-345-8563">
1.1.9. TYPE=IMAGE
Використовується для графічних кнопок відсилань, які відображаються зображенням. URL для зображень специфікується атрибутом SRC. Вирівнювання зображення може бути специфіковано атрибутом ALIGN. У цьому відношенні графічні кнопки відсилання ідентичні елементам IMG (так, Ви можете установити для ALIGN - LEFT, RIGHT, TOP, MIDDLE чи BOTTOM). Атрибути NAME і VALUE трактуються точно так, як текстові кнопки відсилання, і повинні бути задані для забезпечення роботи неграфічних програм перегляду.
Приклад:
<INPUT TYPE=IMAGE SRC="fg.bmp" VALUE="Малюнок">
1.2. OPTION - елемент вибору в меню
Ціль
Для представлення елемента вибору в меню вибора у межах форми.
Основний синтаксис
<OPTION>текст</OPTION>
Кінцевий тег завжди може бути опущений.
Можливі атрибути
|
ім'я атрибута |
Можливі значення |
зміст |
|
SELECTED |
SELECTED |
задає опцію за замовчуванням |
|
VALUE |
Рядок |
значення властивості використовується, коли серверу передається зміст форми; ця властивість сполучається з властивістю імені, що задається атрибутом NAME із зовнішнього елемента SELECT |
Приклад:
<OPTION>людина</OPTION>
1.3. SELECT (ВИБРАТИ) - меню вибору у формі
Ціль
Специфікація в межах форми: меню, з якого користувач може вибрати один чи кілька елементів
Основний синтаксис
<SELECT NAME=ім'я>
елементи OPTION
</SELECT>
Можливі атрибути
|
ім'я атрибута |
можливі значення |
зміст |
|
NAME |
рядок |
ім'я, що використовується для ідентифікації вибору меню, коли форма передається серверу |
|
SIZE |
ціле |
установлює число водночас видимих опцій |
|
MULTIPLE |
MULTIPLE |
означає, що користувач може зробити множинний вибір з меню |
Приклад:
<SELECT NAME="Кращий">
<OPTION VALUE=a>Петя
<OPTION VALUE=b>Іван
<OPTION VALUE=c>Гена
<OPTION VALUE=d>Дмитрик
</SELECT>
Рис.2.7. Меню вибору
1.4. TEXTAREA – багатострокове поле текстового введення у формі
Ціль
Специфікувати у межах форми області для багатострокового користувальницького введення.
Основний синтаксис
<TEXTAREA NAME=ім'я ROWS=m COLS=n>
текст
</TEXTAREA>
Можливі атрибути
|
ім'я атрибута |
можливі значення |
зміст |
|
NAME |
рядок |
ім'я, що використовується для ідентифікації поля з текстовим змістом, коли форма передається серверу |
|
ROWS |
ціле |
кількість ліній видимого тексту |
|
COLS |
ціле |
число, що задає видиму ширину тексту |
Приклад:
<TEXTAREA NAME=address ROWS=4 COLS=40> Адреси </TEXTAREA>
Рис. 2.8. Адреса
2. Зображення, формули, пошук.
Підтримка зображень у HTML - шлях у світ графіки. Створення і маніпулювання зображеннями, графічними форматами й іншим графічним матеріалом не є частиною HTML. Зокрема, HTML специфікації не повідомляють яких-небудь вимог чи обмежень на графічні формати, які підтримуються Web броузерами.
Нас у першу чергу буде цікавити тег IMG.
2.1. IMG - лінійні зображення
Ціль
Для включення зображення у документ.
Основний синтаксис
<IMG SRC="URL" ALT="текст">
Можливі атрибути
|
ім'я атрибута |
можливі значення |
зміст |
|
SRC |
URL |
адреса зображення |
|
ALT |
рядок |
Текстовий опис зображення |
|
ALIGN |
TOP, MIDDLE, BOTTOM, LEFT, RIGHT |
Позиціонування зображення щодо поточного текстового рядка |
|
HEIGHT |
ціле |
Висота в пикселях |
|
WIDTH |
ціле |
Ширина в пикселях |
|
BORDER |
ціле |
Ширина бордюру (рамки) у пикселях |
|
HSPACE |
ціле |
Ширина незаповненого простору безпосередньо ліворуч і праворуч від зображення в пикселях |
|
VSPACE |
ціле |
Висота незаповненого простору вище і нижче зображення в пикселях |
|
USEMAP |
URL |
Фрагмент ідентифікатора для сайта клієнта з картою образа |
|
ISMAP |
ISMAP |
Показує, що зображення є картою образа, що реагує на натискання клавіші миші |
Значення ALIGN мають наступний сенс:
ALIGN=TOP
Позиціонує верх зображення з верху поточного текстового рядка. Броузери по різному інтерпретують це. Деякі беруть до уваги те, що було на текстовому рядку до зображення й ігнорують, що йде на рядку після нього.
ALIGN=MIDDLE
Вирівнює середину зображення по основному текстовому рядку.
ALIGN=BOTTOM (за замовчуванням)
Вирівнює низ зображення по основному рядку.
ALIGN=LEFT
Переміщає зображення до поточного лівого краю, тимчасово змінюючи цей край так, щоб наступний текст перемістився уздовж правої сторони зображення.
ALIGN=RIGHT
Переміщає зображення до поточного правому краю, тимчасово змінюючи цей край так, щоб наступний текст перемістився уздовж лівої сторони зображення.
Приклад:
<A HREF="з:\cloud.gif">
<IMG HEIGHT="400" WIDTH="400"
SRC="cloud.gif"
ALT="Жах" ISMAP></A>
Рис. 2.9. Завантаження графічного файлу Cloud.gif
2.2. ISINDEX - простий пошук по ключових словах
Ціль
Простий пошук по ключових слов. Броузер повинний сформувати вступне поле однострокового тексту для введення рядка запиту.
Семантика для ISINDEX на сьогоднішній день добре визначена тільки, коли основним URL для всього документа є HTTP URL. Звичайно, коли користувач натискає клавішу "Enter", рядок запиту посилається до сервера, ідентифікованого основним (базовим) URL документом.
Основний синтаксис
<ISINDEX>
Можливі атрибути
|
ім'я атрибута |
можливі значення |
зміст |
|
PROMPT |
рядок |
послання підказки |
Приклади
Приклад демонструє використання ISINDEX для з'єднання зі скриптом "покажчика".
<BASE HREF="http://www.demon.com">
Пошук <a href="http://www.demon.com">адреса</a>.
<ISINDEX PROMPT="Знайти">
Рис.2.10. Основа пошуку
Основний приклад:
<HTML> <HEAD> <TITLE> Основний приклад 2 </TITLE> </HEAD>
<BODY
BGCOLOR=green >
<H1 ALIGN=CENTER>Розробка форм</H1>
<P> <STRONG>Заповните анкету
<FORM ACTION="mailto:demon@rambler.ru" METHOD=POST>
<MENU>
<LI> Введіть ім'я <INPUT TYPE=TEXT SIZE=40 NAME=1>
<LI> Уведіть прізвище <INPUT TYPE=TEXT SIZE=40 NAME=1>
<LI> Рід діяльності<INPUT TYPE=TEXT SIZE=40 NAME=1>
<LI> Освіта <SELECT NAME=обр>
<OPTION>Середнє
<OPTION>Спеціальне
<OPTION>Вище
<OPTION>Магістратура
<OPTION>Аспірантура
</SELECT>
<LI> Чи подобається Вам система освіти
<INPUT TYPE=RADIO NAME=1 VALUE="Так"> Так
<INPUT TYPE=RADIO NAME=1 VALUE="Ні" CHECKED> Ні
<INPUT TYPE=RADIO NAME=1 VALUE="Утрудняюся"> Утрудняюся
<p>
<LI> Напишіть коротко свої пропозиції
<P><TEXTAREA NAME=Comments ROWS=5 COLS=60 ></TEXTAREA>
</MENU>
<HR>
<p>Вкажіть оцінку по п'ятибальній шкалі і відправте авторі на Email:
<SELECT NAME=evaluation>
<OPTION>Один
<OPTION>Два
<OPTION>Три
<OPTION>Чотири
<OPTION>П'ять
</SELECT>
<P>
Ви також можете внести свої коментарі з приводу сторінки опитування
<TEXTAREA NAME=Comments ROWS=5 COLS=72></TEXTAREA> <P>
<INPUT TYPE=SUBMIT VALUE=Відправити><ADDRESS>Demon@Rambler.ru<ADDRESS>
</FORM>
<HR></BODY> </HTML>
Рис.2.11. Основний приклад.