PHP development post comment function tutorial HTML page

Our HTML page structure mainly consists of reading the comment list <div id="comments"> and

the form for posting comments<div id="post">

The code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表评论</title>
</head>
<body>
<div class="demo">
    <div id="comments">
        <h3>评论列表</h3>
    </div>
    <div id="post">
        <h3>发表评论</h3>
        <p>昵称：</p>
        <p><input type="text" class="input" id="user" /></p>
        <p>评论内容：</p>
        <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p>
        <p><input type="submit" value="发表" id="add" /></p>
        <div id="message"></div>
    </div>
</div>
</body>
</html>

Add our css style

Use CSS to control the appearance of the page, Note that #message is used to control the style of the prompt message after a comment is successfully posted.

<style type="text/css">
    .demo{
        width:500px;
        margin:  0 auto;
    }
    h3{
        font-size:18px
    }
    #comments{
        margin:10px auto
    }
    #post{
        margin-top:10px
    }
    #comments p,#post p{
        line-height:30px
    }
    #comments p span{
        margin:4px; color:#999
    }
    #message{
        position:relative;
        display:none;
        width:100px;
        padding:4px;
        margin-top:-100px;
        margin-left:30px;
        background: #ff0000;
        color: #c286ff;
        z-index:1001
    }
</style>

Continuing Learning

new file

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>发表评论</title> <style type="text/css"> .demo{ width:500px; margin: 0 auto; } h3{ font-size:18px } #comments{ margin:10px auto } #post{ margin-top:10px } #comments p,#post p{ line-height:30px } #comments p span{ margin:4px; color:#999 } #message{ position:relative; display:none; width:100px; padding:4px; margin-top:-100px; margin-left:30px; background: #ff0000; color: #c286ff; z-index:1001 } </style> </head> <body> <div class="demo"> <div id="comments"> <h3>评论列表</h3> </div> <div id="post"> <h3>发表评论</h3> <p>昵称：</p> <p><input type="text" class="input" id="user" /></p> <p>评论内容：</p> <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p> <p><input type="submit" value="发表" id="add" /></p> <div id="message"></div> </div> </div> </body> </html>

submit Reset Code

Automatic operation

PHP development post comment function tutorial HTML page

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]