Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Другие методич. материалы / «Формы на Web-страницах»
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 26 апреля.

Подать заявку на курс
  • Информатика

«Формы на Web-страницах»

библиотека
материалов

hello_html_67f48db5.gifhello_html_5a6a714a.gifhello_html_1c87fb21.gifhello_html_6bf0c04f.gifhello_html_7122a174.gifhello_html_585fec42.gifhello_html_mcd3552.gifhello_html_585fec42.gifhello_html_mcd3552.gifhello_html_110278ba.gifhello_html_110278ba.gifhello_html_1a02e55c.gifhello_html_6c28719.gifhello_html_m3a4409b8.gifФормы на Web-страницах.

Форма — это инструмент, с помощью которого HTML-документ может отправить информацию в заранее определенную точку внешнего мира. Формы применяються для опроса посетителей, покупки чего-либо (заказа товара(ов)), отправки электронной почты.

Принцип работы форм следующий: посетитель, зашедший к вам на сайт заполняет определенную форму (вносит туда нужные данные), а после нажатия определенной кнопки форма берет данные из заполненых полей и отправляет их в назначенное место.

Формы размещаются между тэгами . HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тэг может содержать следующие атрибуты:

ACTION

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

METHOD

Определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

ENCTYPE

Определяет, каким образом данные из формы будут закодированы для передачи обработчику.

Обратите внимание на первую строку в таблице выше. В правом столбце Вы прочитали такую фразу: ... обработчик формы. Это значит, что кроме файла с формой (куда вносятся данные) существует еще один файл (или скрипт), который обрабатывает полученные из формы данные, а уже затем отправляет дальше. Обычно это происходит скрыто и посетитель сайта даже не догадывается об этом. Но про Обработчик мы поговорим позже.

Для внесения информации пользователем в форму используется элемент Это и есть поля, в которые пользователь вводит информацию. Каждый элемент включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля). В таблице ниже представлены основные типы, применяемых элементов :

 

TYPE=text

Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=число (ширина окна ввода в символах) и MAXLENGTH=число (максимально допустимая длина вводимой строки в символах):



Простая форма с полем шириной 20 символов для ввода текста. По умолчанию в окне находится текст Сайт LuksWeb.ru, который пользователь может изменить.

 

TYPE=password

Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*):


 

TYPE=radio

Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка:

Да
Нет
Возможно

Да
Нет
Возможно

Определяет группу из трех радиокнопок, подписанных Yes, No и Possible. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes. Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible. Одновременно можно выбрать только одно значение.

 

TYPE=checkbox

Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов:

Процессоры
Видеоадаптеры
Сканеры
Модемы

Процессоры
Видеоадаптеры
Сканеры
Модемы

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: Comp=Video и Comp=Modem. Одновременно можно выбрать любое количество значений.

 

TYPE=hidden

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



Определяет скрытую переменную version, которая передается обработчику со значением 1.1.

TYPE=submit

Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику:

Отправить">


 

TYPE=reset

Определяет кнопку, при нажатии на которую очищаються поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name:


 

Формы могут содержать поля для ввода большого текста :

 Наберите здесь своё сообщение



Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику. Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах. Текст, размещенный между тэгами , представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.

 

Кроме всего этого все формы могут содержать меню выбора или как иногда говорят "Выпадающий список", которое начинается открывающимся тэгом (содержит обязательный атрибут NAME, определяющий имя меню) и завершается закрывающимся . Между ними находятся тэги , определяющие элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тэг может включать атрибут selected, показывающий, что данный элемент выбран/отмечен по умолчанию.

имя"> 
Телевизор 
Телефон 
текст


 

Тэг может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство Браузеров показывают меню в виде окна, в котором находятся элементы меню. Высоту окна в строках можно задать атрибутом SIZE=число.

имя"> 
Телевизор 
Телефон 
текст


 

На этом мы закончим наш первый теоритический урок по формам, в следующем уроке, мы рассмотрим конкретные примеры использования форм на сайте.

Удачи.

Интерактивные формы на Web-страницах

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

Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.
Вся форма заключается в контейнер

.

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

Текстовые поля.
Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации.
Текстовые поля создаются с помощью тэга

со значением атрибута TYPE="text". Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, за-дающее длину поля ввода в символах.
Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки


.



Переключатели.
Далее, мы хотим выяснить, к какой группе пользователей относит себя посетитель. Предложим выбрать ему один из нескольких вариантов: учащийся, студент, учитель.
Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга «INPUT» со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим значения «учащийся», «студент» и «учитель». Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно оно передается серверу.

Флажки.
Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками.
Флажки создаются с помощью тэга «INPUT» со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME="boxl", NAME="box2" и т. д.

Еще одним обязательным атрибутом является VALUE, которому присвоим значения «WWW», «e-mail» и «FTP». Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно оно пере-дается серверу.
Поля списков.
Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант.
Для реализации раскрывающегося списка используется контейнер

, в котором каждый элемент списка определяется тэгом

.

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

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

с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS — число столбцов области.

Отправка данных из формы.
Отправка введенной в фор-му информации осуществляется с помощью щелчка по кнопке.
Кнопка создается с помощью тэга "INPUT". Атрибуту TYPE необходимо присвоить значение «submit», а атрибуту VALUE, который задает надпись на кнопке, присвоить значение «Отправить».

Щелчком по кнопке Отправить можно отправить данные из формы на определенный адрес электронной почты. Для этого атрибуту ACTION контейнера "FORM" надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных:

...

































Чаганская средняя школа











Реферат

На тему: «Формы на Web-страницах»











Подготовил: ученик 11’Б’ класса

Акжигитов И.

Проверила: Құрмангазиева А.Н.







2014 год.

Краткое описание документа:

Форма — это инструмент, с помощью которого HTML-документ может отправить информацию в заранее определенную точку внешнего мира. Формы применяються для опроса посетителей, покупки чего-либо (заказа товара(ов)), отправки электронной почты. Принцип работы форм следующий: посетитель, зашедший к вам на сайт заполняет определенную форму (вносит туда нужные данные), а после нажатия определенной кнопки форма берет данные из заполненых полей и отправляет их в назначенное место.Обратите внимание на Для внесения информации пользователем в форму используется элемент
Автор
Дата добавления 10.05.2014
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров755
Номер материала 100301051003
Получить свидетельство о публикации

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

Подайте заявку сейчас - https://infourok.ru/konkurs


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ


Идёт приём заявок на международный конкурс по математике "Весенний марафон" для учеников 1-11 классов и дошкольников

Уникальность конкурса в преимуществах для учителей и учеников:

1. Задания подходят для учеников с любым уровнем знаний;
2. Бесплатные наградные документы для учителей;
3. Невероятно низкий орг.взнос - всего 38 рублей;
4. Публикация рейтинга классов по итогам конкурса;
и многое другое...

Подайте заявку сейчас - https://urokimatematiki.ru

Похожие материалы

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