HTML для интерактивных элементов
Интерактивные HTML элементы
Использование нативных HTML возможностей для создания интерактивности.
1. Детализированные интерактивные виджеты
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Интерактивные HTML элементы</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.section {
margin-bottom: 40px;
padding: 25px;
border: 2px solid #e0e0e0;
border-radius: 10px;
background: #fafafa;
}
.section h2 {
color: #333;
margin-bottom: 20px;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
}
/* Стили для details/summary */
.faq-item {
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.faq-item summary {
padding: 15px 20px;
background: #667eea;
color: white;
cursor: pointer;
font-weight: 600;
transition: background 0.3s ease;
}
.faq-item summary:hover {
background: #5a6fd8;
}
.faq-item div {
padding: 20px;
background: white;
line-height: 1.6;
}
/* Стили для progress и meter */
.progress-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 20px;
}
.progress-item {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
progress, meter {
width: 100%;
height: 25px;
margin: 10px 0;
}
/* Стили для dialog */
dialog {
border: none;
border-radius: 12px;
padding: 0;
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
max-width: 500px;
width: 90%;
}
.dialog-header {
background: #667eea;
color: white;
padding: 20px;
border-radius: 12px 12px 0 0;
}
.dialog-content {
padding: 30px;
}
.dialog-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 20px;
border-top: 1px solid #eee;
}
/* Стили для input range */
.range-controls {
background: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
input[type="range"] {
width: 100%;
margin: 15px 0;
}
.range-value {
text-align: center;
font-size: 24px;
font-weight: bold;
color: #667eea;
margin: 10px 0;
}
/* Стили для color picker */
.color-picker {
display: flex;
align-items: center;
gap: 15px;
margin: 15px 0;
}
input[type="color"] {
width: 60px;
height: 60px;
border: none;
border-radius: 8px;
cursor: pointer;
}
.color-preview {
width: 100px;
height: 60px;
border-radius: 8px;
border: 2px solid #ddd;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align: center; margin-bottom: 30px; color: #333;">
Интерактивные HTML элементы
</h1>
<!-- FAQ Section with Details/Summary -->
<section class="section">
<h2>❓ Часто задаваемые вопросы</h2>
<div class="faq-item">
<details>
<summary>Что такое HTML5?</summary>
<div>
<p>HTML5 - это последняя версия языка разметки HTML, которая представляет собой набор новых семантических элементов, API и улучшений для создания современных веб-приложений.</p>
<ul>
<li>Семантические элементы (<header>, <footer>, <article>)</li>
<li>Мультимедиа элементы (<audio>, <video>)</li>
<li>Графические элементы (<canvas>, <svg>)</li>
<li>Новые API (Geolocation, Local Storage)</li>
</ul>
</div>
</details>
</div>
<div class="faq-item">
<details>
<summary>Какие элементы являются интерактивными?</summary>
<div>
<p>HTML предоставляет множество нативных интерактивных элементов:</p>
<table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
<tr><th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Элемент</th><th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">Назначение</th></tr>
<tr><td style="padding: 8px; border-bottom: 1px solid #eee;"><details></td><td style="padding: 8px; border-bottom: 1px solid #eee;">Раскрывающийся блок</td></tr>
<tr><td style="padding: 8px; border-bottom: 1px solid #eee;"><dialog></td><td style="padding: 8px; border-bottom: 1px solid #eee;">Модальное окно</td></tr>
<tr><td style="padding: 8px; border-bottom: 1px solid #eee;"><input type="range"></td><td style="padding: 8px; border-bottom: 1px solid #eee;">Ползунок</td></tr>
<tr><td style="padding: 8px;"><progress></td><td style="padding: 8px;">Индикатор прогресса</td></tr>
</table>
</div>
</details>
</div>
</section>
<!-- Progress and Meter Section -->
<section class="section">
<h2>? Индикаторы прогресса</h2>
<div class="progress-section">
<div class="progress-item">
<h3>Прогресс загрузки</h3>
<progress value="75" max="100">75%</progress>
<p>Загружено 75 из 100 МБ</p>
<h3 style="margin-top: 20px;">Прогресс изучения</h3>
<progress value="45" max="100">45%</progress>
<p>Пройдено 45% курса</p>
</div>
<div class="progress-item">
<h3>Использование диска</h3>
<meter value="0.7" min="0" max="1" low="0.2" high="0.8" optimum="0.5">70%</meter>
<p>Диск заполнен на 70%</p>
<h3 style="margin-top: 20px;">Уровень заряда</h3>
<meter value="0.3" min="0" max="1" low="0.2" high="0.8" optimum="0.5">30%</meter>
<p>Заряд батареи 30%</p>
</div>
</div>
</section>
<!-- Dialog Section -->
<section class="section">
<h2>? Модальные окна</h2>
<button onclick="document.getElementById("infoDialog").showModal()" style="padding: 12px 24px; background: #667eea; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px;">
Показать информационное окно
</button>
<dialog id="infoDialog">
<div class="dialog-header">
<h2 style="margin: 0;">Информация</h2>
</div>
<div class="dialog-content">
<p>Это нативное модальное окно, созданное с помощью элемента <dialog>.</p>
<p>Оно поддерживается современными браузерами и предоставляет встроенные функции:</p>
<ul>
<li>Автоматическое центрирование</li>
<li>Фоновая подложка (backdrop)</li>
<li>Закрытие по ESC</li>
<li>Доступность для screen readers</li>
</ul>
</div>
<div class="dialog-actions">
<button onclick="document.getElementById("infoDialog").close()" style="padding: 10px 20px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">
Закрыть
</button>
<button onclick="alert("Действие выполнено!"); document.getElementById("infoDialog").close();" style="padding: 10px 20px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">
Подтвердить
</button>
</div>
</dialog>
</section>
<!-- Range and Color Controls -->
<section class="section">
<h2>?️ Элементы управления</h2>
<div class="range-controls">
<h3>Регулятор громкости</h3>
<input type="range" min="0" max="100" value="75" class="volume-slider" oninput="updateVolume(this.value)">
<div class="range-value" id="volumeValue">75%</div>
<h3 style="margin-top: 30px;">Регулятор яркости</h3>
<input type="range" min="0" max="100" value="50" class="brightness-slider" oninput="updateBrightness(this.value)">
<div class="range-value" id="brightnessValue">50%</div>
</div>
<div style="margin-top: 30px; padding: 25px; background: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
<h3>Выбор цвета</h3>
<div class="color-picker">
<input type="color" id="colorPicker" value="#667eea" oninput="updateColor(this.value)">
<div class="color-preview" id="colorPreview" style="background: #667eea;"></div>
<span id="colorValue">#667eea</span>
</div>
</div>
</section>
</div>
<script>
function updateVolume(value) {
document.getElementById("volumeValue").textContent = value + "%";
}
function updateBrightness(value) {
document.getElementById("brightnessValue").textContent = value + "%";
}
function updateColor(value) {
document.getElementById("colorPreview").style.background = value;
document.getElementById("colorValue").textContent = value;
}
// Автоматическое обновление прогресса (демо)
let progressValue = 45;
setInterval(() => {
progressValue = progressValue < 100 ? progressValue + 1 : 0;
const progressBar = document.querySelector("progress[value="45"]");
if (progressBar) {
progressBar.value = progressValue;
}
}, 1000);
</script>
</body>
</html>