HTML-формы
Примеры создания всплывающих экранных форм с выпадающими меню, списками со скроллингом, кнопками. Синтаксис, атрибуты и элементы типовой html-формы. Метод посылки сообщения с данными. Тэги описания и ввода содержимого. Тип и визуальный размер поля ввода.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лабораторная работа |
| Язык | русский |
| Дата добавления | 13.10.2014 |
| Размер файла | 17,2 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Лабораторная работа
на тему: "HTML-формы"
1. Общие сведения о формах
Некоторые WWW browser позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется WEB-броузером, создается специальные экранные элементы, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введенна пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером.
Все формы начинаются тэгом <FORM> и звершаются тэгом </FORM>.
Синтаксис: <FORM METHOD="get | post" ACTION="URL">.
Элементы формы и другие элементы HTML </FORM>.
Атрибуты:
METHOD Метод посылки сообщения с данными из формы. В зависимости от используемого метода вы можете посылать результаты ввода данных в форму двумя путями:
GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы.
POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL в теле запроса.
ACTION описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на программу, обрабатывающую данную форму.
2. Тэги формы
2.1 Textarea
Тэг <TEXTAREA> используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст). Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов <TEXTAREA> и </TEXTAREA>.
Синтаксис: <TEXTAREA NAME="" ROWS= COLS= > </TEXTAREA>
Атрибуты:
NAME Имя поля ввода
ROWS Высота поля ввода в символах
COLS Ширина поля ввода в символах
Пример 1: Example1.html
<HTML>
<HEAD> <meta charset="utf-8"><TITLE>Пример 1</TITLE></HEAD>
<BODY>
<FORM METHOD="post" ACTION="Example2.html">
<TEXTAREA NAME="address" ROWS=10 COLS=50> Москва, Дмитровкое шоссе, д.9Б, офис
</TEXTAREA>
<INPUT TYPE= "SUBMIT" VALUE=" Готово!"><br>
</FORM>
</BODY></HTML>
Когда вы описываете форму, каждый элемент ввода данных имеет тэг <INPUT>. Когда пользователь помещает данные в элемент формы, информация размещается в разделе VALUE данного элемента.
2.2 Input
Тэг <INPUT> используется для ввода одной строки текста или одного слова.
Атрибуты:
TYPE определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Остальные типы должны быть явно указаны:
TEXT Данный тип поля ввода описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).
PASSWORD То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране.
RADIO Данный атрибут позволяет вводить одно значение из нескольких альтернатив.
Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.
CHECKBOX используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую программу, может принимать значение ON или OFF. html форма синтаксис атрибут
IMAGE Данный тип поля ввода позволяет вам связывать графический рисунок с именем поля. При нажатии мышью на какую-либо часть рисунка будет немедленно вызвана ассоциированная форме программа. Значения, присвоенные переменной NAME будут выглядеть так - создается две новых переменных: первая имеет имя, обозначенное в поле NAME с добавлением x в конце имени. В эту переменную будет помещена X-координата точки в пикселах (считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия, а переменная с именем, содержащимся в NAME и добавленным y, будет содержать Y-координату. Все значения атрибута VALUE игнорируются. Само описание картинки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом <IMG>.
HIDDEN Поля данного типа не отображаются браузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение. Это поле используется для передачи в программу статической информации, как то ID пользователя, пароля или другой информации.
SUBMIT Данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.
RESET Данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
NAME Имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.
SIZE определяет визуальный размер поля ввода на экране в символах.
MAXLENGTH определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов браузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Не путать с атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле осуществляется скроллинг. По умолчанию значение MAXLENGTH не ограничено.
CHECKED означает, что CHECKBOX или RADIOBUTTON будет выбран.
SRC URL, указывающий на картинку (используется совместно с атрибутом IMAGE).
VALUE присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен).
Пример 2: Example2.html
<HTML>
<HEAD>
<meta charset="utf-8">
<TITLE>Пример 2</TITLE></HEAD>
<BODY>
< FORM METHOD="post" ACTION="Example1.html">
<INPUT TYPE= "TEXT" NAME="N1" SIZE="20" MAXLENGTH=30" VALUE=" "><br>
<INPUT TYPE= "RADIO" NAME="N2" VALUE=" " CHECKED> 1<br>
<INPUT TYPE= "RADIO" NAME="N2" VALUE=" "> 2<br>
<INPUT TYPE= "SUBMIT" VALUE=" Submit"><br>
</FOFM>
<p>
<form action="Example2.html">
<p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
<p><input type="radio" name="answer" value="a1">Офицерский состав<Br>
<input type="radio" name="answer" value="a2">Операционная система<Br>
<input type="radio" name="answer" value="a3">Большой полосатый мух</p>
<p><input type="submit"></p>
</form>
</p>
</body>
</html>
2.3 Меню выбора в формах
Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм:
2.3.1 Select
Тэг SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню. Тэг SELECT имеет один или более параметр между стартовым тэгом <SELECT> и завершающим </SELECT>. По умолчанию, первый элемент отображается в строке выбора.
<FORM>
<SELECT NAME= >
<OPTION >
<OPTION>
</SELECT>
</FORM>
2.3.2 Select single
Тэг SELECT SINGLE - это то же самое, что и SELECT, но на экране пользователь видит
одновременно несколько элементов выбора (три по умолчанию). Если их больше, то предоставляется
автоматический вертикальный скроллинг. Количество одновременно отображаемых элементов
определяется атрибутом SIZE.
<FORM>
<SELECT SINGLE NAME= SIZE= >
<OPTION>
<OPTION>
<OPTIONS>
</SELECT>
</FORM>
2.3.3 Select multiple
Тэг SELECT MULTIPLE похож на тэг SELECT SINGLE, но пользователь может одновременно выбрать более чем один элемент списка. Атрибут SIZE определяет количество одновременно видимых на экране элементов, атрибут MULTIPLE - максимальное количество одновременно выбранных элементов. Если выбрано одновременно несколько значений, то серверу передаются соответствующее выбранному количество параметров NAME=VALUE с одинаковыми значениями NAME, но разными VALUE.
<FORM>
<SELECT MULTIPLE NAME= SIZE=
MULTIPLE= >
<OPTION>
<OPTION>
<OPTIONS>
</SELECT>
</FORM>
Пример 3: Example3.html
<HTML>
<HEAD><TITLE>Пример 3</TITLE></HEAD>
<BODY>
<FORM METHOD="post" ACTION="Example3.html">
< b>Оставьте отзыв о посещенном сайте</b><p>
<b> Фамилия: </b><br>
<INPUT TYPE="TEXT" NAME="name" SIZE="15" MAXLENGTH="25" VALUE=" "><br>
<b> Имя: </b><br>
<INPUT TYPE="TEXT" NAME="name" SIZE="10" MAXLENGTH="15" VALUE=" "><br>
<b> Отчество:</b><br>
<INPUT TYRE="TEXT" NAME="name" SIZE="15" MAXLENGTH="25" VALUE=" "><br>
<b> Как часто Вы посещаете наш сайт:</b><br>
< SELECT NAME= SIZE=>
<OPTION VALUE=" "> Частота посещения сайта
<OPTION VALUE="0 ">Несколько раз в месяц
<OPTION VALUE="1 "> Несколько раз в неделю
<OPTION VALUE="2 "> Каждый день
<OPTION VALUE="3 "> Это мой первый визит
<OPTION VALUE="4 "> Не посещаю
</SELECT><br>
<b> Ваши замечания:</b><br>
<TEXTAREA NAME="Comments" ROWS=3 COLS=40></TEXTAREA><br>
<INPUT TYPE= "SUBMIT" VALUE=" Submit"><br>
</FORM></BODY></HTML>
3. Задание
1. Отладьте примеры 1 и 2 (там есть синтаксические ошибки). Убедитесь, что они могут работать совместно.
2. Отладьте пример 3.
3. Продолжите, расширьте анкету (пример 3). Используйте при создании формы все возможные атрибуты формы, максимальное число элементов.
4. Создайте страницу с формой "виртуальной торговой тележки".
При нажатии кнопки "Оформить заказ" проверьте, выбран ли хотя бы один из предложенных заказов.
Если ни один из заказов не выбран, выдайте предупреждение: " Не выбран ни один заказ!".
Если хотя бы один заказ выбран, перейдите на страницу регистрации пользователя.
Создайте страницу содержащую сообщение "Необходима регистрация!" и форму для ввода полей "UserName" и "Password", содержащие две кнопки: "OK", "Canсel".
При нажатии кнопки "Canсel" перейдите на страницу с выводом сообщения "Заказы оформляются только для зарегистрированных пользователей!".
При нажатии кнопки "OK" проверьте, введены ли поля "UserName" и "Password", если нет - выдайте предупреждение, если да - перейдите на страницу с выводом сообщения "Ваш заказ оформлен".
Размещено на Allbest.ru
...Подобные документы
Веб технологии в области образования. Создание обучающих сайтов. Содержимое файла HTML-кода, HTML-документ. Дополнительные параметры тэга. Стандартный URL, обязательный параметр. Метод посылки сообщения с данными из формы. Основные тэги таблицы.
курсовая работа [36,1 K], добавлен 19.10.2010Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010Суть и составные части Web технологии, ее базовые элементы. Стандартный язык, предназначенный для создания гипертекстовых документов: HyperText Markup Language (HTML). HTML-тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.
реферат [19,4 K], добавлен 01.04.2010Понятие и функциональные особенности фреймов, внутренняя структура и атрибуты. Мультимедийные возможности HTML, их исследование и оценка эффективности. Формы в соответствующих документах, их назначение, классификация и типы, нестандартное использование.
контрольная работа [130,2 K], добавлен 09.08.2014Характеристика формы как объекта базы данных, предназначенного для ввода и отображения информации. Этапы создания форм в Access, использование режимов Мастер форм и Конструктор. Видовое разделение элементов управления по способу заполнения их данными.
реферат [190,6 K], добавлен 24.07.2011Обеспечение безопасности сайта; значение правильной обработки данных, получаемых из формы. Вызов и условное объявление функции. Передача параметров по значению и ссылке. Обработка HTML-форм; протокол GET. Доступ к полям формы через ассоциированный массив.
презентация [112,7 K], добавлен 21.06.2014Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Использование форм для создания интерактивных web-страниц, обеспечивающих обратную связь - диалог с пользователем. Типы управляющих элементов формы: текстовые поля, переключатели, флажки, раскрывающийся список, текстовая область, отправка и очистка.
презентация [1,2 M], добавлен 15.12.2010Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Классификация электронных изданий учебного назначения: текстовые, изобразительные, звуковые и мультимедийные. Программа Delphi как средство для создания образовательных электронных изданий. Технология создания проекта "Визуальный Html редактор "NVU"".
курсовая работа [1,9 M], добавлен 24.04.2013Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
контрольная работа [29,4 K], добавлен 12.09.2010Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Создание HTML-форм. Ввод многострочного текста. Тег FORM - контейнер форм. Трансляция переменных окружения. Передача данных с помощью формы. Приложения, хранящие данные о регистрации пользователей в базе данных MySQL. Порядок трансляции переменных.
лекция [5,6 M], добавлен 27.04.2009Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.
контрольная работа [322,1 K], добавлен 09.08.2014Термин HTML (HiperText Markup Language) и его реализация. Программы просмотра страниц написанных на зыке манипулирования гипертекстами. Характеристика специальных программ – браузеров: Google Chrome, Opera, Mozilla Firefox. Структура HTML-страницы.
контрольная работа [118,8 K], добавлен 05.04.2015Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011
