Получите свидетельство
Вход
Создание формы обратной связи на Web-сайте: теория и практическое задание. Презентация предназначена для учеников 10 – 11 классов (общеобразовательный курс (базовый уровень)). Может быть использована в элективном курсе.
Форма в HTML
Создание формы обратной связи на Web-сайте.
Зарубина Ольга Борисовна, кандидат технических наук, учитель информатики и ИКТ МБОУ СОШ №3 Гороховецкого района
05.04.2012
Описание разработки
Форма в HTML
© МБОУ СОШ №3 Гороховецкого района Владимирской области, 2011
© Зарубина О.Б., к.т.н., 2011
Форма в HTML
Форма является замечательным средством обратной связи разработчиков сайтов с пользователями их программных продуктов.
Форма в HTML
Перед размещением формы на странице браузеру необходимо сообщить о наличии формы и однозначно ее идентифицировать в коде с помощью тэга
.
Параметры формы задаются при помощи следующих атрибутов:
- Name - идентифицирует форму ;
- Method – определяет способ передачи введенных в форму данных (может принимать значение GET или POST ;
- Action – указывает URL программы-обработчика данных формы;
Параметры формы задаются при помощи следующих атрибутов:
- Enctype - задает тип данных (метод кодирования) формы, если используется метод отправки POST ; по умолчанию имеет значение « application/x-www-form-urlencoded »; при необходимости передачи файлов используется « multipart/form-data »;
Параметры формы задаются при помощи следующих атрибутов:
- Accept-charset - задает типы допустимых кодировок ;
- Accept – описывает типы файлов, передаваемых серверу.
Если два последних атрибута не указаны, то серверное приложение должно само уметь определить типы передаваемых файлов и кодировку.
….. Форма, имеющая имя « form1 », предназначена для отправки по адресу электронной почты ivanov . mail.ru . " width="640"
Теперь пример:
: ivanov . mail.ru" Enctype= " multipart/form-data "…..
Форма, имеющая имя « form1 », предназначена для отправки по адресу электронной почты ivanov . mail.ru .
Основные элементы
Поля формы находятся внутри контейнера .
…………… .
….
….
…..
8
Основные элементы
Универсальным элементом для создания полей формы является
, который не имеет конечного тэга. Все параметры задаются при помощи атрибутов.
С помощью можно задать простое текстовое поле, поле для ввода пароля, флажки, переключатели, кнопки и другие поля формы.
8
Параметры полей формы задаются при помощи атрибутов:
- Type – определяет тип элемента формы:
Text
Password
однострочное текстовое поле
текстовое поле со скрываемым содержимым (вместо букв – знак * )
Radio
Checkbox
переключатель
File
элемент управления «флажок»
поле выбора файла
Параметры полей формы задаются при помощи атрибутов:
- Type – определяет тип элемента формы:
Image
Button
изображение-ссылка (при нажатии- отправка формы браузером)
кнопка
Submit
Reset
кнопка отправки формы
Hidden
кнопка очистки формы
скрытый элемент управления (не показывается пользователю, но отправляется на сервер)
Параметры полей формы задаются при помощи атрибутов:
- Name – определяет имя элемента формы, однозначно его идентифицирует;
- Value – начальное значение для полей ввода и кнопок, положение флажков и переключателей по умолчанию;
- Disabled – запрещает пользователю работать с элементом управления;
Параметры полей формы задаются при помощи атрибутов:
- Size – задает размер элемента (в разных единицах измерения);
- Maxlenth – задает максимальную длину текста для полей ввода;
- Align – определяет горизонтальное выравнивание для элемента;
Параметры полей формы задаются при помощи атрибутов:
- Checked – задает положение флажка или переключателя;
- Title – описывает элемент (всплывающая подсказка);
- Tabindex – определяет номер элемента при навигации с помощью табуляции;
- Accesskey – задает горячую клавишу для элемента ( Alt+ клавиша).
Текстовое поле, имеющее имя « Log » и размер - 30 букв (данного шрифта), предназначено для ввода информации. Максимальное количество знаков в тексте – 30. По умолчанию введен текст «Введите Login ». Применен стиль с именем « Style ». " width="640"
Теперь несколько примеров:
Введите Login" class=«style »
Текстовое поле, имеющее имя « Log » и размер - 30 букв (данного шрифта), предназначено для ввода информации. Максимальное количество знаков в тексте – 30. По умолчанию введен текст «Введите Login ». Применен стиль с именем « Style ».
Следующий пример:
Текстовое поле, имеющее имя « Password » и размер - 30 букв (данного шрифта), предназначено для ввода пароля. Максимальное количество знаков в тексте – 30. Введенный пользователем текст скрывается (например, заменяется символами «*»). Применен стиль с именем « Style ».
Пол: Мужской Мужской" checked Женский Женский" p Переключатель. Имеет смысл использовать как минимум два переключателя с одним именем (в примере - Sex ( Пол)), объединенных в группу. Тогда у пользователя появится возможность выбора одного из элементов. По умолчанию выбран переключатель «Мужской». " width="640"
Следующий пример:
p Пол: Мужской Мужской" checked Женский Женский" p
Переключатель. Имеет смысл использовать как минимум два переключателя с одним именем (в примере - Sex ( Пол)), объединенных в группу. Тогда у пользователя появится возможность выбора одного из элементов. По умолчанию выбран переключатель «Мужской».
Следующий пример:
Гражданин РФ
Поле «флажок», имеющее имя « Gr ». Задавать значение атрибута Value нужно обязательно, так как именно это значение отправляется серверу, если флажок установлен (в данном примере – по умолчанию).
Кнопка с надписью «Отослать», при нажатии которой браузер отправит форму по указанному адресу. " width="640"
Следующий пример:
Отослать" align="center"
Кнопка с надписью «Отослать», при нажатии которой браузер отправит форму по указанному адресу.
Кнопка с надписью «Очистить», при нажатии которой значения всех элементов управления будут заменены значениями по умолчанию. " width="640"
Следующий пример:
Очистить" align="center"
Кнопка с надписью «Очистить», при нажатии которой значения всех элементов управления будут заменены значениями по умолчанию.
Основные элементы
Кнопки можно задать не только c помощью универсального элемента , но и используя отдельные тэги , . Все параметры задаются при помощи атрибутов.
Приведем пример:
Такие кнопки разработчик формы использует,
когда ему не хватает возможностей
обычных командных кнопок.
Можно вставить рисунок, таблицу и т.п.
Основные элементы
Для задания многострочного текстового поля можно использовать тэг
.
Его размеры задаются при помощи атрибутов rows ( количество строк без прокрутки) и cols (количество символов в строке без переноса).
Текстовое поле, имеющее имя « Formtextarea » и размер - 45 букв (данного шрифта) в строке, всего видны 3 строки. По умолчанию введен текст «Введите адрес». Применен стиль с именем « Style ». " width="640"
Приведен пример:
Адрес:
Введите адрес textarea
Текстовое поле, имеющее имя « Formtextarea » и размер - 45 букв (данного шрифта) в строке, всего видны 3 строки. По умолчанию введен текст «Введите адрес». Применен стиль с именем « Style ».
Основные элементы
Меню (список параметров) является очень удобным элементом управления, позволяющим выбрать один или несколько элементов списка.
Сам элемент задается тэгом
, а отдельные его элементы –
.
поддерживает следующие атрибуты:
- Name - имя меню, название параметра при отправке формы ;
- Size – количество строк одновременно видимых пользователем;
- Multiple – разрешает выделение нескольких пунктов меню .
Остальные атрибуты аналогичны атрибутам .
поддерживает следующие атрибуты:
- Value - текст, который будет отправлен с формой при выборе пункта меню ;
- Selected – выделяет данный пункт по умолчанию .
Остальные атрибуты аналогичны атрибутам .
Пример:
Образование
Начальное
Неполное среднее
Среднее
Среднее профессиональное
Неполное высшее
Высшее
Послевузовское
Основные элементы
Надписи полей формы удобно задавать тэгом .
…………… .
….
….
…..
29
Поля формы выравнивают по вертикали или по горизонтали. Так форма выглядит опрятнее. Используйте ; пробел, например. Можно вписать форму в геометрическую фигуру. Сложную форму можно выровнять, поместив ее поля в ячейки таблицы.
29
ПОМНИТЕ,
форма должна выглядеть достойно:
- выравнивайте поля формы;
- при задании подписей к полям используйте тэг ;
- применяйте стили для украшения текста;
- не применяйте экзотические шрифты.
Не забывайте о пользователях сайта, уважайте их!
29
Практическое задание
- Создать файл c регистрационной анкетой гостя и сохранить его в папке сайта с именем ANK . html .
- Создать файл Style . css со стилями для формы (табл.1). Применить указанные стили.
- Создать по приведенному образцу поля формы и подписи к ним (табл.2).
- Создать три горизонтальные линии длиной 600 px и шириной 3 px , выровнять их по левому краю. Цвет выбрать в соответствие со стилем сайта.
- Создать гиперссылку на созданную страницу с домашней страницы сайта ( index . html ).
29
Практическое задание
29
Практическое задание
Конечный
результат
( примерный )
29
ЛИТЕРАТУРА Кириленко А. Самоучитель HTML. СПб., "Питер", 2006. -272 с. Гончаров А.Ю. Web-дизайн: HTML, JavaScript и CSS.- М.: КУДИЦ-ПРЕСС, 2007. - 320 с. Молли Э. Хольцшлаг. Использование HTML и ХHTML. - М.: Вильямс, 2004. Молли Э. Хольцшлаг. 250 секретов HTML и Web-дизайна. - М.: НТ Пресс, 2006. - 496 с. Венц К., Хаузер Т. Как создать свой сайт.- М.: НТ Пресс, 2006. - 320 с. Создай свой сайт.: Мультимедийный учебник. - М.: "Мультимедиа Технологии и Дис-танционное обучение", 2007. Создание Web-страниц и Web-сайтов. Самоучитель: Учебное пособие/ под.ред. В.Н. Печникова. - М.: Издательство "ТРИУМФ", 2006.- 464 с. Web-мастеринг без посторонней помощи : Учебное пособие / под.ред. Б. Артанова. - М.: 100 книг, 2006. - 336 с. Создание интерактивного web-сайта: учебный курс / Д. Лещев. - СПб.: Питер, 2003. - 544 с.
© МБОУ СОШ №3 Гороховецкого района Владимирской области, 2011
© Зарубина О.Б., к.т.н., 2011
29
Удачи в работе и спасибо за внимание !
© МБОУ СОШ №3 Гороховецкого района Владимирской области, 2011
© Зарубина О.Б., к.т.н., 2011
29
-80%
Курсы дополнительного образования
Создание динамических веб-страниц с помощью PHP и MySQL
Продолжительность 72 часа
Документ: Cвидетельство о прохождении курса
4000 руб.
800 руб.
Получите комплекты видеоуроков + онлайн версии
Форма в HTML (1.95 MB)
0
638
441
Нравится
0
