11 клас. Інформатика. Дистанційне навчання: квітня 2021

Дистанційна освіта з інформатики в період травень 2021 року

05.05.2021 - 09.05.2021

Конспект уроку для учнів

Тема: Оформлення форми для веб-сайту.

Створення блоків для форми на веб-сторінці.

Теоретична частина

Запитання. Як можна закодувати частини форми на веб-сторінці?

Відповідь:

Основи роботи з формами

Форми - це, мабуть, найбільш використовувані елементи веб-сторінки, що створюються за допомогою HTML. За допомогою JavaScript форми стають інтерактивними і функціональними. Перший крок у створенні інтерактивної форми полягає в створенні звичайної форми HTML.

Визначення форми

Форма HTML починається з дескриптора Основи роботи з формами

визначення форми

Форма HTML починається з дескриптора <FORM> . Цей дескриптор вказує на початок форми і дозволяє визначати елементи форми. Елемент <FORM> має три атрибути:

NAME . Ім'я форми. Ви можете використовувати форму, не привласнюючи їй імені. Для додаткового удосконалення форми за допомогою JavaScript їй необхідно дати назву.

METHOD . Приймає значення GET або POST . Існує два способи відправки даних на сервер.
ACTION . Це шлях до сценарієм CGI (або PHP або ін.), В який відправляються дані з форми. Ви можете також використовувати параметр mailto: . Він дозволяє відправити результати обробки введених даних за вказаною поштовою адресою.

Наприклад, в наступному прикладі відображено дескриптор <FORM> для форми Order . Ця форма використовує метод GET і відправляє дані в сценарій CGI з назвою order.cgi , розташованому в тому ж каталозі, що і сама веб-сторінка:

У формі, яка не обмінюється даними з сервером, а служить тільки для локальних задач (наприклад калькулятор або інтерактивна гра), атрибути METHOD і ACTION не використовуються. У них використовується спрощений дескриптор <FORM> :

Після дескриптора <FORM> вказуються кілька елементів форми. Серед них: тектових поля, прапорці, кнопки і перемикачі (радиокнопки). Далі ми з ними детально познайомимося. В кінці форми використовується дескриптор </ FORM> .

Використання об'єкта form

Кожна форма на сторінці HTML представляється окремим об'єктом form , які мають ту ж назву, що і атрибут NAME дескриптора <FORM> .

Для управління формою також можна використовувати масив forms . Цей масив містить стільки елементів, скільки їх є на формі. Всі елементи проіндексовані, починаючи зі значення. Наприклад, до першої формі документа, що мають назву form1 , можна звернутися одним з двох способів:

document.form1
document.forms [0]

Властивості об'єкта form

Поряд з елементами, кожен об'єкт form володіє цілим набором властивостей, які в основному визначаються в дескрипторі <FORM> . Всіх їх можна визначити і за допомогою операторів JavaScript. Нижче наведені всі використовувані властивості об'єкта form .

action . Відповідає атрибуту форми ACTION або програмою, в яку відправляються дані, введені на формі.
encoding . Визначає тип MIME . Визначається атрибутом ENCTYPE . У більшості випадків не використовується.
length . Вказує кількість елементів на формі. Значення цієї властивості безпосередньо змінити не можна.
method . Визначає метод, який використовується для відправки даних, - GET або POST .
target . Визначає вікно, в якому будуть відображатися результати обробки введених на формі даних (відповідно до сценарію CGI). У більшості випадків використовується головне вікно - результат обробки даних заміщає саму форму.

Відправка даних і очищення форми

Об'єкт form має два методи: submit і reset . Перший використовується для відправки даних на обробку, а другий - для очищення форми.

При використанні методу submit для відправки даних на сервер або за допомогою електронної пошти браузер виводить запит на підтвердження відправки даних. Без підтвердження користувача відправку даних провести не можна.

Визначення подій форми

Об'єкт form має два обробника подій: onSubmit і onReset . У ці обробники подій, що задаються в межах дескриптора <FORM> , додається група операторів JavaScript або функція, що управляє формою.

Якщо ви додасте оператор (або функцію) в обробник onSubmit , то він (або вона) викликається до відправки даних в сценарій CGI. Для того щоб скасувати відправку даних на обробку сценарієм CGI, обробник подій onSubmit повинен повернути значення false . Якщо ж він повертає значення true , то дані відправляються на сервер. У деяких випадках необхідно додати в форму кнопку Reset , яка запускає обробник подій onReset .

Створення елементів форм

Найважливіше властивість об'єкта form - це масив elements . Він містить об'єкти кожного елемента форми. Викликається кожен елемент по імені або індексу в масиві. Наприклад, наступних два вирази відповідають першому елементу форми з ім'ям name1 :

document.order.elements [0]
document.order.name1

Звертаючись до елементів форм як до елементів масиву, об'єкт до властивостей форми додає властивість length , що визначає загальна кількість елементів масиву.

Наприклад document.forms.length визначає кількість форм в документі, а document.form1.elements.length - кількість елементів у формі form1 .

Текстове поле

Найчастіше в формах вводу даних використовуються текстові поля. З їх допомогою запитуються імена, адреси та інша текстова інформація. Використовуючи JavaScript, ви можете ввести значення в текстове поле автоматично. Нижче наведено приклад простого текстового поля:

У цьому прикладі визначено текстове поле text1 . Воно містить текст "Привіт" і має довжину 30 символів. В JavaScript це поле розглядається як об'єкт text з ім'ям text1 .

Текстові поля - це найпростіші елементи форми. Кожне текстове поле має такі властивості:

name . Ім'я, яке визначає це поле. Воно використовується і як ім'я об'єкта.

defaultValue . Значення за замовчуванням, яке визначається в параметрі VALUE . Це властивість має атрибут тільки для читання.
value . Поточне значення, введене в поле. Це змінене користувачем або функцією значення за замовчуванням.

При роботі з текстовими полями найбільше часу йде на зчитування значення, введеного користувачем, або на зміну значення за замовчуванням програмним способом. У наступному прикладі значення, введене в текстове поле username форми order змінюється на Василь Сергійович Тупкін :

document.order.username.value = "Василь Сергійович Пупкін"

текстові панелі

Текстові панелі визначаються за допомогою дескриптора <TEXTAREA> і представляються об'єктом textarea . Існує велика різниця між текстовим полем і текстової панеллю. Текстові панелі дозволяють вводити кілька рядків даних. Нижче наведено приклад завдання текстової панелі в документі HTML:

<TEXTAREA NAME = "text1" ROWS = "2" COLS = "70">
Вміст текстової панелі
</ TEXTAREA>

Таким чином визначається текстова панель з назвою text1 . Вона складається з двох рядків, кожна з яких має довжину 70 символів. В JavaScript використовувати цю текстову панель ви зможете за допомогою об'єкта text1 , дочірнього по відношенню до об'єкта form .

Текст між відкриває і закриває дескриптором <TEXTAREA> використовується в якості значення за замовчуванням. Вводячи текст за замовчуванням, ви можете використовувати символи кінця рядка.

Управління текстом в формах

Об'єкти text і textarea мають слеюдующіе додаткові методи:

focus () . Визначає розташування курсора в поле і виділяє поточний поле.
blur () . Видаляє курсор з поля.
select () . Виділяє поле подібно до того, як це робить користувач мишею. Виділяє текст в поле. Не дозволяє виділити частину тексту.

Зміна значення поля також визначається за допомогою обробника події. Об'єкти text і textarea підтримують такі обробники подій:

onFocus . Ця подія відбувається при визначенні розташування курсора в поле.
onBlur . Відбувається при видаленні курсора з текстового поля.
onChange . Відбувається при зміні користувачем значення в поле.
onSelect . Відбувається при виділенні користувачем частини або всього тексту в текстовому полі. Правда, немає можливості визначити, яка частина тексту виділена, а яка - ні. (При виділенні тексту за допомогою методу select () , описаного вище, цей обробник подій не починається.

При використанні ці обробники подій оголошуються в дескрипторі <INPUT> . Наступний приклад ілюструє застосування в програмі обробника onChange для відображення повідомлення:

кнопка

Після заповнення текстових полів зазвичай завжди використовують кнопки. Кнопки визначаються також в дескрипторі <INPUT> і можуть бути декількох типів.

type = SUBMIT . Це кнопка Submit . Вона дозволяє відправляти дані, введені в формі на сервер для обробки сценарієм CGI.

type = RESET . Кнопка Reset . Вона повертає форму в початковий стан після введення всіх параметрів за замовчуванням.

type = BUTTON . Довільна кнопка. Вона не викликає ніякого дії, але визначається одному з обробників подій JavaScript.

Всі три типи кнопок мають атрибут NAME для визначення імені кнопки і атрибут VALUE для вказівки тексту, відображуваного на кнопці. Деякі кнопки вже розглядалися нами в попередніх прикладах. У наведеному нижче прикладі визначається кнопка Submit , що має назву sub1 і значення "Клацніть тут" :

Після клацання на кнопці Reset або Submit викликається обробник onReset або onSubmit . Для створюваних довільних кнопок запускається обробник onClick .

прапорець

Прапорець - це елемент форми, виглядає як маленький порожній квадрат. Клацнувши на прапорці, ви визначаєте один з його станів - виставлений або знято. Ці стани відповідають повертається значення true або false . Для визначення прапорця використовується все той же дескриптор <INPUT> . Нижче наведено приклад його визначення:

І знову елементу форми визначається власне ім'я. Атрибут VALUE визначає текст опції прапорця. Це твердження вважається справедливим при виставленому прапорці. За замовчуванням вводиться значення on . Атрибут CHECKED вказує на виставлене за замовчуванням стан прапорця

Використовувати прапорець дуже просто. Він має тільки два стани, але цілих чотири властивості:

name . Визначає ім'я об'єкта checkbox і прапорця.
value . Це дійсне значення прапорця - за замовчуванням on . Це значення використовується сервером для визначення стану прапорця. В JavaScript для визначення стану використовується властивість checked .
defaultChecked . Цей стан за замовчуванням прапорця, певне в атрибуті CHECKED .
checked . Визначає поточне значення прапорця. Це логічне значення - true або false .

Для управління прапорцем або визначення його значення використовується остання властивість. Наступний оператор виставляє прапорець опції same в об'єкті форми order :

document.order.same.checked = true;

Об'єкт прапорця має всього один метод click () . Цей метод симулює клацання мишею на прапорці. Для нього також визначено один обробник події onClick , підготовлений до запуску при виставленні прапорця. Оскільки він запускається ні до будь-якому натисканні на прапорці, для його успішного використання необхідно точно знати значення властивості checked .

. Цей дескриптор вказує на початок форми і дозволяє визначати елементи форми. Елемент <FORM> має три атрибути:

METHOD . Приймає значення GET або POST . Існує два способи відправки даних на сервер.
ACTION . Це шлях до сценарієм CGI (або PHP або ін.), В який відправляються дані з форми. Ви можете також використовувати параметр mailto: . Він дозволяє відправити результати обробки введених даних за вказаною поштовою адресою.

Використання об'єкта form

document.form1
document.forms [0]

Властивості об'єкта form

action . Відповідає атрибуту форми ACTION або програмою, в яку відправляються дані, введені на формі.
encoding . Визначає тип MIME . Визначається атрибутом ENCTYPE . У більшості випадків не використовується.
length . Вказує кількість елементів на формі. Значення цієї властивості безпосередньо змінити не можна.
method . Визначає метод, який використовується для відправки даних, - GET або POST .
target . Визначає вікно, в якому будуть відображатися результати обробки введених на формі даних (відповідно до сценарію CGI). У більшості випадків використовується головне вікно - результат обробки даних заміщає саму форму.

Відправка даних і очищення форми

Визначення подій форми

Створення елементів форм

document.order.elements [0]
document.order.name1

Текстове поле

Текстові поля - це найпростіші елементи форми. Кожне текстове поле має такі властивості:

name . Ім'я, яке визначає це поле. Воно використовується і як ім'я об'єкта.

defaultValue . Значення за замовчуванням, яке визначається в параметрі VALUE . Це властивість має атрибут тільки для читання.
value . Поточне значення, введене в поле. Це змінене користувачем або функцією значення за замовчуванням.

document.order.username.value = "Василь Сергійович Пупкін"

текстові панелі

<TEXTAREA NAME = "text1" ROWS = "2" COLS = "70">
Вміст текстової панелі
</ TEXTAREA>

Управління текстом в формах

Об'єкти text і textarea мають слеюдующіе додаткові методи:

focus () . Визначає розташування курсора в поле і виділяє поточний поле.
blur () . Видаляє курсор з поля.
select () . Виділяє поле подібно до того, як це робить користувач мишею. Виділяє текст в поле. Не дозволяє виділити частину тексту.

onFocus . Ця подія відбувається при визначенні розташування курсора в поле.
onBlur . Відбувається при видаленні курсора з текстового поля.
onChange . Відбувається при зміні користувачем значення в поле.
onSelect . Відбувається при виділенні користувачем частини або всього тексту в текстовому полі. Правда, немає можливості визначити, яка частина тексту виділена, а яка - ні. (При виділенні тексту за допомогою методу select () , описаного вище, цей обробник подій не починається.

кнопка

type = SUBMIT . Це кнопка Submit . Вона дозволяє відправляти дані, введені в формі на сервер для обробки сценарієм CGI.

type = RESET . Кнопка Reset . Вона повертає форму в початковий стан після введення всіх параметрів за замовчуванням.

type = BUTTON . Довільна кнопка. Вона не викликає ніякого дії, але визначається одному з обробників подій JavaScript.

прапорець

Використовувати прапорець дуже просто. Він має тільки два стани, але цілих чотири властивості:

name . Визначає ім'я об'єкта checkbox і прапорця.
value . Це дійсне значення прапорця - за замовчуванням on . Це значення використовується сервером для визначення стану прапорця. В JavaScript для визначення стану використовується властивість checked .
defaultChecked . Цей стан за замовчуванням прапорця, певне в атрибуті CHECKED .
checked . Визначає поточне значення прапорця. Це логічне значення - true або false .

document.order.same.checked = true;

Практична частина

Мова розмітки HTML для кодування форми.

Приклад кодування властивостей форми

на веб-сторінці

мовою розмітки HTML

Завдання 1. Набрати в текстовому редакторі Блокнот наступний текст html-кодів і зберегти його у файл з розширенням html.

Скопіювати HTML-кодування веб-сторінки у цьому завданні 1.

4) Відкрити текстовий редактор Блокнот. І вставити на сторінку коди.

5)Зберегти даний документ під Іменем index1.html на Робочий стіл.

6) Відкрити даний документ у веб-браузері. Протестувати активні слова на веб-сторінці

7) надіслати скріншот утвореної веб-сторінки на e-mail: vinnser@gmail.com

Кодування простої HTML-форми,

<html>

<head>

<title> Проста HTML-форма </title>

</head>

<BODY bgcolr=”#00bb99” text=”#00000g” link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>

<p><Font size="50" color=”#gggggg” face=”Arial, Times New Roman, Serif”> Зразок кодування форми</font>.

<P><Font size=40" color=”#000000” face=”Arial, Times New Roman, Serif”>Заповніть просту форму</font>

<P><Font size="15" color=”#000000” face=”Arial, Times New Roman, Serif”>

<forma method="post" action=”/cgi-bin/feedback.pl” name=”FORMA2”> Прізвище:

<input type="text" name=”secondname” size=”45” maxlength="150">

<br>

Iм'я:<input type="text" name=”firstname” size=”25” maxlength="150">

<br>

E-mail:<input type="text" name=”email” size=”25” maxlength="150">

<p> Вік:

14-18:<input type="checkbox" name=”14-18” size=”25”>

19--25:<input type="checkbox" name=”19--25:” size=”25”>

26-36:<input type="checkbox" name=”26-36” size=”25”>

36-50:<input type="checkbox" name=”36-50” size=”25”>

50-100:<input type="checkbox" name=”50-100:” size=”25”>

<p> Стать:

<br>

<input type="radio" name=”button” value=”male”>

Чоловік

<br>

<input type="radio" name=”button” value=”female”>

Жінка

<br>

<input type="radio" name=”button” value=”prefer not say”>

Не скажу

<p>Місто:

<select>

<OPTION name=”vinniza” >Вінниця

<OPTION name=”bar” >Бар

<OPTION name=”zhytomyr” >:Житомир

<OPTION name=”kiev” >Київ

</select>

<p> Додаткові відомості про себе:

<p>

<TEXTAREA rows="25" cols="78">

</TEXTAREA>

<input type="submit" name=”button” value=”OK”>

<input type="reset" name=”button” value=”Ні”>

</form>

</body>

</html>

Завдання 2. Завантажте програму-браузер файл з текстом завдання 1. Створена веб-сторінка повинна мати напрочуд файний вигляд. Якщо наявні помилки, то виправте їх в кодуванні. Перевірте виправлення.

Результат виконаної практичної роботи це файли( із результатами тестування веб-сторінки з формою) надіслати вашому учителю на електронну скриньку:

vinnser@gmail.com (Сергій Петрович)
ktdfz@i.ua (Юрій Васильович)

********************

Завдання на розвиток кмітливості

***************