Как всегда, нам понадобятся HTML-документ и таблица CSS-стилей, с помощью которых мы создадим и украсим поля формы для ввода и отображения информации. Для того чтобы добавить в базу данных сведения о фильме, нужно будет ввести ключевое слово, название фильма и год его производства.
Листинг 11.1. Шаблон для работы с API IndexedDB
<!DOCTYPE html>
<html lang="ru">
<head>
<title>API IndexedDB</title>
<link rel="stylesheet" href="indexed. css">
<script src="indexed. js"></script>
</head>
<body>
<section id="formbox">
<form name="form">
<p>Ключевое слово:<br><input type="text" name="keyword" id="keyword"></p>
<p>Название:<br><input type="text" name="text" id="text"></p> <p>Год:<br><input type="text" name="year" id="year"></p> <p><input type="button" name="save" id="save" value="Сохранить"></p>
</form>
</section>
<section id="databox">
Информация недоступна </section>
</body>
</html>
CSS-стили определяют поля формы и способ визуализации информации на экране.
Листинг 11.2. Стили полей формы
#formbox{ float: left; padding: 20px;
Листинг 11.2 (продолжение) border: 1px solid #999999;
}
#databox{ float: left; width: 400px; margin-left: 20px; padding: 20px; border: 1px solid #999999;
}
#keyword, #text{ width: 200px;
}
#databox > div{ padding: 5px;
Border-bottom: 1px solid #999999;
}
Вам понадобятся HTML-файл для шаблона из листинга 11.1 и CSS-файл с именем indexed. css для стилей из листинга 11.2. Также создайте JavaScript-файл под названием indexed. js для сохранения примеров кода, которые будут рассматриваться далее.
Добавить комментарий