Задание на лабораторную работу
1 Необходимо разработать приложение, которое в соответствии с заданными свойствами автоматически генерировало элемент языка HTML в новом окне (элемент оговаривается с преподавателем).
2 Создать собственное web-приложение в соответствии со своим вариантом. Вариант указывается преподавателем, задания приведены в таблице 1
Таблица 1
| Вариант | Задание |
| 1 | Дана функция  . Разработать приложение для вычисления значения  .
|
| 2 | Дан ряд  . Разработать приложения для вычисления суммы первых N членов ряда.
|
| 3 | Дан ряд  . Разработать приложения для вычисления суммы первых N членов ряда.
|
| 4 | Дана сумма  . Разработать приложения для вычисления этой суммы при заданных K и X.
|
| 5 | Дана сумма  . Разработать приложения для вычисления этой суммы при заданных K и X.
|
| 6 | Дана функция  . Разработать приложение для вычисления значения .
|
| 7 | Дана функция  . Разработать приложение для вычисления значения .
|
| 8 | Дана функция  . Разработать приложение для вычисления значения .
|
| 9 | Дана функция  . Разработать приложение для вычисления значения .
|
| 10 | Дана функция  . Разработать приложение для вычисления значения .
|
| 11 | Дана функция  . Разработать приложение для вычисления значения .
|
| 12 | Дана функция  . Разработать приложение для вычисления значения . Вычисления заканчиваются, если очередной член ряда становится меньше  .
|
| 13 | Дана функция  . Разработать приложение для вычисления значения . Вычисления заканчиваются, если очередной член ряда становится меньше .
|
| 14 | Дана функция  . Разработать приложение для вычисления значения . Вычисления заканчиваются, если очередной член ряда становится меньше .
|
| 15 | Дана функция  . Разработать приложение для вычисления значения . Вычисления заканчиваются, если очередной член ряда становится меньше .
|
|
|
|
Лабораторная работа 6. ФормаHTML
Цели и задачи
Цель работы. В ходе выполнения этой лабораторной работы Вам необходимо освоить базовые приемы создания форм HTML и внедрить форму в веб-страницу.
Задание:
1.Спроектировать структуру формы для веб-сайта по заданной теме из лабораторной работы 1.
2.Разработать эскиз оформления формы (использовать любой графический редактор).
3.Выполнить верстку формы по разработанному эскизу.
Теоретические сведения
Форма HTML представляет собой документ, созданный с использованием элементов HTML. Назначением формы является сбор информации от пользователей. После того как пользователь заполнит форму и запускает процесс ее обработки, информация из нее попадает в программу, работающую на сервере. Другая программа под названием Common Gateway Interface (CGI) обрабатывает ее. Таким образом пользователь может интерактивно взаимодействовать с сервером Web через Internet.
|
|
|
Элементы формы
Элемент < FORM >используется для обозначения документа как формы. Данный элемент определяет границы использования других элементов, размещаемых в форме.
< FORM > определяется последовательностью элементов < INPUT >, размещенных внутри пары <FORM> и </FORM>. Элемент формы использует как метод, так и действие для описания обработки формой данных, вводимых пользователем:
· метод (GET или POST) - определяет, как программист должен обрабатывать входные данные из формы.
· действие - указывает на URI программы, ответственной за обработку данных.
Данный элемент поддерживает атрибуты ACTION , ENCTYPE , METHOD .
Элемент < INPUT >используется для определения области внутри формы, где собираются данные. Данный элемент представляет собой поле для ввода информации пользователем (обычно одна строка текста). В этом случае требуется наличие атрибута NAMEдля определения наименования переменной поля.
Можно использовать следующие атрибуты:
· MAXLENGTH - ограничивает число вводимых символов (по умолчанию ограничений нет)
· SIZE - размер видимой на экране области, занимаемой текущим полем. Если MAXLENGTH > SIZE, броузер будет прокручивать данные в окне.
|
|
|
· VALUE - определяет начальное значение поля ввода.
атакжеатpибуты: ALIGN , CHECKED , NAME , SRC , TYPE .
Пример 1 - простая форма для ввода:
< P >Улица:<INPUT NAME= “street"><BR>
Город: <INPUT NAME= “city" SIZE= “20" MAXLENGTH= “20"><BR>
Индекс:<INPUT NAME= “zip"SIZE= “5"MAXLENGTH= “5" VALUE= “99999"><BR>
Конец формы
Атрибут CHECKBOX
При создании форм часто бывает необходимо получить ответ пользователя на вопрос типа (Да/Нет) или (Правда/Ложь). Например, нужно выбрать из списка несколько значений. Для создания независимых кнопок в формах можно использовать атрибут CHECKBOX. В зависимости от содержания можно отметить несколько флагов.
Вместе с атрибутом CHECKBOX должны использоваться следующие атрибуты:
· CHECKED - инициализировать данный флаг, как отмеченный
· NAME - наименование поля ввода формы
· VALUE - значение поля ввода
Пример 2 (элемент " Котлеты " указан как зараннее отмеченный):
<P> Выберите Ваше любимое блюдо:
<FORM>
<INPUT TYPE=”checkbox" NAME=”food" VALUE="Пельмени"> Пельмени <BR>
<INPUT TYPE=”checkbox" NAME=”food" VALUE="Голубцы"> Голубцы <BR>
<INPUT TYPE=”checkbox" NAME=”food" VALUE="Котлеты" CHECKED> Котлеты <BR>
</FORM>
|
|
|
Конец формы
Атрибут IMAGE
В зависимости от содержимого формы может случиться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для организации этого используется атрибут IMAGE.
После щелчка пользователя по изображению браузер сохраняет координаты соответствующей точки экрана и принимает всю форму.
Вместе с атрибутом IMAGE должны использоваться следующие атрибуты:
· ALIGN - необязательный атрибут, указывает на положение изображения на экране (аналогично элементу IMAGE)
· NAME - наименование поля ввода формы
· SRC - URI файла - источника изображнения
Пример 3
<P>Выберитеточкунаизображении:
<INPUT TYPE= “image" NAME=”point" SRC=”globe.gif">
Атрибут PASSWORD
Данный атрибут используется для организации ввода пароля без вывода на экран составляющих его символов (вместо символов выводятся звездочки).
Пример 4
<FORM>
<P>Ввведитеимя:
<INPUT NAME=”login">
<P>Ввведитепароль:
<INPUT TYPE=”password" NAME=”p_word">
</FORM>
Атрибут RADIO
Данный атрибут используется для организации выбора одного единственного варианта их нескольких возможных.
Вместе с атрибутом RADIO должны использоваться следующие атрибуты:
· CHECKED - инициализировать данный флаг, как отмеченный
· NAME - наименование поля ввода формы
· VALUE - значение поля ввода
Пример 5
<P>УкажитесортВашеголюбимогопива:
<FORM>
<INPUT TYPE=”radio" NAME=”beer" VALUE=”slav">Славутич<BR>
<INPUT TYPE=”radio" NAME=”beer" VALUE=”obol">Оболонь<BR>
<INPUT TYPE=”radio" NAME=”beer" VALUE=”chern">Черниговское<BR>
</FORM>
Атрибут RESET
Данный атрибут используется для создания кнопки 'Reset'. При нажатии на эту кнопку форма восстанавливает первоначальные значения полей всех элементов <INPUT>, в которых присутствует атрибут RESET.
Вместе с атрибутом RESET может использоваться атрибут VALUE - значение поля ввода по умолчанию.
Пример 6
<P>
<FORM>
Код: <INPUT NAME=”cod"><BR>
Телефон: <INPUT NAME=”phone" SIZE=”6" MAXLENGTH=”6" ><BR>
<P>
<INPUT TYPE=RESET>
</FORM>
Атрибут SELECT
Для организации списков с прокруткой и выпадающим меню можно использовать атрибут < SELECT >. Для определения списка пунктов используются элементы < OPTION > внутри < SELECT >.
Вместе с атрибутом SELECT можно использовать следующие атрибуты:
· NAME - наименование об"екта
· MULTIPLE - позволяет выбрать более чем одно наименование
· SIZE - определяет число пунктов, видимых для пользователя.
SIZE = 1 - броузер выводит список на экран в виде выпадающего меню (видно одно наименование)
SIZE > 1 - броузер представляет на экране обычный список (число - количество видимых наименований)
C элементом OPTION можно использовать следующие атрибуты:
· SELECTED - для первоначального выбора значения элемента по умолчанию
· VALUE - значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно элементу < OPTION >.
Когда пользователь заполняет форму, атрибут NAME элемента <SELECT> состыковывается с атрибутом VALUE элемента для формирования наименования, выбранного пользователем.
Пример 7
<FORM>
<SELECT NAME="Фрукты" SIZE=3 >
<OPTION>Сливы
<OPTION>Груши
<OPTION value=”Lemon_and_orange">Лимоныиапельсины
<OPTION selected>Яблоки
</SELECT>
</FORM>
Конец формы
Атрибут SUBMIT
Данный атрибут используется при окончании ввода пользователем данных. Броузер, в свою очередь выводит данный элемент, как кнопку, на которой пользователь может щелкнуть, чтобы завершить процесс редактирования.
Вместе с атрибутом SUBMIT можно использовать следующие атрибуты:
· NAME - наименование кнопки SUBMIT
· VALUE - значение переменной поля в вашей форме
Пример 8
<P>
<FORM>
Код: <INPUT NAME=”cod"><BR>
Телефон: <INPUT NAME=”phone" SIZE=”6" MAXLENGTH=”6" ><BR>
<P>
<INPUT TYPE=RESET><INPUT TYPE=SUBMIT>
</FORM>
Атрибут TEXTAREA
Данный атрибут используется для ввода большого количества текстовой информации (несколько строк).
Вместе с атрибутом TEXTAREA можно использовать следующие атрибуты:
· NAME - наименование поля
· COLS - число колонок (символов) в текстовой области
· ROWS - число видимых строк в текстовой области
Пример 9
<FORM>
<TEXTAREANAME=”adress" COLS=64 ROWS=6>
Украина
Мариуполь
пр.Нахимова, 99
</TEXTAREA>
</FORM>
Конец формы
Анкета пользователя
Ответьте, пожалуйста, на вопросы:
Начало формы
Ваше имя:
Мужчина
Женщина
Детей
· Украина
· Россия
· Казахстан
· Адрес
Электронный адрес:
Для подтверждения ввода нажмите на кнопку SUBMIT.
Для сброса введенных данных нажмите на кнопку RESET.
Пример заполнения формы
Следующий пример содержит большинство описанных выше элементов.
<P><H3 ALIGN=CENTER> Анкета пользователя </H3>
<P> Ответьте, пожалуйста, на вопросы:
<FORM METHOD=”POST" ACTION=«http://www.ok.com/ok">
<P> Ваше имя: <INPUT NAME=”name" SIZE=«48">
<P> Мужчина <INPUT NAME=”gender" TYPE=RADIO VALUE=”male">
<P> Женщина <INPUT NAME=”gender" TYPE=RADIO VALUE=”female">
<P> Детей <INPUT NAME=”family" TYPE=TEXT>
<P> Страна <INPUT NAME=”family" TYPE=TEXT>
<UL>
<LI> Украина <INPUT NAME=”country" TYPE=”checkbox" VALUE=”Ukraine">
<LI> Россия <INPUT NAME=”country" TYPE=”checkbox" VALUE=”Russian">
<LI> Другая <TEXTAREA NAME=”other" COLS=48 ROWS=3></TEXTAREA>
</UL>
<P> Электронный адрес: <INPUT NAME=”email" SIZE=«42">
<P> Для подтверждения ввода нажмите на кнопку SUBMIT.
<P> Для сброса введенных данных нажмите на кнопку RESET.
<P>
<INPUT TYPE=SUBMIT><INPUT TYPE=RESET>
</FORM>
Когда пользователь щелкает на кнопке SUBMIT, броузер передает сообщение (метод POST) по адресу http://www.ok.com/ok, а тело сообщения будет выглядеть примерно так:
name=Oleg+Ivanov&gender=male&family=2&country=Ukraine&other=None&email=ok@ok.donin.com
Далее специальная программа, размещенная на сервере, начнет обработку ответов пользователя.
Дата добавления: 2018-04-04; просмотров: 581; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!