Шаблон

Шаблон.

Как всегда, нам понадобятся 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 для сохранения примеров кода, которые будут рассматриваться далее.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *