KNOWLEDGE HYPERMARKET


Формы. Полные уроки
 
Строка 3: Строка 3:
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Формы.</metakeywords><br>  
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Формы.</metakeywords><br>  
-
==Тема==
+
== Тема ==
-
*'''Формы'''. <br>
+
-
==Цель==
+
*'''Формы'''. <br>
-
*Рассмотреть понятие «формы». Научить создавать формы разных типов.  
+
-
==Ход урока==
+
== Цель  ==
-
===Понятие "формы"===
+
*Рассмотреть [[Ввод данных через форму. Полные уроки|понятие «формы»]]. Научить создавать формы разных типов.
 +
 
 +
== Ход урока  ==
 +
 
 +
=== Понятие "формы" ===
Формы предназначены для обмена данными между посетителями сайта и сервером.  
Формы предназначены для обмена данными между посетителями сайта и сервером.  
-
Они применяются не только для отправки данных на сервер.
+
Они применяются не только для отправки данных на [[Реферат на тему «Сеть»|сервер]].  
С помощью множеств команд и их атрибутов можно получить доступ к любому элементу формы, изменять его и использовать по своему усмотрению.  
С помощью множеств команд и их атрибутов можно получить доступ к любому элементу формы, изменять его и использовать по своему усмотрению.  
-
 
-
{{#ev:youtube|ntCWwK8pk-E}}  
+
<br> {{#ev:youtube|ntCWwK8pk-E}}  
 +
<br> Документ или веб-страница может содержать любое количество форм, но одновременно может быть отправлена информация только от одной формы.
-
Документ или веб-страница может содержать любое количество форм, но одновременно может быть отправлена информация только от одной формы.  
+
Поэтому, данные форм должны быть независимы друг от друга.  
-
Поэтому, данные форм должны быть независимы друг от друга. 
+
Тег '''&lt; form &gt;''' устанавливает форму на [[Основные теги. Каркас веб-страницы. Полные уроки|веб-странице]], а общий синтаксис написания форм на языке HTML следующий:  
-
 
+
-
Тег '''&lt; form &gt;''' устанавливает форму на веб-странице, а общий синтаксис написания форм на языке HTML следующий:  
+
&lt; FORM &gt; задает начало формы  
&lt; FORM &gt; задает начало формы  
Строка 37: Строка 37:
&lt; /FORM &gt; задает конец формы.  
&lt; /FORM &gt; задает конец формы.  
 +
<br> {{#ev:youtube|BvpDxEN4Bu8}}
-
{{#ev:youtube|BvpDxEN4Bu8}}
+
<br>
-
 
+
-
 
+
-
===Пример написания форм===
+
 +
=== Пример написания форм  ===
[[Image:Formm1.jpg|400px|Пример написания форм]]<br>  
[[Image:Formm1.jpg|400px|Пример написания форм]]<br>  
 +
<br> [[Image:Formm2.jpg|400px|Пример написания форм]]
-
[[Image:Formm2.jpg|400px|Пример написания форм]]
+
<br> {{#ev:youtube|ui4X-uiJxx4}}  
-
 
+
-
 
+
-
{{#ev:youtube|ui4X-uiJxx4}}  
+
 +
<br>
-
===Атрибуты===  
+
=== Атрибуты ===
-
*'''action''' - адрес программы или документа, которые обрабатывает данные формы<br>  
+
*'''action''' - адрес [http://xvatit.com/it/fishki-ot-itshki/ программы] или документа, которые обрабатывает данные формы<br>  
*'''enctype''' - тип информации формы<br>  
*'''enctype''' - тип информации формы<br>  
*'''method''' - метод протокола HTTP<br>  
*'''method''' - метод протокола HTTP<br>  
Строка 61: Строка 59:
*'''target''' - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат
*'''target''' - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат
 +
<br> {{#ev:youtube|pw0We-tr424}}
-
{{#ev:youtube|pw0We-tr424}}
+
<br> Для отправки формы используется кнопка '''Submit'''. Если она отсутствует, то клавиша Enter имитирует ее использование, но только в том случае, когда в форме имеется только один элемент '''&lt; input '''&gt;. Если таких элементов больше, нажатие на &lt; Enter &gt; ни к чему не приведет.
-
 
+
Когда форма отправляется на сервер, данные обрабатываются [[Компьютерные программы. Операционная система|программой]], заданной параметром '''action. '''  
-
Для отправки формы используется кнопка '''Submit'''. Если она отсутствует, то клавиша Enter имитирует ее использование, но только в том случае, когда в форме имеется только один элемент '''&lt; input '''&gt;. Если таких элементов больше, нажатие на &lt; Enter &gt; ни к чему не приведет.
+
-
 
+
-
Когда форма отправляется на сервер, данные обрабатываются программой, заданной параметром '''action. '''  
+
Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега &lt;'''input '''&gt;, а значение введено пользователем.  
Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега &lt;'''input '''&gt;, а значение введено пользователем.  
 +
<br> {{#ev:youtube|TbahwcC8wv4}}
-
{{#ev:youtube|TbahwcC8wv4}}
+
<br>
-
 
+
-
===Типы ввода форм (Type)===  
+
=== Типы ввода форм (Type) ===
-
'''TEXT с атрибутами: '''
+
'''TEXT с атрибутами: '''  
*SIZE - длинна поля ввода  
*SIZE - длинна поля ввода  
Строка 83: Строка 79:
*PASSWORD – отображает данные в виде звездочек или точек
*PASSWORD – отображает данные в виде звездочек или точек
 +
<br> [[Image:Formm3.jpg|400px|Пример написания форм]]
-
[[Image:Formm3.jpg|400px|Пример написания форм]]
+
<br>
 +
=== Опции выбора  ===
-
===Опции выбора===
+
RADIO – задает тип выбора «кружочек»<br>
-
RADIO – задает тип выбора «кружочек»<br>
+
<br> [[Image:Formm4.jpg|400px|Пример написания форм]]
 +
<br> CHECKBOX – задает тип выбора «галочка»
-
[[Image:Formm4.jpg|400px|Пример написания форм]]  
+
<br> [[Image:Formm5.jpg|400px|Пример написания форм]]  
 +
<br> OPTION VALUE - выдает несколько вариантов выбора.
-
CHECKBOX – задает тип выбора «галочка»
+
<br> [[Image:Formm7.jpg|400px|Пример написания форм]]
 +
<br>
-
[[Image:Formm5.jpg|400px|Пример написания форм]]
+
=== Поле для ввода текста  ===
 +
TEXTAREA - создает поле для [[Операции при создании текстов|ввода текста]].<br>
-
OPTION VALUE - выдает несколько вариантов выбора.
+
Rows - задает количество строк
 +
Cols - количество колонок
-
[[Image:Formm7.jpg|400px|Пример написания форм]]  
+
<br> [[Image:Formm6.jpg|400px|Пример написания форм]]  
 +
<br> {{#ev:youtube|2nDBrkvPpG8}}
-
===Поле для ввода текста===
+
<br>
-
TEXTAREA - создает поле для ввода текста.<br>
+
== Вопросы  ==
-
Rows - задает количество строк
+
''1. Что такое формы? Их предназначения? ''
-
Cols - количество колонок
+
''2. Каким тэгом определяется начало и конец формы? ''
 +
''3. Типы ввода (Type). ''
-
[[Image:Formm6.jpg|400px|Пример написания форм]]
+
''4. С помощью какой команды создается поле для ввода текста? ''
 +
<br>
-
{{#ev:youtube|2nDBrkvPpG8}}
+
== Список использованных источников  ==
 +
''1. Урок на тему: «Понятие форм в языке [[Вступление в HTML. Полные уроки|HTML]], Поддубная Е. Н., г. Москва. ''
-
==Вопросы==
+
''2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. ''  
-
 
+
-
''1. Что такое формы? Их предназначения? ''
+
-
 
+
-
''2. Каким тэгом определяется начало и конец формы? ''
+
-
 
+
-
''3. Типы ввода (Type). ''
+
-
 
+
-
''4. С помощью какой команды создается поле для ввода текста? ''
+
-
 
+
-
 
+
-
==Список использованных источников==
+
-
 
+
-
''1. Урок на тему: «Понятие форм в языке HTML, Поддубная Е. Н., г. Москва. ''
+
-
 
+
-
''2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г. ''
+
''3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.''  
''3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.''  
-
''4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г. ''
+
''4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г. ''  
 +
<br>
----
----
 +
<br> ''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
-
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
+
<br>
-
 
+
----
----
 +
<br> '''Над уроком работали'''
-
'''Над уроком работали'''
+
Соловьев М. С.  
-
 
+
-
Соловьев М. С.
+
 +
<br>
----
----
-
 
+
<br> Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>  
-
Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на [http://xvatit.com/forum/ '''Образовательном форуме'''], где на международном уровне собирается образовательный совет свежей мысли и действия. Создав [http://xvatit.com/club/blogs/ '''блог,'''] Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. [http://xvatit.com/school/guild/ '''Гильдия Лидеров Образования'''] открывает двери для специалистов&nbsp; высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.<br>  
+
-
   
+
-
 
+
-
 
+
[[Category:Информатика_10_класс]]
[[Category:Информатика_10_класс]]

Текущая версия на 20:04, 2 февраля 2013

Гипермаркет знаний>>Информатика>>Информатика 10 класс. Полные уроки>>Информатика: Формы.


Содержание

Тема

  • Формы.

Цель

Ход урока

Понятие "формы"

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

Они применяются не только для отправки данных на сервер.

С помощью множеств команд и их атрибутов можно получить доступ к любому элементу формы, изменять его и использовать по своему усмотрению.



Документ или веб-страница может содержать любое количество форм, но одновременно может быть отправлена информация только от одной формы.

Поэтому, данные форм должны быть независимы друг от друга.

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

< FORM > задает начало формы

< INPUT > принимает от пользователя информацию разными способами

< INPUT > создает поле формы в виде кнопки, поля ввода и т.д.

< /FORM > задает конец формы.



Пример написания форм

Пример написания форм


Пример написания форм



Атрибуты

  • action - адрес программы или документа, которые обрабатывает данные формы
  • enctype - тип информации формы
  • method - метод протокола HTTP
  • name - имя формы
  • target - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат



Для отправки формы используется кнопка Submit. Если она отсутствует, то клавиша Enter имитирует ее использование, но только в том случае, когда в форме имеется только один элемент < input >. Если таких элементов больше, нажатие на < Enter > ни к чему не приведет.

Когда форма отправляется на сервер, данные обрабатываются программой, заданной параметром action.

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



Типы ввода форм (Type)

TEXT с атрибутами:

  • SIZE - длинна поля ввода
  • MAXLENGTH - количество символов
  • PASSWORD – отображает данные в виде звездочек или точек


Пример написания форм


Опции выбора

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


Пример написания форм


CHECKBOX – задает тип выбора «галочка»


Пример написания форм


OPTION VALUE - выдает несколько вариантов выбора.


Пример написания форм


Поле для ввода текста

TEXTAREA - создает поле для ввода текста.

Rows - задает количество строк

Cols - количество колонок


Пример написания форм



Вопросы

1. Что такое формы? Их предназначения?

2. Каким тэгом определяется начало и конец формы?

3. Типы ввода (Type).

4. С помощью какой команды создается поле для ввода текста?


Список использованных источников

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

2. Гончаров А. Самоучитель HTML. - СПб.: Питер, 2002 г.

3. Мержевич В. В. HTML и CSS на примерах. - СПб.: БХВ-Петербург, 2005 г.

4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г.




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




Над уроком работали

Соловьев М. С.




Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, но и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.

Предмети > Информатика > Информатика 10 класс