PHP develops simple guestbook HTML front-end page

This section introduces the creation of the front-end HTML front-end page of a simple guestbook

11.png##

<form action="index.php" method="post" >
   <label>用户名:<input name="username" type="text" /></label>
   <label>密码:<input name="password" type="password" /></label>
   <label style="width:65px;"><input type="submit" name="submit_1" id="submit_1" value="登录" /></label>
   <input name="type" type="hidden" value="login" />
   <div style="clear:both; line-height:0; height:0;"></div>
</form>

at Use the <form> form in the upper right corner of the page to create a username and password login box for logging in as an administrator.

# also adds the administrator exit function.

Then use <form> to create the main page content, including nickname, avatar selection, message content, submit button, etc.

<form action="index.php" method="post">
   <div class="form_line">
      <div class="form_text">您的昵称:</div>
      <div class="form_input">
         <input type="text" name="nickname" id="nickname"/>
      </div>
   </div>
   <div class="form_line">
      <div class="form_text">选择头像:</div>
      <div class="form_input" id="form_select_avater">
         <label>
            <img src="/upload/course/000/000/008/581c28b48f9ce285.jpg" width="48" height="48" />
            <input name="avatar" type="radio" value="/upload/course/000/000/008/581c28b48f9ce285.jpg" checked="checked" />
         </label>
         <label>
            <img src="/upload/course/000/000/008/581c290d2a73a781.jpg" width="48" height="48" />
            <input type="radio" name="avatar" value="/upload/course/000/000/008/581c290d2a73a781.jpg"/>
         </label>
         <label>
            <img src="/upload/course/000/000/008/581c294ad5abd805.jpg" width="48" height="48" />
            <input type="radio" name="avatar" value="/upload/course/000/000/008/581c294ad5abd805.jpg"/>
         </label>
         <label>
            <img src="/upload/course/000/000/008/581c297963b40772.jpg" width="48" height="48" />
            <input type="radio" name="avatar" value="/upload/course/000/000/008/581c297963b40772.jpg"/>
         </label>
         <label>
            <img src="/upload/course/000/000/008/581c299ebf62e250.jpg" width="48" height="48" />
            <input type="radio" name="avatar" value="/upload/course/000/000/008/581c299ebf62e250.jpg"/>
         </label>
         <label>
            <img src="/upload/course/000/000/008/581c29dd203e1219.jpg" width="48" height="48" />
            <input type="radio" name="avatar" value="/upload/course/000/000/008/581c29dd203e1219.jpg"/>
         </label>
         <label>
            <img src="/upload/course/000/000/008/581c29fb9448f391.jpg" width="48" height="48" />
            <input type="radio" name="avatar" value="/upload/course/000/000/008/581c29fb9448f391.jpg"/>
         </label>
         <label>
            <img src="/upload/course/000/000/008/581c2a182f4a3149.jpg" width="48" height="48" />
            <input type="radio" name="avatar" value="/upload/course/000/000/008/581c2a182f4a3149.jpg"/>
         </label>
         <br style="clear:both;" />
      </div>
   </div>
   <div class="form_line">
      <div class="form_text">留言内容:</div>
      <div class="form_input">
         <textarea name="message" id="message"></textarea>
      </div>
   </div>
   <div class="form_line">
      <div class="form_text">&nbsp;</div>
      <div class="form_input">
         <input type="hidden" name="type" value="insert" />
         <input type="submit" value="提交" id="submit_0" />
      </div>
   </div>
</form>

Operations of administrator reply and deletion.

<ul class="list">
   <li class="item">
      <div class="a">
         <img src="" width="50" height="50"  />
      </div>
      <div class="n"></div>
      <div class="o">
         ?楼&nbsp;&nbsp;
         <a href="" class="reply_button">回复</a> &nbsp;
         <a href="index.php?type=delete&amp;id=">删除</a>
      </div>
      <div class="t"></div>
      <div class="m">
         <p></p>
      </div>
   </li>
</ul>

Make some preparations for paging messages and displaying the number of messages.

<div class="pagination" >
   当前第?页/
   共?页/
   每页显示?条/
   共?条留言
   <a href="#">上一页</a>
   <a href="#">下一页</a>
   <a href="#">首页</a>
   <a href="#">尾页</a>
</div>

Finally, it can be achieved by adjusting the CSS style.

Continuing Learning
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
*{
margin:0;
padding:0;
list-style-type:none;
font-size:13px;
font-family:'Helvetica Neue',Helvetica,Arial,Sans-serif;
}
body {
background-color: #54B1EB;
}
#all_wrap {
width: 100%;
margin: 0 auto;
margin-top:30px;
background-color:#CCCCCC;
}
#header h1 {
font-size: 36px;
line-height:70px;
}
#header {
margin: 0 auto;
width: 90%;
}
#content {
margin: 0 auto;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
submitReset Code
图片放大关闭