KNOWLEDGE HYPERMARKET


Формы. Полные уроки
(Новая страница: «'''Гипермаркет знаний>>Информатика>>[[Информа...»)
Строка 1: Строка 1:
'''[[Гипермаркет знаний - первый в мире!|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Формы.'''  
'''[[Гипермаркет знаний - первый в мире!|Гипермаркет знаний]]>>[[Информатика]]>>[[Информатика 10 класс. Полные уроки]]>>Информатика: Формы.'''  
-
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Формы.</metakeywords><br>
+
<metakeywords>Информатика, класс, урок, на тему, 10 класс, Формы.</metakeywords><br>  
-
'''Тема: Формы'''. <br>
+
'''Тема: Формы'''. <br>  
'''Цель: '''Рассмотреть понятие «формы». Научить создавать формы разных типов.  
'''Цель: '''Рассмотреть понятие «формы». Научить создавать формы разных типов.  
-
Формы предназначены для обмена данными между посетителями сайта и сервером. <br>
+
Формы предназначены для обмена данными между посетителями сайта и сервером. <br>  
-
Они применяются не только для отправки данных на сервер. <br>
+
Они применяются не только для отправки данных на сервер. <br>  
-
С помощью множеств команд и их атрибутов можно получить доступ к любому элементу формы, изменять его и использовать по своему усмотрению. <br>
+
С помощью множеств команд и их атрибутов можно получить доступ к любому элементу формы, изменять его и использовать по своему усмотрению. <br>  
{{#ev:youtube|ntCWwK8pk-E}}  
{{#ev:youtube|ntCWwK8pk-E}}  
-
Документ или веб-страница может содержать любое количество форм, но одновременно может быть отправлена информация только от одной формы. <br>
+
Документ или веб-страница может содержать любое количество форм, но одновременно может быть отправлена информация только от одной формы. <br>  
-
Поэтому, данные форм должны быть независимы друг от друга. <br>
+
Поэтому, данные форм должны быть независимы друг от друга. <br>  
Тег '''&lt; form &gt;''' устанавливает форму на веб-странице, а общий синтаксис написания форм на языке HTML следующий:  
Тег '''&lt; form &gt;''' устанавливает форму на веб-странице, а общий синтаксис написания форм на языке HTML следующий:  
-
&lt; FORM &gt; задает начало формы<br>
+
&lt; FORM &gt; задает начало формы<br>  
-
&lt; INPUT &gt; принимает от пользователя информацию разными способами<br>
+
&lt; INPUT &gt; принимает от пользователя информацию разными способами<br>  
-
&lt; INPUT &gt; создает поле формы в виде кнопки, поля ввода и т.д. <br>
+
&lt; INPUT &gt; создает поле формы в виде кнопки, поля ввода и т.д. <br>  
&lt; /FORM &gt; задает конец формы.  
&lt; /FORM &gt; задает конец формы.  
-
<br>
+
<br>  
{{#ev:youtube|BvpDxEN4Bu8}}  
{{#ev:youtube|BvpDxEN4Bu8}}  
-
<br> '''Пример написания форм '''<br>
+
<br> '''Пример написания форм '''<br>
 +
 
 +
<br> [[Image:Formm1.jpg]]<br>  
<br>
<br>
-
[[Image:Formm1.jpg]]<br>
 
[[Image:Formm2.jpg]]  
[[Image:Formm2.jpg]]  
-
<br>
+
<br>  
{{#ev:youtube|ui4X-uiJxx4}}  
{{#ev:youtube|ui4X-uiJxx4}}  
-
'''<br> Атрибуты.<br>'''
+
'''<br> Атрибуты.<br>'''  
-
*'''action''' - адрес программы или документа, которые обрабатывает данные формы<br>
+
*'''action''' - адрес программы или документа, которые обрабатывает данные формы<br>  
-
*'''enctype''' - тип информации формы<br>
+
*'''enctype''' - тип информации формы<br>  
-
*'''method''' - метод протокола HTTP<br>
+
*'''method''' - метод протокола HTTP<br>  
-
*'''name''' - имя формы <br>
+
*'''name''' - имя формы <br>  
*'''target''' - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат
*'''target''' - имя окна или фрейма, куда обработчик будет загружать возвращаемый результат
-
 
+
<br>
{{#ev:youtube|pw0We-tr424}}  
{{#ev:youtube|pw0We-tr424}}  
-
 
+
<br>
Для отправки формы используется кнопка '''Submit'''. Если она отсутствует, то клавиша Enter имитирует ее использование, но только в том случае, когда в форме имеется только один элемент ''&lt; input ''&gt;. Если таких элементов больше, нажатие на &lt; Enter &gt; ни к чему не приведет.  
Для отправки формы используется кнопка '''Submit'''. Если она отсутствует, то клавиша Enter имитирует ее использование, но только в том случае, когда в форме имеется только один элемент ''&lt; input ''&gt;. Если таких элементов больше, нажатие на &lt; Enter &gt; ни к чему не приведет.  
-
Когда форма отправляется на сервер, данные обрабатываются программой, заданной параметром ''action. ''
+
Когда форма отправляется на сервер, данные обрабатываются программой, заданной параметром ''action. ''  
Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега &lt;''input ''&gt;, а значение введено пользователем.  
Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега &lt;''input ''&gt;, а значение введено пользователем.  
-
 
+
<br>
{{#ev:youtube|TbahwcC8wv4}}  
{{#ev:youtube|TbahwcC8wv4}}  
 +
<br>
 +
'''Типы ввода форм (Type)'''
-
'''Типы ввода форм (Type)'''
+
<u>TEXT с атрибутами: </u>  
-
 
+
-
<u>TEXT с атрибутами: </u>
+
*SIZE - длинна поля ввода  
*SIZE - длинна поля ввода  
Строка 78: Строка 79:
*PASSWORD – отображает данные в виде звездочек или точек
*PASSWORD – отображает данные в виде звездочек или точек
-
 
+
<br>
[[Image:Formm3.jpg]]  
[[Image:Formm3.jpg]]  
-
'''Опции выбора.'''
+
<br>
-
RADIO – задает тип выбора «кружочек» [[Image:Formm4.jpg]]
+
'''Опции выбора.'''
-
CHECKBOX – задает тип выбора «галочка»
+
RADIO – задает тип выбора «кружочек»<br>
 +
<br>
 +
[[Image:Formm4.jpg]]
 +
 +
<br>
 +
 +
CHECKBOX – задает тип выбора «галочка»
 +
 +
<br>
[[Image:Formm5.jpg]]  
[[Image:Formm5.jpg]]  
 +
<br>
 +
OPTION VALUE - выдает несколько вариантов выбора.
-
OPTION VALUE - выдает несколько вариантов выбора.
+
[[Image:Formm7.jpg]]
-
[[Image:Formm6.jpg]]
 
-
<br> '''Поле для ввода текста'''
 
-
TEXTAREA - создает поле для ввода текста.<br>
 
-
[[Image:Formm7.jpg]]
 
-
<br>  
+
<br> '''Поле для ввода текста'''
 +
 
 +
TEXTAREA - создает поле для ввода текста.<br>
 +
 
 +
Rows - задает количество строк
 +
 
 +
Cols - количество колонок
 +
 
 +
 
 +
 
 +
 
 +
 
 +
[[Image:Formm6.jpg]]
 +
 
 +
 
<br> {{#ev:youtube|2nDBrkvPpG8}}  
<br> {{#ev:youtube|2nDBrkvPpG8}}  
Строка 112: Строка 133:
<br>  
<br>  
-
<br>
+
'''Вопросы:'''  
-
 
+
-
'''Вопросы:'''
+
1. Что такое формы? Их предназначения?  
1. Что такое формы? Их предназначения?  
Строка 124: Строка 143:
4. С помощью какой команды создается поле для ввода текста?  
4. С помощью какой команды создается поле для ввода текста?  
 +
<br>
-
 
+
''Список использованных источников:''  
-
''Список использованных источников:''
+
1. Урок на тему: «Понятие форм в языке HTML, Поддубная Е. Н., г. Москва.  
1. Урок на тему: «Понятие форм в языке HTML, Поддубная Е. Н., г. Москва.  
Строка 136: Строка 155:
4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г.  
4. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов. — М.: ТРИУМФ, 2007 г.  
 +
<br>
-
 
+
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''  
-
''Отредактировано и выслано преподавателем Киевского национального университета им. Тараса Шевченко Соловьевым М. С.''
+
Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].  
Если у вас есть исправления или предложения к данному уроку, [http://xvatit.com/index.php?do=feedback напишите нам].  

Версия 15:23, 15 ноября 2010

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


Тема: Формы.

Цель: Рассмотреть понятие «формы». Научить создавать формы разных типов.

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

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

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


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

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

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

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

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

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

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




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


Formm1.jpg


Formm2.jpg




Атрибуты.

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




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

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

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




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

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

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


Formm3.jpg


Опции выбора.

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


Formm4.jpg


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


Formm5.jpg


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

Formm7.jpg





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

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

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

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



Formm6.jpg




Вопросы:

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

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

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

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


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

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

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

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

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


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

Если у вас есть исправления или предложения к данному уроку, напишите нам.

Если вы хотите увидеть другие корректировки и пожелания к урокам, смотрите здесь - Образовательный форум.

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