Некоммерческое акционерное общество

«Алматинский университет энергетики и связи» имени Гумарбека

Даукеева
Институт Информационных Технологий
Кафедра Информационных систем и кибербезопасности

Отчет
По лабораторной работе №2

По дисциплине: «Скриптовые языки»

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

Специальность: B-058 Системы Информационной Безопасности

Группа: СИБ 19-5
Выполнила: Филимонова А.А
Проверила: Ст. преп. Альмуратова К.Б.
________________________________________« ___ »_______ 2021 г.

Алматы 2021
 Содержание

Введение...............................................................................................................3
Цель лабораторной работы:...............................................................................4
Задания:................................................................................................................4
Упражнение 1......................................................................................................4
Упражнение 2......................................................................................................5
Упражнение 3......................................................................................................7
Упражнение 4....................................................................................................10
Упражнение 5....................................................................................................11
Вывод..................................................................................................................14
Список использованных источников..............................................................15
 Введение

HTML (HyperText Markup Language) - язык разметки гипертекста -

предназначен для создания Web-страниц. Под гипертекстом в этом случае
понимается текст, связанный с другими текстами указателями-ссылками.
HTML представляет собой достаточно простой набор кодов, которые
описывают структуру документа. HTML позволяет выделить в тексте
отдельные логические части (заголовки, абзацы, списки и т.д.), поместить
на Web-страницу подготовленную фотографию или картинку,
организовать на странице ссылки для связи с другими документами.
HTML не задает конкретные и точные атрибуты форматирования
документа. Конкретный вид документа окончательно определяет
только программа-браузер на компьютере пользователя Интернета. 
HTML также не является языком программирования, но web-страницы
могут включать в себя встроенные программы-скрипты на языках
Javascript и Visual Basic Script и программы-апплеты на языке Java.
Даже, если вы не собираетесь в дальнейшем редактировать
"вручную" текст HTML (предполагая использовать графические
редакторы), знание языка HTML даст вам возможность как лучше
использовать эти средства, так и увеличит ваши шансы сделать HTML-
документ более доступным и "читаемым" при просмотре браузерами
разных фирм.
Основными компонентами HTML являются:
Тег (tag). Тег HTML это компонент, который командует Web-
броузеру выполнить определенную задачу типа создания абзаца или
вставки изображения.
Атрибут (или аргумент). Атрибут HTML изменяет тег. Например,
можно выровнять абзац или изображение внутри тега.
Значение. Значения присваиваются атрибутам и определяют
вносимые изменения. Например, если для тега используется атрибут
выравнивания, то можно указать значение этого атрибута. Значения могут
быть текстовыми, типа left или right, а также числовыми, как например
ширина и высота изображения, где значения определяют размер
изображения в пикселях.
Теги представляют собой зарезервированные последовательности
символов, начинающиеся с < (знака меньше) и заканчивающиеся > (знаком
больше). 
Закрытие тега отличается от открытия только наличием символа '/'.
 Цель лабораторной работы:
Ознакомление с тегами форм HTML.

Задания:
Упражнение 1

Создайте файл form.html и разместите в нем следующую форму.

Требования к оформлению:
1. поле "Пароль" должно иметь размер 10 символов и не отображать
введенные данные;
2. среди всех номеров вопроса только один может быть выбран, по
умолчанию выбранным должен быть вопрос под номером один;
3. поле для ответа на вопрос должно содержать четыре строки по
сорок символов, первоначальное значение – "???";
4. кнопка "Очистить форму" должна восстанавливать
первоначальный вид формы.

<html>
<body>
<form>
Фамилия:
<input type="text" name="Фамилия">
<br>
Пароль:
<input type="password" name="пароль" maxlength="10">
<br>
Выберите вопрос:
<br>
<input type="radio" name="вопрос" value="1" checked> 1
<input type="radio" name="вопрос" value="2"> 2
<input type="radio" name="вопрос" value="3"> 3
<input type="radio" name="вопрос" value="4"> 4
<input type="radio" name="вопрос" value="5"> 5
<br>
Введите ответ на вопрос:
<br>
<textarea rows="4" cols="40">???</textarea>
<br>
<input type="reset" value="Очистить форму">
<input type="submit" value="Отослать данные"
</form>
</body>
</html>
 На рисунке 1 приводится скрин экрана с запущенным в браузере и
созданным мною файлом с сделанной формой 1.

Рисунок 1 – Созданная форма 1

Упражнение 2

Создайте форму следующего вида (рисунок 2).

Рисунок 2 – Упражнение 2 (пример)

<html>
<body>
<h1>ЗАО Птицефабрика №1</h1>
<form>
Фамилия:
<input type="text" name="Фамилия">
 <br>
Инициалы:
<input type="text" name="Инициалы">
<br>
Пароль:
<input type="password" name="Пароль">
<br>
Адрес получателя:
<input type="text" size="20" name="Адрес получателя">
<br>
Количество:
<input type="text" size="10" name="Количество">
<br>
Тип <select name="Вид птицы">
<option value="Куриные"> Куриные
<option value="Утиные"> Утиные
<option value="Страусиные"> Страусиные
</select>
<select name="Тип">
<option value="Отборные"> Отборные
<option value="1 Сорт"> 1 Сорт
<option value="2 Сорт"> 2 Сорт
</select>
<br>
Доставка
<input type="radio" name="доставка" value="Почтой"> Почтой
<input type="radio" name="доставка" value="Электронно">
Электронно
<input type="radio" name="доставка" value="Курьером"> Курьером
<br>
Требуется накладная
<input type="checkbox" name="Требуется накладная">
<br>
Дополнительная информация <textarea> </textarea>
<br>
<input type="submit" value="Заказать">
<input type="reset" value="Отменить">
</form>
</body>
</html>
На рисунке 3 приводится скрин экрана с запущенным в браузере и
созданным мною файлом с сделанной формой 2.
 Рисунок 3 – Созданная форма 2

Упражнение 3

Создайте новую страницу. Далее составьте форму-анкету (используя

методом POST), включающую в себя следующие поля (все переменные
должны быть, читаемы, например: русский язык - langru, а не C1 или T2,
по умолчанию в значениях должны быть ваши данные):
Фамилия;
Имя;
Отчество;
E-mail;
Выбор страны (обязательно выпадающим SELECT, стран не менее
10-ти) Выбор города (обязательно с помощью radio, переменные должны
быть одинаковыми, не менее 5-ти);
Выбор языка (обязательно с помощью checkbox, переменные должны
быть разными, не менее 5-ти);
Выбор профессий (обязательно с помощью SELECT MULTIPLE,
переменные должны быть разными, не менее 10-ти);
Пароль;
Дополнительная информация (обязательно с помощью TEXTAREA);
Кнопка для загрузки информации на сервер;
Кнопка для очистки формы.
<html>
<body>
<h1>Анкета</h1>
 <form>
Фамилия:
<input type="text" name="Фамилия">
<br>
Имя:
<input type="text" name="Имя">
<br>
Отчество:
<input type="text" name="Отчество">
<br>
E-mail:
<input type="text" name="E-mail:">
<br>
Выбор страны
Тип <select name="Страна">
<option value="Австралия"> Австралия
<option value="Армения"> Армения
<option value="Беларусь"> Беларусь
<option value="Венгрия"> Венгрия
<option value="Греция"> Греция
<option value="Иран"> Иран
<option selected value="Казахстан"> Казахстан
<option value="Корея"> Корея
<option value="Россия"> Россия
<option value="Япония"> Япония
</select>
<br>
Город
<input type="radio" name="город" value="Капчагай"> Капчагай
<input type="radio" name="город" value="Алматы"> Алматы
<input type="radio" name="город" value="Нурсултан"> Нурсултан
<input type="radio" name="город" value="Актобе"> Актобе
<input type="radio" name="город" value="Павлодар"> Павлодар
<br>
Выбор языка
<input type="checkbox" name="Выбор языка"> Русский
<input type="checkbox" name="Выбор языка"> Казахский
<input type="checkbox" name="Выбор языка"> Английский
<input type="checkbox" name="Выбор языка"> Французский
<input type="checkbox" name="Выбор языка"> Немецкий
<br>
Выбор профессий
 <select multiple name="Выбор профессий">
<option value="Информатика"> Информатика
<option value="СИБ"> СИБ
<option value="IT-технологии"> IT-технологии
<option value="Энергетика"> Энергетика
<option value="Телекоммуникации"> Телекоммуникации
<option value="Сотовая связь"> Сотовая связь
<option value="Доктор"> Доктор
<option value="Программист"> Программист
<option value="Ветеринар"> Ветеринар
<option value="Повар"> Повар
</select>
<br>
Пароль
<input type="password" name="Пароль">
<br>
Дополнительная информация <textarea> </textarea>
<br>
<input type="reset" value="Очистить">
<input type="submit" value="Зарегестрироваться">
</form>
</body>
</html>
На рисунке 4 приводится скрин экрана с запущенным в браузере и
созданным мною файлом с сделанной формой 3.

Рисунок 4 – Созданная форма 3

 Упражнение 4

1. Создайте новую страницу. Создайте простые поисковые формы к

следующим поисковым системам:
www.yandex.ru
www.rambler.ru
www.aport.ru
www.google.com
www.filesearch.ru
URL обработчика и переменные посмотрите в исходниках страниц
соответствующих поисковых систем.
1. Проверьте работоспособность форм на сервере.
2. Приведите страницу к единому виду вашего сервера, проставьте
мета данные.
3. Приведите страницу к единому виду вашего сервера, проставьте
мета данные.
На рисунке 5 приводится скрин экрана с запущенным в браузере и
созданным мною файлом с сделанной формой 4.

Рисунок 5 – Созданная форма 4

 Упражнение 5

Необходимо создать анкету web-разработчика согласно

изображению. Элементы располагать в табличном виде (рисунок 6).

Рисунок 6– Упражнение 5 (пример)

<html>
<body>
<h1 align=center>Анкета web-разработчика</h1>
<table align=center border="3">
<tr>
<td>
Регистрационное имя
</td>
<td>
<form>
<input type="text" name="Регистрационное имя">
</td>
</tr>
<tr>
<td>
Пароль
<br>
Подтвердите пароль
</td>
<td>
<form>
<input type="password" name="Пароль">
<br>
<input type="password" name="Подтвердите пароль">
</td>
</tr>
<tr>
<td>
Ваша специализация
</td>
<td>
<form>
<select name="Ваша специализация">
<option value="Web-мастер"> Web-мастер
<option value="Информатика"> Информатика
<option value="СИБ"> СИБ
<option value="IT-технологий"> IT-технологий
<option value="Телекоммуникаций"> Телекоммуникаций
<option value="Сотовая связь"> Сотовая связь
<option value="Программист"> Программист
</select>
</td>
</tr>
<tr>
<td>
Пол
</td>
<td>
<form>
<input type="radio" name="Пол" value="Муж"> Муж
<input type="radio" name="Пол" value="Жен"> Жен
</td>
</tr>
<tr>
<td>
Ваши навыки
</td>
<td>
<form>
<input type="checkbox" name="Ваши навыки"> знание HTML и CSS
 <br>
<input type="checkbox" name="Ваши навыки"> знание Perl
<br>
<input type="checkbox" name="Ваши навыки"> знание ASP
<br>
<input type="checkbox" name="Ваши навыки"> знание Adobe
Photoshop
<br>
<input type="checkbox" name="Ваши навыки"> знание Java
<br>
<input type="checkbox" name="Ваши навыки"> знание JavaScript
<br>
<input type="checkbox" name="Ваши навыки"> знание Flash
</td>
</tr>
<tr>
<td>
Дополнительные сведения о себе
</td>
<td>
<form>
<textarea> </textarea>
</td>
</tr>
<tr>
<td colspan="2">
<form>
<input type="submit" value="Зарегестрировать">
<input type="reset" value="Очистить форму">
</td>
</tr>
</body>
</html>

На рисунке 7 приводится скрин экрана с запущенным в браузере и

созданным мною файлом с сделанной формой 5.
 Рисунок 7 – Созданная форма 5

Вывод

HTML расшифровывается как Hyper Text Programming Language,

который был создан Berners-Lee. Первая стандартная спецификация HTML
была опубликована в 1995 году. Это один из общепринятых языков
программирования для разработки интерактивных веб-сайтов и веб-
страниц. В настоящее время HTML используется с другими языками,
такими как Javascript, CSS, который придает веб-сайту больший вид и
удобство, предоставляя другой цвет шрифта, размер шрифта и
выравнивание по всему контенту.
HTML - это язык разметки, поэтому он использует простые теги для
разметки и форматирования содержимого. Эти теги заключены в угловые
скобки, такие как
Достоинства HTML:
- Сохраняет информацию о выбранных автором шрифтах,
кодировках, стилях, цвете текста
- Читается на различных компьютерных платформах
- Многие программы (в их числе бесплатные) умеют с ним работать
- Это открытый стандарт
 Список использованных источников

1. https://html5book.ru/osnovy-html/
2. https://ru.education-wiki.com/1711441-advantages-of-html
3. https://zen.yandex.ru/media/id/5d39a870e6cb9b00ad2c6c63/
kak-fishery-ugoniaiut-elektronnuiu-pochtu-5d69598395aa9f00aeaedf3f?
utm_source=serp
4. https://docs.google.com/forms/u/0/?tgif=d