Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Опрацювання мовою Java Script елементів форм HTML зворотнього зв'язку
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Інститут післядипломної освіти
Факультет:
Не вказано
Кафедра:
Кафедра програмного забезпечення
Інформація про роботу
Рік:
2024
Тип роботи:
Звіт до лабораторної роботи
Предмет:
Інші
Частина тексту файла (без зображень, графіків і формул):
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ "ЛЬВІВСЬКА ПОЛІТЕХНІКА"
ІНСТИТУТ ПІСЛЯДИПЛОМНОЇ ОСВІТИ
КАФЕДРА ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
/
ЗВІТ ДО ЛАБОРАТОРНОЇ РОБОТИ №3 на тему:
"Опрацювання мовою Java Script
елементів форм HTML зворотнього зв'язку"
Мета: Оволодіти засобами керування формами, внесення інформації для сервера на динамічній web-сторінці.
КОРОТКІ ТЕОРЕТИЧНІ ВІДОМОСТІ
1.1. Дані та елементи форм
Використання Internet-форм забезпечує активну участь відвідувача у роботі сайту. Заповнивши форму, користувач може підписатися на додаткову інформацію, покритикувати сайт та ін. Крім того, за допомогою деяких елементів HTML-форм можна розширювати можливості web-сторінок.
За допомогою форми користувачу пропонується представити деяку інформацію, вибравши один варіант з декількох або просто ввівши текст. Після заповнення форми представлена користувачем інформація передається на сервер, де невеликий сценарій сортує її, поповнюючи базу даних. Після завершення цієї операції користувач отримує підтвердження про прийом даних.
Форми починаються та завершуються тегами <FORM>…</FORM>. Між ними вкладено теги <INPUT> та <SELECT>, які створюють елементи форми.
Тепер опишемо атрибути тега <FORM>. Їх є сім. Атрибути, якими ви будете користуватись, визначають функціональні можливості форм.
NAME=”” – При найменуванні форм необхідно пам’ятати наступне: не використовувати пропуски, спеціальні символи, службові слова, які застосовуються у мовах створення сценаріїв.
ACTION=”” – Задається адреса написаного на мові Perl CGI-сценарія, якому форма буде передавати дані.
METHOD=”” – Може приймати значення Get або Post. При застосуванні методу Get інформація, отримана формою, відправляється за URL, що вказана в атрибуті ACTION. Даний метод використовується більшістю броузерами по замовчуванню. Однак при застосуванні цього методу діє обмеження на кількість символів, що передаються. Крім того, сам метод не захищений від несанкціонованого доступу. Метод Post відправляє інформацію, що міститься у формі, в тілі повідомлення, причому ніяких обмежень на кількість даних, що передаються, нема. Те, який з вказаних методів використовувати, залежить від CGI або web-програми, яка опрацьовує дані форми.
TARGET=”” – Застосовується для визначення фрейма або вікна, в якому повинен завантажуватись переведений формою документ. Можна вибрати одну з визначених службових цілей (_blank, _parent, _self або _top (див. про фрейми)) або ввести ідентифікатор (ім’я) потрібного фрейма або вікна.
ENCTYPE=”” – Визначає тип та формат файлу, що відправляється формою. Формат даних для методів Get або Post встановлюється по замовчуванню. Однак, щоб „витиснути” з форми усе можливе, і значення деколи доводиться змінювати.
ACCEPT=””.
ACCEPT-CHARSET=””.
Виконання роботи:
Вправа 1. Створення форм.
1. Створимо новий документ.
/
2. Переключимось в режим Code and Design
/
3. Виберемо категорію Forms панелі Objects і натиснемо на кнопку Insert Form. Після цього в документ буде вставлено форму, яка відображатиметься у вікні перегляду у вигляді червоної пунктирної рамки.
/
4. В Property Inspector натиснемо на поле вводу тексту, розміщеним під словами Form Name і введемо ім’я форми. Наприклад, custInfo і натиснемо Enter.
/
5. Надамо формі атрибут ACTION. Встановимо метод форми, виберемо в полі списку Method пункт Post.
/
6. Вставимо у форму текстове поле вводу, та присвоїмо імя новому тегу. Дане текстове поле призначається для імені користувача, тому його логічно назвати Name. /
7. Встановимо розміри поля та максимальну довжину тексту в полі. Ширина поля задається в символах, та вкажемо текст, який буде відображатись у полі до тих пір, поки користувач не введе свою інформацію.
/
8. Повторимо кроки 3-7 для створення полів вводу прізвища (IName) та адреси електронної пошти (eMail).
9. Створимо поле вводу пароля. У вікні Property Inspector встановимо в атрибуті TYPE значення Password. Дамо полю ім’я Pasword.
/
11. Розмістимо поруч з полем вводу напис, що пояснює його значення (type in desired password).
/
12. Кінцевий вигляд форми зворотнього звязку:
/
Вправа 2. Вставка перемикачів у форму.
Вставимо у форму декілька перемикачів. За допомогою першої групи кнопок буде визначатись вид каналу доступу до Інтернет, з яким буде працювати користувач, за допомогою другої – операційна система, встановлена на його комп’ютері.
В панелі Objects натиснемо кнопку Insert Radio Button чотири рази. У формі з’являться чотири горизонтально розміщених перемикача.
/
Вправа 3. Використання списків, що розкриваються.
1. Створимо список, натискаючи кнопку Insert List/Menu в панелі Objects. В документі створиться пара тегів <SELECT> </SELECT>.
2. У Property Inspector дамо ім’я тегу <SELECT>: browserSelect та виберемо Menu у групі перемикачів Type. Натиснемо кнопку List Value і у вікні, що відкриється, введемо мітки та значення пунктів меню. Першою міткою у нас буде Internet Explorer, їй ми присвоїмо значення IE, друга мітка – Natscape Navigator, значення – NN, третя – Other, значення – other.
/
Коли усі пункти списку створено, за допомогою Property Inspector можна вибрати пункт по замовчуванню: Internet Explorer.
3. Також необхідно перед списком вставити у документ текст, який пояснює користувачу, що він вибирає. У нашому випадку – browser type.
/
Вправа 4. Створення списку з прокруткою.
У Property Inspector дамо ім’я тегу <SELECT>: verNum та у групі перемикачів Type виберіть List. У вікні List Value введемо мітки та значення відповідно: 2.0 та 2; 3.0 та 3; 4.0 та 4; 4.6 та 4.6; 5.0 та 5; 5.5 та 5.5. У полі Height виберемо висоту списку: 2. Скориставшись прапорцем Allow multiple, вкажіть, чи можна у списку вибирати декілька пунктів відразу.
/
/
Відправлення та очищення форми
Після створення форми для того, щоб зробити її корисною, необхідно буде додати завершальний штрих. Щоб форма працювала, потрібні кнопки. Найчастіше кнопок Submit (Відправити) та Reset (Очистити) достатньо. Кнопка Submit відправляє інформацію за адресою, вказаною в атрибуті ACTION. Кнопка Reset витирає введені у форму дані.
Вставимо у форму кнопку:
1. В панелі Objects натиснемо кнопку Insert Button.
2. В Property Inspector виберіть тип кнопки (Submit Form або Reset Form) в полі Action. Присвоємо кнопці ім’я та мітку (мітка – це текст, який буде поміщатись на кнопку; кнопки необов’язково називати Submit або Reset).
/
3. Таким же чином створимо другу кнопку.
4.Тепер форма набула завершального вигляду.
/
Висновки: В результаті цієї лабораторної роботи ми ознайомились з засобами керування формами, та вивчили різні способи внесення інформації для сервера на динамічній web-сторінці. Результат виконання роботи було зафіксовано, та додано у звіт.
03.03.2014 11:03-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора