42603

Формы в HTML-документах

Лабораторная работа

Информатика, кибернетика и программирование

enctype Атрибут указывающий способ кодирования содержимого формы для передачи программеобработчику. type Атрибут type определяет вид элемента INPUT. Значения атрибута type элемента INPUT: type= text по умолчанию Создание поля ввода в котором можно сразу после загрузки страницы разместить произвольный текст используя атрибут vlue. Например INPUT nme= T1 vlue= Родион type= pssword Создание поля для ввода пароля.

Русский

2013-10-30

80 KB

22 чел.

Лабораторная работа №6. Формы в HTML-документах

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

  •  анкетирования посетителей Web-сайта или страницы
  •  выяснения спроса на предлагаемые Вашей фирмой товары или услуги
  •  выяснения цен на интересующие товары или услуги, предлагаемые несколькими фирмами
  •  получения отзывов, например, на Вашу Web-страницу
  •  проведения опросов

Элементы HTML, необходимые для создания форм

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

Последовательность создания форм. Кнопки для отправки (Submit) и очистки (Reset) форм

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

Элементы форм:

Элемент FORM 

Имеет шаблон элемента-контейнера: <FORM> </FORM>. Внутри элемента могут находиться следующие элементы форм: INPUT, SELECT и TEXTAREA. Последние два элемента могут использоваться самостоятельно, то есть не внутри элемента FORM, главное назначение которого определение области формы на WEB-странице. Этот элемент необходим для построения достаточно сложных форм. После заполнения формы и подтверждения ввода со стороны пользователя, имена элементов формы и соответствующие им значения попарно передаются на сервер, где обрабатываются CGI-программой, предназначенной для форм.

Атрибуты элемента FORM:

action

Обязательный атрибут (остальные атрибуты элемента FORM необязательные). Определяет адрес и имя программы-обработчика формы. Например,

<FORM action="http://Адрес/Имя программы">Элемент формы </FORM.>

Один из вариантов обработки формы - это пересылка данных по электронной почте:

<FORM action="mailto:hia@ois.ural.ru">Элемент формы </FORM.>

method

Атрибут, задающий метод ввода данных на сервере программы-обработчика формы. Допустимые значения GET (по умолчанию)- метод, при котором данные вводятся в командную строку и POST-метод, при котором данные вводятся через специальный ввод (используется чаще).

enctype

Атрибут, указывающий способ кодирования содержимого формы для передачи программе-обработчику.

name

Атрибут, определяющий имя формы для передачи программе-обработчику.

Элемент INPUT

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

Атрибуты элемента INPUT:

name

Этот атрибут обязательно должен присутствовать во всех элементах INPUT, кроме кнопок подтверждения и сброса. Значение атрибута определяет имя поля формы, то есть имя блока данных, введенных в это поле. Программа сервера (CGI) по этому имени может выделить необходимые данные.

value

Значение атрибута задает первоначальный текст поля ввода после загрузки страницы, а также определяет надпись на одном из элементов управления формой - "Кнопке".

checked

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

size

Задает видимую длину поля ввода. Длина выражается в символах. Длина поля по умолчанию зависит от типа браузера.

maxlength

Определяет максимальную длину текстовой строки в поле ввода. По умолчанию вводимая текстовая строка может иметь бесконечную длину.

readonly

Позволяет создать элемент, недоступный для редактирования.

type

Атрибут type определяет вид элемента INPUT.

Значения атрибута type элемента INPUT:

type="text"(по умолчанию)

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


<INPUT name="T1" value="Родион">


type="password"

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


<INPUT type="password" name="P1" value="A">


type="checkbox"

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


<INPUT type="checkbox" name="FL1" >Улучшить графику


<INPUT type="checkbox" name="FL2" >Улучшить содержание


type="radio"

Определение одного переключателя из группы. Для всей группы переключателей необходимо использовать соответствующее количество тегов <INPUT> Если один из переключателей должен быть выбран по умолчанию, то в элемент INPUT этого переключателя вставляется атрибут checked без значения.

Пример записи группы из трех переключателей в символах языка HTML и отображение этой записи браузером:


<DIV>Переключатели</DIV>
<INPUT type="radio" name="S1" value="
Первый">1

<INPUT type="radio" name="S1" value="Второй" checked>2

<INPUT type="radio" name="S1" value="Третий">3

 

type="button"

Создание кнопки произвольного назначения. Атрибут value используется для определения надписи на кнопке. Например,


<INPUT type="button" name="B1" value="Результат">

type="submit"

Создание кнопки, щелчок на которой подтверждает ввод информации в форму. Атрибут value используется для определения надписи на кнопке. Например:

<INPUT type="submit" value="Отправить">


type="reset"

Кнопка для отмены ввода данных в форму. Например,


<INPUT type="reset" value="Сброс">

type="image"

Создание кнопки с рисунком.

Для указания графического файла используется атрибут src. Атрибут align предназначен для позиционирования кнопки с рисунком относительно текста документа. Значения атрибута: left, right, top, bottom, middle. Сочетание текста и графики невозможно. Например,

<INPUT type="image" src="images/hcopter.gif" name="B2" align="bottom">Текст документа...

type="file"

Средство выбора файла для присоединения к форме. Имя файла записывается в поле ввода. Кроме того, браузер автоматически создает рядом с полем ввода кнопку Обзор, которая позволяет запустить стандартный для операционной системы диалог выбора файлов. Например,

<INPUT type="file" name="F1">

type="hidden"

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

<INPUT type="hidden" name="F2" value="2002">


Элемент SELECT

Имеет шаблон элемента-контейнера: <SELECT> <OPTION> </SELECT> Элемент SELECT используется для создания списка или меню, а элемент OPTION - для создания пунктов списка. Количество элементов OPTION определяет число пунктов списка.

Атрибуты элемента SELECT:

  •  name
    Определяет имя меню;
  •  multiple
    Разрешает выбрать сразу несколько пунктов списка. Атрибут не имеет значения;
  •  size
    Определяет количество видимых на экране пунктов списка. По умолчанию видна только первая строка, а при щелчке на кнопке со стрелкой раскрывается полный список. При заданном определенном значении список не раскрывается, а прокручивается. Одновременно видно заданное атрибутом количество пунктов.

Атрибуты элемента OPTION:

  •  selected
    Определяет, какой из пунктов списка должен быть выбран по умолчанию. Не имеет значений. Может быть присвоен только одному пункту списка;
  •  value
    Значение атрибута в паре с именем меню (значением атрибута name ) передается на сервер для обработки формы.

Запись примера в символах языка HTML:


<H4>Пример меню:</H4>
<SELECT name="menu" multiple size=3>
<OPTION value=1>Отлично
<OPTION value=2 selected>Очень хорошо
<OPTION value=3>Хорошо
<OPTION value=4>Удовлетворительно
</SELECT> 

Элемент TEXTAREA

Имеет шаблон элемента-контейнера: <TEXTAREA> </TEXTAREA>.
Элемент TEXTAREA используется для создания области фиксированного размера для ввода или просмотра текста неограниченного размера.

Атрибуты элемента TEXTAREA:

  •  name
    Определяет имя области;
  •  rows
    Определяет количество строк;
  •  cols
    Определяет количество столбцов (в символах);

Запись примера области ввода или просмотра текста в символах языка HTML:
<H4>Пример области ввода:</H4>
<TEXTAREA name="Text1" rows=4 cols=15>
Область ввода или просмотра текста
</TEXTAREA> 

Пример создания формы

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

Запись примера в символах языка HTML:

<TABLE border align=center>
<FORM action="mailto:
Имя@сервер.домен" method="post">

<TR>

<TD>Имя:</TD>
<TD><INPUT type="text" name="imya" value="
Родион"></TD>

</TR>
<TR>

<TD>Фамилия:</TD>
<TD><INPUT type="text" name="familyname"
value="
Иванов"></TD>

</TR>
<TR>

<TD>E-mail:</TD>
<TD><INPUT type="text" name="mail"
value="hia@ois.ural.ru"></TD>

</TR>
<TR>

<TD>Страница производит
хорошее впечатление?</TD>
<TD align="center">
<INPUT type="radio" name="opinion" value="OK">
Да
<INPUT type="radio" name="opinion" value="NOK">
Нет</TD>

</TR>
<TR>

<TD align="center">
<INPUT type="submit" value="
Отослать"></TD>
<TD align="center">
<INPUT type="reset" value="
Очистить"></TD>

</TR>

</FORM>
</TABLE>

Задание к лабораторной работе 

Создать HTML-документ с использованием элементов форм: FORM, INPUT, SELECT и TEXTAREA

Пример

Лабораторная работа №6

Регистрация

Начало формы

Логин:

Пароль:

Ел. почта:

Страна:

Город:

Пол:

М Ж

Подписаться на рассылку:

Фото:

Доп. информация:


 

А также другие работы, которые могут Вас заинтересовать

34719. Античная система мер и весов 20.09 KB
  Первоначально видимо возникли меры длины. Меры длины палец 185 см 1 12 целого 246 см ладонь 739 см ступня 2962 см локоть 463 см двойной шаг 148 м день пути 28 725 м Меры площади югер 25233 м 10 000 квадратных футов 876 м арура 50 квадратных футов 438 м Меры объёма Котила античная единица измерения ёмкости равная 0275 литра. Хус античная единица измерения ёмкости равная 324 литра Меры объёма сыпучих тел медимн четверик 525 л модий четверик 874 л Меры объёма жидких тел метрет...
34720. Основные особенности развития системы мер в средневековой Западной Европе 19.29 KB
  Характерной чертой ее было понятие целого s базовой единицы измерения. Такой принцип унифицировал способы измерения облегчал установление соответствий между линейными квадратными и кубическими мерами. Для измерения больших земельных массивов применялись такие меры как центурии 200 югеров 50377 га и сальтус 4 центурии или 2015 га. Меры измерения объема жидких и сыпучих тел исчислялись несколько поиному.
34721. Меры веса и объема Древнерусского государства 15.12 KB
  Меры веса были очень разнообразны т. Равнялся 10 пудам1638 кг Пуд был наиболее ходовой мерой и равнялся 1638 кг Гривна употреблялась и как мера веса и как денежная единицаслиток серебра весом 400г Гривна весоваяпримерно 40 г серебра Меры объёма: основная мера объёма жидкостей была ведро= 1 40 бочки=10 кружек. Бочка как мера жидкостей применялась в основном в процессе торговли с иностранцами которым запрещалось вести розничную торговлю вином на малые меры.
34722. Измерение длины, расстояния и площади Древнерусского государства 15.32 KB
  существовало 3 вида сажени: Простаярасстояние по прямой между большими пальцами вытянутых в стороны рук=152см Маховаярасстояние по прямой между средними пальцами вытянутых в стороны рук=176см Косаярасстояние от ступни до конца пальцев противоположной руки вытянутой по диагонали. Следующей мерой длины был локотьрасстояние по прямой от локтевого сгиба до конца вытянутого среднего пальца4751см или одна треть сажени.это расстояние между концами вытянутых пальцев по прямой 1 8 сажени. Пядь малая 1819смрасстояние между большим пальцем и...
34723. Денежная система Древнерусского государства 15.01 KB
  происходит дальнейшее усложнение денежной системы. общерусская денежновесовая система как бы разделилась на две местные системы северную и южную. В основу северной системы была положена норма веса принятая в торговле с Западной Европой. Гривна этой системы равнялась 5119 г серебра и являлась древнейшим элементом возникше.
34724. Мера веса и объема в удельных княжествах 12.94 KB
  Основными мерами веса являлись большая96 золотников и малая48 золотников гривенка. В новгородских летописях появляется новая единица весапочка служившая при взвешивании благородных металлов и драгоценных камней. Продолжают употребляться крупные единицы весаберковец равный 10 пудам; пуд; а так же новая мера капь=4 пудам= 65.
34725. Изменение единиц площади, длины и расстояния в удельных княжествах 15.91 KB
  Сохраняется старое деление крупных единиц на мелкие: локоть или стопа = 2 пядям или ногам; сажень = 4 локтям = 8 пядям.и сажень в 174 см. Малой пяди в 19 см соответствовал локоть в 38 см й сажень в 152 см. Помимо указанных размеров саженей локтей и пядей в употреблении была и сажень в 216 см образовавшаяся на основании пяди с кувырком в 27 см1.
34726. Дифференциация денежной системы Руси периода феодальной раздробленности 18.37 KB
  Таким образом гривна из счетной денежной единицы гривны кун превратилась в гривну серебра. По источникам можно проследить что стоимость гривны серебра была в четыре раза больше стоимости гривны кун. Вес этой гривны 195 2045 г. Основные единицы гривны сеЬёрорусской и южнорусской денежных систем существовали в виде слитков.
34727. Метрологическая деятельность Московского государства по унификации системы измерений 16.43 KB
  Если в период феодальной раздробленности можо было наблюдать различие в местных мерах то в Русском централизованном государстве правительство стремится создать единые общегосударственные меры обязательные к употреблению по всей стране. Это мероприятие диктовалось централизаторской политикой правительства. Необходимость введения единых мер и веса диктовалась и экономическими соображениями.