<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Форми.</metakeywords>
<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Форми.</metakeywords>
-
==Тема==
+
== Тема ==
-
*'''Форми'''. <br>
+
-
==Мета==
+
*'''Форми'''. <br>
-
*Розглянути поняття форми в HTML.
+
-
*Навчити створювати форми різних типів.
+
-
==Тип уроку==
+
== Мета ==
-
*теоретично-практичний
+
-
==Хід уроку==
+
*Розглянути поняття форми в [[Вступление в HTML. Полные уроки|HTML]]
+
.
+
*Навчити створювати форми різних типів.
-
===Поняття форми в HTML===
+
== Тип уроку ==
-
Форми призначені для обміну даними між відвідувачами сайту і сервером. <br>
+
*теоретично-практичний
+
+
== Хід уроку ==
+
+
=== Поняття форми в HTML ===
+
+
Форми призначені для обміну даними між відвідувачами [[Структура веб-сайтів, різновиди веб-сайтів|сайту]] і сервером. <br>
Вони застосовуються не лише для відправки даних на сервер. <br>
Вони застосовуються не лише для відправки даних на сервер. <br>
Строка 25:
Строка 29:
{{#ev: youtube|ntCWwK8pk-E}}
{{#ev: youtube|ntCWwK8pk-E}}
-
Документ або веб-сторінка може вміщувати будь-яку кількість форм, але одночасно може бути відправлена інформація тільки від однієї форми. <br>
+
Документ або веб-сторінка може вміщувати будь-яку кількість форм, але одночасно може бути відправлена [[Закрита інформація до теми «Введення, редагування і форматування тексту»|інформація]] тільки від однієї форми. <br>
Тому, дані форм мають бути незалежні один від одного. <br>
Тому, дані форм мають бути незалежні один від одного. <br>
Строка 43:
Строка 47:
{{#ev: youtube|BvpDxEN4Bu8}}
{{#ev: youtube|BvpDxEN4Bu8}}
-
===Приклад написання форм===
+
=== Приклад написання форм ===
<br> [[Image:Formm1.jpg|480px|Форми]]<br>
<br> [[Image:Formm1.jpg|480px|Форми]]<br>
-
+
<br> [[Image:Formm2.jpg|480px|Форми]]
-
[[Image:Formm2.jpg|480px|Форми]]
+
<br>
<br>
Строка 54:
Строка 57:
{{#ev: youtube|ui4X-uiJxx4}}
{{#ev: youtube|ui4X-uiJxx4}}
-
===Атрибути===
+
=== Атрибути ===
-
*'''action''' - адреса програми або документу, яка обробляє форми<br>
+
*'''action''' - адреса [[Програми браузери. Повні уроки|програми]] або документу, яка обробляє форми<br>
*'''enctype''' - тип інформації форми<br>
*'''enctype''' - тип інформації форми<br>
*'''method''' - метод протоколу HTTP<br>
*'''method''' - метод протоколу HTTP<br>
Строка 68:
Строка 71:
<br>
<br>
-
Для відправки форми використовується кнопка '''Submit'''. Якщо вона відсутня, то клавіша Enter імітує її використання, але тільки у тому випадку, коли у формі є тільки один елемент ''< input ''>. Якщо таких елементів більше, натиснення на < Enter > ні до чого не призведе.
+
Для відправки форми використовується кнопка '''Submit'''. Якщо вона відсутня, то [[Закриті вправи до теми «Основная позиция пальцев на клавиатуре.»|клавіша]] Enter імітує її використання, але тільки у тому випадку, коли у формі є тільки один елемент ''< input ''>. Якщо таких елементів більше, натиснення на < Enter > ні до чого не призведе.
Коли форма відправляється на сервер, дані обробляються програмою, заданою параметром ''action. ''
Коли форма відправляється на сервер, дані обробляються програмою, заданою параметром ''action. ''
Строка 80:
Строка 83:
<br>
<br>
-
===Типи введення форм (Type)===
+
=== Типи введення форм (Type) ===
-
'''TEXT із атрибутами: '''
+
'''TEXT із атрибутами: '''
*SIZE - довжина поля введення
*SIZE - довжина поля введення
Строка 94:
Строка 97:
<br>
<br>
-
===Опції вибору===
+
=== Опції вибору ===
RADIO - задає тип вибору «кружечок»<br>
RADIO - задає тип вибору «кружечок»<br>
Строка 116:
Строка 119:
[[Image:Formm7.jpg|480px|Форми]]
[[Image:Formm7.jpg|480px|Форми]]
-
===Поле для введення тексту===
+
=== Поле для введення тексту ===
-
TEXTAREA - створює поле для введення тексту.<br>
+
TEXTAREA - створює поле для [[Операции при создании текстов|введення тексту]].<br>
Rows - задає кількість рядків
Rows - задає кількість рядків
Строка 130:
Строка 133:
<br>
<br>
-
==Самоконтроль==
+
== Самоконтроль ==
-
''1. Що таке форми? Їх призначення. ''
+
''1. Що таке форми? Їх призначення. ''
-
''2. Яким тегом визначається початок і кінець форми? ''
+
''2. Яким тегом визначається початок і кінець форми? ''
-
''3. Типи введення (Type). ''
+
''3. Типи введення (Type). ''
-
''4. За допомогою якої команди створюється поле для введення тексту? ''
+
''4. За допомогою якої команди створюється поле для введення тексту? ''
<br>
<br>
-
==Список використаної літератури==
+
== Список використаної літератури ==
''1. Урок на тему: "Поняття форм в мові HTML", Поддубная Е. Н., м. Москва.''
''1. Урок на тему: "Поняття форм в мові HTML", Поддубная Е. Н., м. Москва.''
-
''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
+
''2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010. ''
-
''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
+
''3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010. ''
''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.''
''4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.''
-
''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
+
''5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007. ''
<br>
<br>
Строка 158:
Строка 161:
----
----
+
<br> ''Скомпоновано та надіслано викладачем Київського національного [http://xvatit.com/vuzi/ університету] імені Тараса Шевченка Соловйовим М. С.''
-
''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''
+
<br>
-
+
----
----
+
<br> '''Над уроком працювали'''
-
'''Над уроком працювали'''
+
Піддубна Е. Н.
-
Піддубна Е. Н.
+
Соловйов М. С.
-
+
-
Соловйов М. С.
+
+
<br>
----
----
-
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>
Форми призначені для обміну даними між відвідувачами сайту і сервером.
Вони застосовуються не лише для відправки даних на сервер.
За допомогою безлічі команд і їх атрибутів можна отримати доступ до будь-якого елементу форми, змінювати його і використовувати на власний розсуд.
Документ або веб-сторінка може вміщувати будь-яку кількість форм, але одночасно може бути відправлена інформація тільки від однієї форми.
Тому, дані форм мають бути незалежні один від одного.
Тег < form > встановлює форму на веб-сторінці, а загальний синтаксис написання форм на мові HTML наступний:
< FORM > задає початок форми
< INPUT > приймає від користувача інформацію різними способами
< INPUT > створює поле форми у вигляді кнопки, поля введення і т.д.
< /FORM > задає кінець форми.
Приклад написання форм
Атрибути
action - адреса програми або документу, яка обробляє форми
enctype - тип інформації форми
method - метод протоколу HTTP
name - ім'я форми
target - ім'я вікна або фрейма, куди обробник завантажуватиме отриманий результат
Для відправки форми використовується кнопка Submit. Якщо вона відсутня, то клавіша Enter імітує її використання, але тільки у тому випадку, коли у формі є тільки один елемент < input >. Якщо таких елементів більше, натиснення на < Enter > ні до чого не призведе.
Коли форма відправляється на сервер, дані обробляються програмою, заданою параметром action.
Заздалегідь браузер готує інформацію у вигляді пари «ім'я=значення», де ім'я визначається параметром name тега <input >, а значення - введене користувачем.
Типи введення форм (Type)
TEXT із атрибутами:
SIZE - довжина поля введення
MAXLENGTH - кількість символів
PASSWORD - відображає дані у вигляді зірочок або точок
2. Яким тегом визначається початок і кінець форми?
3. Типи введення (Type).
4. За допомогою якої команди створюється поле для введення тексту?
Список використаної літератури
1. Урок на тему: "Поняття форм в мові HTML", Поддубная Е. Н., м. Москва.
2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.
4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.
5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.
Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.
Над уроком працювали
Піддубна Е. Н.
Соловйов М. С.
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.