python web development --django Learning (II) The first successful run django website

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="" method="post" class="smart-green">
        Message
            >H1<< Span > Please leave your message </ span > 
        </ h1 > 
        < label > 
            < span > Name: </ span > 
            < the INPUT the above mentioned id = "name" of the type = "text" class = "error" placeholder = "Please enter your name " > 
            < div class =" error-msg " > </ div > 
        </ label > 

        < label > 
            < span > E-mail:</span>
            <the INPUT the above mentioned id = "Email" of the type = "Email" class = "Email" placeholder = "Please enter your e-mail address" > 
            < div class = "error-msg" > </ div > 
        </ label > 

        < label > 
            < span > address: </ span > 
            < the iNPUT the above mentioned id = "address" of the type = "address" class = "address" placeholder = "Please enter your contact address" > 
            <div class="error-msg"></div>
        </label>

        <label>
            <span>留言:</span>
            <textarea name="msg" id="msg" cols="30" rows="10" placeholder="请输入您的留言"></textarea>
            <div class="error-msg"></div>
        </label>

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

 

2. Write 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. These two documents such placement

 

 4. Write getform function in message.views

 

 The configuration corresponding url

 

 6. Configuration templates in static and in the path setings.py

 

7. run successfully, you're done! 

8. Review Process

 

 

 

 

 

Guess you like

Origin www.cnblogs.com/caiyishuai/p/11920979.html