templates/form.html

<!DOCTYPE html>
<html>
<head>
	<title>my blog</title>
</head>
<style type="text/css">
	body {
		font-family: sans-serif;
		width:800px;
		margin: 0 auto;
		padding:10px;
	}
	.error {
		color:red;
	}
	label{
		display: block;
		font-size: 20px;

	}
	input[type = text]{
		width:400px;
		font-size: 20px;
		padding :2px;

	}
	textarea{
		width: 400px;
		height: 200px;
		font-size:  17px;
		font-family: monospace;
	}
	input[type = submit]{
		font-size: 24px;
	}
	hr{
		margin:20px auto;
	}
	.art + .art{
		margin-top: 20px;
	}
	.art-title{
		font-weight: bold;
		font-size: 20px;

	}
	.art-body{
		margin: 0;
		font-size: 17px;
	}
</style>
<body>
	<h1>Add a new post</h1>
	<br>
	<form method="post">
		<label>
		<div>Title</div>
		<input type="text" name="title" value="{{ title }}">
		</label>
		<label>
			<div>post</div>
			<textarea name="post" value="{{ art }}"></textarea>
		</label>

		<button>submit</button>
		<div class="error">
			<h2>{{ error }}</h2>
		</div>
		<hr>

		{% for art in arts %}
		    <div class="art">
			<div class="art-title">{{ art.title }}</div>
			<pre class="art-body">{{ art.art }}</pre>
			</div>
		{% endfor %}

	</form>
</body>
</html>