1.写message_form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<form action="/form" method="post" class="smart-green">
<h1>留言信息
<span>请留下你的信息</span>
</h1>
<label>
<span>姓名 :</span>
<input id="name" type="text" class="error" placeholder="请输入您的姓名">
<div class="error-msg"></div>
</label> <label>
<span>邮箱 :</span>
<input id="email" type="email" class="email" placeholder="请输入您的邮箱地址">
<div class="error-msg"></div>
</label> <label>
<span>联系地址:</span>
<input id="address" type="address" class="address" placeholder="请输入您的联系地址">
<div class="error-msg"></div>
</label> <label>
<span>留言:</span>
<textarea name="message" id="message" placeholder="请输入您的留言"></textarea>
<div class="error-msg"></div>
</label>
<div class="success-msg"></div>
<label>
<span> </span>
<input type="button" class="button" value="提交"/>
</label>
</form>
</body>
</html>
2.写css
.smart-green{
margin-left: auto;
margin-right: auto;
max-width: 500px;
background: #F8F8F8;
padding: 30px 30px 20px 30px;
font: 12px "Microsoft YaHei UI";
color: #666;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.smart-green h1{
font: 12px "Microsoft YaHei UI";
padding: 20px 0px 20px 40px;
display: block;
margin: -30px -30px 10px -30px;
color: #FFF;
background: #9DC45F;
text-shadow: 1px 1px 1px #949494;
border-radius: 2px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
border-bottom: 1px solid #89AF4C;
}
.smart-green textarea{
height: 100px;
padding-top: 10px;
}
.smart-green label{
display: block;
font-size: 11px;
color:#000;
}
.smart-green button:hover{
background-color: #80A24A;
}
.error-msg{
color:red;
margin-top: 10px;
}
.error-msg{
color:#80A24A;
margin-top: 10px;
margin-bottom: 10px;
}3.这两个文件这样放置
4.在message.views 里写 getform函数
5.配置相应的url
6.在setings.py里配置templates和static的路径
7.运行成功，大功告成！
8.回顾流程