Першин И.Ю.
ИТ-922
Лабораторная работа №5
Тема: HTML Формы. Фреймы.
Цель работы: изучение HTML форм и их элементов, использование форм
для взаимодействия пользователя с HTML-документами. Применение фреймов
при построении веб-страниц.
Порядок выполнения работы
Задание 1: Создайте новую страницу. Составьте форму-анкету (используя методом POST),
включающую в себя следующие поля (все переменные должны быть, читаемы, например: русский
язык - langru, а не C1 или T2, по умолчанию в значениях должны быть ваши данные). Создайте
новую страницу, скопировав предыдущею страницу. Измените метод передачи на GET. Сделайте
соответствующие выводы.
1
Першин И.Ю. ИТ-922
Рисунок 1 – код страницы
Рисунок 1.2 – итог кода.
Выводы о методах POST и GET
POST: Данные передаются в теле запроса, что позволяет отправлять большие объемы данных и
обеспечивает большую безопасность, так как данные не отображаются в URL. Используется для
отправки конфиденциальной информации (например, паролей).
GET: Данные передаются через URL, что позволяет легко делиться ссылками с
предустановленными значениями. Однако это ограничивает объем передаваемых данных и может
быть небезопасным для передачи конфиденциальной информации, так как данные видны в строке
адреса.
2
Першин И.Ю. ИТ-922
1. Создайте новую страницу. Создайте простые поисковые формы к следующим
поисковым системам:
[Link]
[Link]
[Link]
[Link]
[Link]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Поисковые формы</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
h1 {
color: #333;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
form {
margin-bottom: 20px;
}
input[type="text"] {
width: 80%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}
input[type="submit"] {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Поисковые формы</h1>
<div class="form-container">
<h2>Выберите поисковую систему:</h2>
<!-- Поиск в Яндекс -->
<form action="[Link] method="GET">
<input type="text" name="text" placeholder="Поиск в Яндексе" required>
3
Першин И.Ю. ИТ-922
<input type="submit" value="Поиск">
</form>
<!-- Поиск в Рамблер -->
<form action="[Link] method="GET">
<input type="text" name="query" placeholder="Поиск в Рамблере" required>
<input type="submit" value="Поиск">
</form>
<!-- Поиск в Aport -->
<form action="[Link] method="GET">
<input type="text" name="query" placeholder="Поиск в Aport" required>
<input type="submit" value="Поиск">
</form>
<!-- Поиск в Google -->
<form action="[Link] method="GET">
<input type="text" name="q" placeholder="Поиск в Google" required>
<input type="submit" value="Поиск">
</form>
<!-- Поиск в FileSearch -->
<form action="[Link] method="GET">
<input type="text" name="q" placeholder="Поиск в FileSearch" required>
<input type="submit" value="Поиск">
</form>
</div>
</body>
</html>
Рисунок 2 – поисковые запросы
2. Создать фотогалерею с использованием фреймов.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Фотогалерея</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin: 20px 0;
4
Першин И.Ю. ИТ-922
}
.frame-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
iframe {
border: 1px solid #ccc;
width: 500px;
height: 500px;
margin: 10px;
}
</style>
</head>
<body>
<h1>Фотогалерея</h1>
<div class="frame-container">
<iframe src="[Link]" title="Изображение 1"></iframe>
<iframe src="[Link]" title="Изображение 2"></iframe>
<iframe src="[Link]" title="Изображение 3"></iframe>
<iframe src="[Link]" title="Изображение 4"></iframe>
</div>
</body>
</html>
Вывод: Практическим путем я изучил HTML формы и их элементы, использовал формы для
взаимодействия пользователя с HTML-документами. Применил фреймы при построении веб-
страниц.