1к2с Информационные технологии - КР / МУ к практической работе Создание форм в HTML

1

Министерство образования и науки Российской Федерации Саратовский государственный технический университет Балаковский институт техники, технологии и управления

СОЗДАНИЕ ФОРМ В HTML

Методические указания к выполнению практических работ по дисциплине «Информационные технологии»

для направления «Информационные системы и технологии» всех форм обучения

Одобрено редакционно-издательским советом Балаковского института техники,

технологии и управления

БАЛАКОВО

2

ЦЕЛЬ РАБОТЫ: изучить добавление элементов управления на веб-

страницу и создавать форму в HTML.

ОБЩИЕ ПОНЯТИЯ

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

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

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

Заполнение бланка для оформления заказа в электронном магазине.

Сбор отзывов о веб-сайте

Обеспечение возможности поиска на сайте.

Создание формы

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

находятся внутри тега <form> и являются дочерними по отношению к нему.

Утега <form> есть несколько параметров:

name - имя формы. Атрибут name необходим, если на странице несколько форм

action – данный атрибут позволяет указать адрес серверной программы,

обрабатывающей переданные формой данные. ACTION=”URL”

 method – данный атрибут определяет метод передачи данных на сервер. Он также содержит название протокола, который используется клиентом для отправки данных. Этот атрибут может иметь два значения GET(по умолчанию) и POST. При

3

использовании метода GET данные формы пересылаются в составе адреса URL-

запроса.

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

Элементы ввода HTML

Элемент <input>.

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

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

можно задать различные имена. – TEXT1, TEXT2, или любые другие.

type – этот параметр определяет тип, внешний вид, элемента управления.

Можно задавать следующие значения: TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, FILE, HIDDEN и BUTTON. По умолчанию его значение - TEXT.

size – определяет видимый размер элемента управления. В том случае, если

TYPE имеет значение TEXT или PASSWORD, это атрибут определяет число видимых символов.

maxlength – этот атрибут определяет максимальное количество символов,

которое можно ввести в поле ввода.

value – этот атрибут определяет начальное значение элемента управления.

Однако, если атрибут TYPE элемента управления имеет значение RADIO, то каждый член группы должен иметь уникальное значение.

Рассмотрим, элементы ввода и их свойства и события.

BUTTON – создается элемент управления – кнопка.

Существуют следующие параметры для элемента управления BUTTON:

Name – определяет или возвращает имя кнопки.

Size – определяет или возвращает размер кнопки.

Type – определяет тип присущий данному элементу управления <INPUT

type=button>.

4

Value – определяет или возвращает значение данного элемента управления <INPUT type=button>.

Например, <INPUT TYPE=BUTTON VALUE=”click” NAME=”b1”>

1.Text создает элемент для ввода одной строки текста. Атрибут SIZE

Определяет число символов, которые могут отображаться в элементе ввода TEXT.

Атрибут MAXLENGTH определяет максимальное число символов, которое можно ввести в элемент ввода TEXT.

Например, <INPUT TYPE=text VALUE=”” NAME=”textbox” SIZE=20>

Значение атрибута VALUE определяет начальное значение текстового поля.

2. CHECKBOX

Создает поле для установки флажка, который можно установить или сбросить

(on/off, вкл/выкл, истина/ложь). Эти элементы можно объединять в группу,

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

CHECKED – определяет или возвращает состояние флажка (выбран). Если атрибут задан, то элемент является выбранным по умолчанию.

NAME - определяет или возвращает имя элемента управления.

SIZE - определяет или возвращает размер элемента управления

TYPE - определяет тип данного элемента управления.

<INPUT type=checkbox>

VALUE - определяет или возвращает значение элемента управления – флажок.

<INPUT type=checkbox> 3. RADIO

Создает элемент управления радио-кнопку. Радио-кнопка является переключателем и существует только в составе группы подобных элементов, из которых может быть выбран только один. Функция переключателя заключается в том, что при выборе одного из пунктов отключается выбор другого пункта. Все элементы группы должны иметь одинаковое значение параметра NAME. Значение атрибута value каждой из кнопок должно иметь уникальное значение. Именно это

5

значение будет передано из формы при выборе одного из пунктов.

CHECKED – определяет или возвращает состояние радиокнопки (выбрана или нет).

NAME - определяет или возвращает имя элемента управления.

TYPE - устанавливает тип данного элемента управления.

<INPUT type=radio>

VALUE - определяет или возвращает значение радиокнопки. 4.SUBMIT

Каждая форма должна содержать кнопку SUBMIT. При нажатии на эту кнопку происходит отправка всех данных серверной программе, адрес которой указан в атрибуте ACTION тега <FORM>. Значение атрибута VALUE позволяет изменить надпись на кнопке. Если у этого элемента управления присутствует пара значений name/value, то данные кнопки SUBMIT будут переданы на сервер.

Например, <INPUT TYPE=submit VALUE=”click” NAME=”b1”>

5.IMAGE

Создает элемент в виде графического изображения, действующий аналогично кнопке Submit. Значение атрибута src определяет URL-адрес изображения. Когда пользователь щелкает на элементе Image, данные их формы передаются на сервер. В

момент щелчка определяются координаты указателя мыши x и y (измеряются в пикселах), которые включаются браузером в список параметров формы,

посылаемых на сервер в следующем формате.

Name.x = valueofx

Name.y = valueofy, где name это имя данного элемента управления.

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

6.RESET

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

Например, <INPUT TYPE=reset VALUE=”RESET” NAME=”name”>

6

ТЕХНОЛОГИЯ ВЫПОЛНЕНИЯ РАБОТЫ

Задание 1. Набрать HTML-код, изучить элементы выбора SELECT <HTML>

<HEAD>

<TITLE>Sample Form </TITLE> </HEAD>

<BODY bgcolor=”#ffffcc” Text=”000099”>

<B><CENTER><H2> Sample Stock Survey </H2></CENTER></B>

<SELECT NAME=”RESULT_RadioButton-5”>

<OPTION></OPTION> <OPTION>1) On-line</Option>

<OPTION>2) Touch on trading</OPTION> <OPTION>3) Broker Assistant</OPTION> <OPTION>4) Other</OPTION>

<SELECT></P>

<BR><BR><BR>

<P><INPUT TYPE=”SUBMIT” NAME=”Submit” VALUE=”Submit”>

<INPUT TYPE=”RESET” NAME=”Reset” VALUE=”Reset”></P>

</FORM>

</BODY>

</HTML>

Задание 2. Набрать HTML-код и изучить элемент OPTGROUP, который служит для создания группы пунктов в списке созданном с помощью элемента OPTION. В

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

<HTML>

<Head>

<Title>Using the option Group</Title> </head>

<body>

<FORM action=http://www.mysite.com/FormSite method=”post”>

7

<P><SELECT name=”course”>

<OPTGROUP>

<OPTION Value=”Internetintro”>Introduction to the Internet <OPTION Value=”introweb”> Introduction to the Web page designing

</OPTGROUP>

<OPTION value=”vvbintro”>Visual Basic-An Intriduction

<OPTION value=”vbdev”>Visual Basic – Application Development </OPTGROUP>

</SELECT>

</FORM>

</body>

</html>

Задание 3. Набрать HTML-код, элемент LABEL, который используется для создания текстовых подписей к элементам, с которыми они связаны.

<HTML>

<HEAD>

<TITLE>Using Labels</TITLE> </HEAD>

<H2><CENTER><FONT size=5 color=hotpink face=arial>Персональная информация</FONT></CENTER></H2>

<HR align=center> <P>

<Label for=”firstname”>Имя:</Label>

<Input type=”text” id=”firstname”><BR><BR> <Label for=”lastname”>Фамилия:</Label>

<Input typr=”text” id=”lastname”><Br><Br>

</p>

</form>

</body>

</html>

8

Задание 4. Создать форму о приеме на работу, содержащую кнопки RESET и SUBMIT.

<HTML>

<HEAD>

<TITLE>Прием на работу</TITLE> </HEAD>

<BODY>

<H1><CENTER><Font size=4 color=Forestgreen> Анкета о приеме на работу</CENTER></FONT></H1>

<HR><BR>

<P>

<Label for=”fistname”>Имя” </Label> <Input type=”text” id=”firstname”><BR>

<P> Область интересов

<BR><Br>

<Input type=radio name=”control” value=”0” checked>Программист

<Input type=radio name=”control” value=”1” checked>Инженер

<Input type=radio name=”control” value=”2” checked>переводчик

<Select name=”Control2”>

<OPTION>Нет опыта </Option <OPTION>1 год </Option> <OPTION> 2 года </Option> <OPTION> более 2 лет </Option>

</Select>

<Br>

<P>Ваши комментарии

<BR>

<Textarea name=”control3” cols=”30” rows=”5”>Укажите, пожалуйста , здесь Ваши комментарии.</Textarea>

<BR>

<P><Input Name=”control4” Type=Checkbox checked>Получить подтверждение

<BR>

9

<P><Input type=Submit Value=ok> <INPUT TYPE=RESET Value=Reset> </Form>

</Body>

</HTML>

СОДЕРЖАНИЕ ОТЧЕТА

1.Титульный лист

2.Цель работы

3.HTML-коды с изученными элементами управления.

4.Полученный результат

5.Вывод

ВРЕМЯ, ОТВЕДЕННОЕ НА ВЫПОЛНЕНИЕ РАБОТЫ

Знакомство с основными понятиями – 1 час.

Выполнение индивидуальных заданий – 7 часов.

СПИСОК ЛИТЕРАТУРЫ

1. Автоматизированные информационные технологии: учеб. / под ред.

Г.А.Титаренко.- М.: ЮНИТИ, 2005.

2.Автоматизированные информационные технологии в производстве: Учебник

/Под ред. И.Т. Трубилина - М.: СПбГТУ, 2006.

3.Информационные системы : Учебное пособие / Под ред. В.Н. Волковой, Б.И.

Кузина. СПб.: Изд-во СПбГТУ, 2007. - 216 с.

4. Информационные системы и технологии в экономике и управлении: учеб. /

под ред. проф.В.В. Трофимова. - М.: Высшее образование, 2006.

5. Избачков Ю.С., Петров В.Н. Информационные системы: учеб. для вузов. -

СПб.: Питер, 2005.

СОЗДАНИЕ ФОРМ В HTML

Методические указания к выполнению практических работ по дисциплине «Информационные технологии»

для направления «Информационные системы и технологии» всех форм обучения

Составили: ВАРГИНА Елена Владимировна

Рецензент

Редактор