Форми. Повні уроки - История изменений

User17 в 21:30, 4 ноября 2012

2012-11-04T21:30:43Z

User16 в 18:57, 2 ноября 2012

2012-11-02T18:57:33Z

← Предыдущая		Версия 18:57, 2 ноября 2012
Строка 3:		Строка 3:
	<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Форми.</metakeywords>		<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Форми.</metakeywords>

-	'''~~Тема:~~ Форми'''. <br>	+	==Тема==
		+	*'''Форми'''. <br>

-	~~'''~~Мета~~: '''~~ Розглянути поняття форми в HTML. Навчити створювати форми різних типів.	+	==Мета==
		+	*Розглянути поняття форми в HTML.
		+	*Навчити створювати форми різних типів.

-	~~'''~~Тип уроку~~:'''~~ теоретично-практичний	+	==Тип уроку==
		+	*теоретично-практичний

-	~~'''~~Хід уроку~~:'''~~	+	==Хід уроку==
		+
		+	===Поняття форми в HTML===

	Форми призначені для обміну даними між відвідувачами сайту і сервером. <br>		Форми призначені для обміну даними між відвідувачами сайту і сервером. <br>
Строка 37:		Строка 43:
	{{#ev: youtube\|BvpDxEN4Bu8}}		{{#ev: youtube\|BvpDxEN4Bu8}}

-	~~<br> '''~~Приклад написання форм ~~'''<br>~~	+	===Приклад написання форм===

-	<br> [[Image:Formm1.jpg]]<br>	+	<br> [[Image:Formm1.jpg\|480px\|Форми]]<br>

-	~~<br>~~

-	[[Image:Formm2.jpg]]	+	[[Image:Formm2.jpg\|480px\|Форми]]

	<br>		<br>
Строка 49:		Строка 54:
	{{#ev: youtube\|ui4X-uiJxx4}}		{{#ev: youtube\|ui4X-uiJxx4}}

-	~~'''<br>~~ Атрибути~~.<br>'''~~	+	===Атрибути===

	*'''action''' - адреса програми або документу, яка обробляє форми<br>		*'''action''' - адреса програми або документу, яка обробляє форми<br>
Строка 75:		Строка 80:
	<br>		<br>

-	~~'''~~Типи введення форм (Type)~~'''~~	+	===Типи введення форм (Type)===

-	~~<u>~~TEXT із атрибутами: ~~</u>~~	+	'''TEXT із атрибутами: '''

	*SIZE - довжина поля введення		*SIZE - довжина поля введення
Строка 85:		Строка 90:
	<br>		<br>

-	[[Image:Formm3.jpg]]	+	[[Image:Formm3.jpg\|480px\|Форми]]

	<br>		<br>

-	~~'''~~Опції вибору~~.'''~~	+	===Опції вибору===

	RADIO - задає тип вибору «кружечок»<br>		RADIO - задає тип вибору «кружечок»<br>
Строка 95:		Строка 100:
	<br>		<br>

-	[[Image:Formm4.jpg]]	+	[[Image:Formm4.jpg\|480px\|Форми]]

	<br>		<br>
Строка 103:		Строка 108:
	<br>		<br>

-	[[Image:Formm5.jpg]]	+	[[Image:Formm5.jpg\|480px\|Форми]]

	<br>		<br>
Строка 109:		Строка 114:
	OPTION VALUE - видає декілька варіантів вибору.		OPTION VALUE - видає декілька варіантів вибору.

-	[[Image:Formm7.jpg]]	+	[[Image:Formm7.jpg\|480px\|Форми]]

-	~~<br> <br> '''~~Поле для введення тексту~~'''~~	+	===Поле для введення тексту===

	TEXTAREA - створює поле для введення тексту.<br>		TEXTAREA - створює поле для введення тексту.<br>
Строка 119:		Строка 124:
	Cols - кількість колонок		Cols - кількість колонок

-	[[Image:Formm6.jpg]]	+	[[Image:Formm6.jpg\|480px\|Форми]]

	<br> {{#ev: youtube\|2nDBrkvPpG8}}		<br> {{#ev: youtube\|2nDBrkvPpG8}}
Строка 125:		Строка 130:
	<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>
		+
		+	----
		+

	''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''		''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''

-	~~<br> <br> ----~~

-	'''~~<u>~~Над уроком працювали~~</u>~~'''	+	----
		+
		+
		+	'''Над уроком працювали'''

	Піддубна Е. Н.		Піддубна Е. Н.
Строка 161:		Строка 171:
	Соловйов М. С.		Соловйов М. С.

-	~~----~~

		+	----

User11 в 11:03, 10 марта 2011

2011-03-10T11:03:25Z

← Предыдущая		Версия 11:03, 10 марта 2011
Строка 137:		Строка 137:
	<br>		<br>

-	''Список використаної літератури:''	+	''Список використаної літератури:

-	1. Урок на тему: ~~«Поняття~~ форм в мові HTML, Поддубная Е. Н., м. Москва.	+	1. Урок на тему: "Поняття форм в мові HTML", Поддубная Е. Н., м. Москва.

	2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.		2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.
Строка 153:		Строка 153:
	''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''		''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''

-	<br> ~~Якщо у вас є виправлення чи пропозиції до цього уроку~~, [http://xvatit.com/~~index~~.~~php?do=feedback напишіть нам~~].	+	<br> <br> ----
		+
		+	'''<u>Над уроком працювали</u>'''
		+
		+	Піддубна Е. Н.
		+
		+	Соловйов М. С.
		+
		+	----
		+
		+
		+
		+	Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>

-	Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].

	[[Category:Інформатика_10_клас]]		[[Category:Інформатика_10_клас]]

User17 в 13:06, 25 января 2011

2011-01-25T13:06:06Z

← Предыдущая		Версия 13:06, 25 января 2011
Строка 17:		Строка 17:
	За допомогою безлічі команд і їх атрибутів можна отримати доступ до будь-якого елементу форми, змінювати його і використовувати на власний розсуд. <br>		За допомогою безлічі команд і їх атрибутів можна отримати доступ до будь-якого елементу форми, змінювати його і використовувати на власний розсуд. <br>

-	{{#ev: youtube\|ntCWwK8pk - E}}	+	{{#ev: youtube\|ntCWwK8pk-E}}

	Документ або веб-сторінка може вміщувати будь-яку кількість форм, але одночасно може бути відправлена інформація тільки від однієї форми. <br>		Документ або веб-сторінка може вміщувати будь-яку кількість форм, але одночасно може бути відправлена інформація тільки від однієї форми. <br>
Строка 47:		Строка 47:
	<br>		<br>

-	{{#ev: youtube\|ui4X - uiJxx4}}	+	{{#ev: youtube\|ui4X-uiJxx4}}

	'''<br> Атрибути.<br>'''		'''<br> Атрибути.<br>'''
Строка 59:		Строка 59:
	<br>		<br>

-	{{#ev: youtube\|pw0We - tr424}}	+	{{#ev: youtube\|pw0We-tr424}}

	<br>		<br>

User17: Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»

2011-01-11T14:46:02Z

Новая страница: «'''Гіпермаркет Знань>>Інформатика>...»

Новая страница

'''[[Гіпермаркет Знань - перший в світі!|Гіпермаркет Знань]]>>[[Інформатика|Інформатика]]>>[[Інформатика 10 клас. Повні уроки|Інформатика 10 клас. Повні уроки]]>> Інформатика: Форми.'''

<metakeywords>Інформатика, клас, урок, на тему, 10 клас, Форми.</metakeywords>

'''Тема: Форми'''. 

'''Мета: ''' Розглянути поняття форми в HTML. Навчити створювати форми різних типів.

'''Тип уроку:''' теоретично-практичний

'''Хід уроку:'''

Форми призначені для обміну даними між відвідувачами сайту і сервером. 

Вони застосовуються не лише для відправки даних на сервер. 

За допомогою безлічі команд і їх атрибутів можна отримати доступ до будь-якого елементу форми, змінювати його і використовувати на власний розсуд. 

{{#ev: youtube|ntCWwK8pk - E}}

Документ або веб-сторінка може вміщувати будь-яку кількість форм, але одночасно може бути відправлена інформація тільки від однієї форми. 

Тому, дані форм мають бути незалежні один від одного. 

Тег '''< form >''' встановлює форму на веб-сторінці, а загальний синтаксис написання форм на мові HTML наступний:

< FORM > задає початок форми 

< INPUT > приймає від користувача інформацію різними способами 

< INPUT > створює поле форми у вигляді кнопки, поля введення і т.д. 

< /FORM > задає кінець форми.

 

{{#ev: youtube|BvpDxEN4Bu8}}

 '''Приклад написання форм ''' 

 [[Image:Formm1.jpg]] 

 

[[Image:Formm2.jpg]]

 

{{#ev: youtube|ui4X - uiJxx4}}

''' Атрибути. '''

*'''action''' - адреса програми або документу, яка обробляє форми 
*'''enctype''' - тип інформації форми 
*'''method''' - метод протоколу HTTP 
*'''name''' - ім'я форми 
*'''target''' - ім'я вікна або фрейма, куди обробник завантажуватиме отриманий результат

 

{{#ev: youtube|pw0We - tr424}}

 

Для відправки форми використовується кнопка '''Submit'''. Якщо вона відсутня, то клавіша Enter імітує її використання, але тільки у тому випадку, коли у формі є тільки один елемент ''< input ''>. Якщо таких елементів більше, натиснення на < Enter > ні до чого не призведе.

Коли форма відправляється на сервер, дані обробляються програмою, заданою параметром ''action. ''

Заздалегідь браузер готує інформацію у вигляді пари «ім'я=значення», де ім'я визначається параметром name тега <''input ''>, а значення - введене користувачем.

 

{{#ev: youtube|TbahwcC8wv4}}

 

'''Типи введення форм (Type)'''

TEXT із атрибутами: 

*SIZE - довжина поля введення
*MAXLENGTH - кількість символів
*PASSWORD - відображає дані у вигляді зірочок або точок

 

[[Image:Formm3.jpg]]

 

'''Опції вибору.'''

RADIO - задає тип вибору «кружечок» 

 

[[Image:Formm4.jpg]]

 

CHECKBOX - задає тип вибору «галочка»

 

[[Image:Formm5.jpg]]

 

OPTION VALUE - видає декілька варіантів вибору.

[[Image:Formm7.jpg]]

 '''Поле для введення тексту'''

TEXTAREA - створює поле для введення тексту. 

Rows - задає кількість рядків

Cols - кількість колонок

[[Image:Formm6.jpg]]

 {{#ev: youtube|2nDBrkvPpG8}}

 

'''Самоконтроль:'''

1. Що таке форми? Їх призначення.

2. Яким тегом визначається початок і кінець форми?

3. Типи введення (Type).

4. За допомогою якої команди створюється поле для введення тексту?

 

''Список використаної літератури:''

1. Урок на тему: «Поняття форм в мові HTML, Поддубная Е. Н., м. Москва.

2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.

3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.

4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.

5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.

 

''Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.''

 Якщо у вас є виправлення чи пропозиції до цього уроку, [http://xvatit.com/index.php?do=feedback напишіть нам].

Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - [http://xvatit.com/forum/ Образовательный форум].

[[Category:Інформатика_10_клас]]