php真的挺好玩的！
先写出前台页面index.php：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 label{ 8 width: 60px; 9 display: inline-block; 10 text-align: right; 11 margin: 0 10px 0 0; 12 } 13 @media screen and (min- 360px) and (max- 767px) { 14 .content-div{ 15 width: 90%; 16 margin: 5% auto; 17 } 18 .form-ele{ 19 width: 50%; 20 margin: auto; 21 } 22 .content-div h2.head-title{ 23 text-align: center; 24 } 25 .form-ele p input[type="text"]{ 26 width: 80%; 27 } 28 .f-messages{ 29 width: 80%; 30 resize: none; 31 height: 100px; 32 padding: 10px; 33 box-sizing: border-box; 34 } 35 .submit-btn{ 36 width: 90px; 37 height: 35px; 38 background: rgba(0,233,2,0.4); 39 border: none; 40 color: block; 41 font-size: 1.2em; 42 cursor: pointer; 43 -webkit-transition:background 0.5s; 44 -ms-transition:background 0.5s; 45 -o-transition:background 0.5s; 46 transition:background 0.5s; 47 } 48 .submit-btn:hover{ 49 background: rgba(0,233,2,0.7); 50 } 51 } 52 @media screen and (min- 768px) and (max- 1199px){ 53 .content-div{ 54 width: 90%; 55 margin: 5% auto; 56 } 57 .form-ele{ 58 width: 50%; 59 margin: auto; 60 } 61 .content-div h2.head-title{ 62 text-align: center; 63 } 64 .form-ele p input[type="text"]{ 65 width: 70%; 66 } 67 .f-messages{ 68 width: 80%; 69 resize: none; 70 height: 100px; 71 padding: 10px; 72 box-sizing: border-box; 73 } 74 .submit-btn{ 75 width: 90px; 76 height: 35px; 77 background: rgba(0,233,2,0.4); 78 border: none; 79 color: block; 80 font-size: 1.2em; 81 cursor: pointer; 82 -webkit-transition:background 0.5s; 83 -ms-transition:background 0.5s; 84 -o-transition:background 0.5s; 85 transition:background 0.5s; 86 } 87 .submit-btn:hover{ 88 background: rgba(0,233,2,0.7); 89 } 90 } 91 @media screen and (min- 1200px) and (max- 1365px) { 92 .content-div{ 93 width: 90%; 94 margin: 5% auto; 95 } 96 .form-ele{ 97 width: 50%; 98 margin: auto; 99 } 100 .content-div h2.head-title{ 101 text-align: center; 102 } 103 .form-ele p input[type="text"]{ 104 width: 80%; 105 } 106 .f-messages{ 107 width: 80%; 108 resize: none; 109 height: 100px; 110 padding: 10px; 111 box-sizing: border-box; 112 } 113 .submit-btn{ 114 width: 90px; 115 height: 35px; 116 background: rgba(0,233,2,0.4); 117 border: none; 118 color: block; 119 font-size: 1.2em; 120 cursor: pointer; 121 -webkit-transition:background 0.5s; 122 -ms-transition:background 0.5s; 123 -o-transition:background 0.5s; 124 transition:background 0.5s; 125 } 126 .submit-btn:hover{ 127 background: rgba(0,233,2,0.7); 128 } 129 } 130 @media screen and (min- 1366px) and (max- 1920px) { 131 .content-div{ 132 width: 90%; 133 margin: 5% auto; 134 } 135 .form-ele{ 136 width: 50%; 137 margin: auto; 138 } 139 .content-div h2.head-title{ 140 text-align: center; 141 } 142 .form-ele p input[type="text"]{ 143 width: 80%; 144 } 145 .f-messages{ 146 width: 80%; 147 resize: none; 148 height: 100px; 149 padding: 10px; 150 box-sizing: border-box; 151 } 152 .submit-btn{ 153 width: 90px; 154 height: 35px; 155 background: rgba(0,233,2,0.4); 156 border: none; 157 color: block; 158 font-size: 1.2em; 159 cursor: pointer; 160 -webkit-transition:background 0.5s; 161 -ms-transition:background 0.5s; 162 -o-transition:background 0.5s; 163 transition:background 0.5s; 164 } 165 .submit-btn:hover{ 166 background: rgba(0,233,2,0.7); 167 } 168 } 169 </style> 170 </head> 171 <body> 172 173 <div class="content-div"> 174 <h2 class="head-title">留言</h2> 175 <form action="add.php" method="post" class="form-ele"> 176 <p> 177 <label for="names">姓名:</label><input id="names" type="text" name="names"> 178 </p> 179 <p> 180 <label for="qq">QQ:</label><input id="qq" type="text" name="qq"> 181 </p> 182 <p> 183 <label for="email">email:</label><input id="email" type="text" name="email"> 184 </p> 185 <p> 186 <label for="messages">留言:</label><textarea id="messages" name="messages" class="f-messages"></textarea> 187 </p> 188 <p style="text-align: center;"> 189 <input type="submit" name="sub" value="提交" class="submit-btn"> 190 </p> 191 </form> 192 </div> 193 194 195 </body> 196 </html>
效果：
我们要获取的是页面表单POST上来的内容，表单action的目标是add.php，add.php与index.php放在同一目录下（譬如：d:wamp/www/phpfile，服务器用wamp就可以测试）。
下面是add.php的代码：
1 <?php 2 3 if($_POST['names']){ 4 5 $host="localhost:3306";//本地服务器主机地址 6 $user = "root";//用户名 7 $password = "";//密码 8 $dbname = "phpbook";//数据库名字 9 $id = mysqli_connect($host,$user,$password,$dbname);//连接数据库，并将结果存在$id中 10 mysqli_query($id,"set names utf-8");//设置编码 11 mysqli_select_db($id,$dbname);//选择数据库 12 $names = $_POST["names"];//获取index.php表单中<input type="text" name="names">的内容 13 $qq = $_POST["qq"];//同上 14 $email = $_POST["email"]; 15 $messages = $_POST["messages"]; 16 $sql = "insert into users(names,qq,email,messages) values('$names','$qq','$email','$messages')";//sql语句，将获取的内容插入数据库 17 mysqli_query($id,$sql);//执行数据库语句 18 19 if($result = mysqli_query($id,"select * from users;")){//查询数据库中users中所有内容，并将结果存在$result中 20 echo "<table border='0'> 21 <tr> 22 <th>姓名</th> 23 <th>qq</th> 24 <th>email</th> 25 <th>留言内容</th> 26 </tr>"; 27 while($row = mysqli_fetch_array($result)){//获取内容存在数组中 28 echo " 29 30 <tr> 31 <td>".$row['names']." 32 </td> 33 <td>".$row['qq']." 34 </td> 35 <td>".$row['email']." 36 </td> 37 <td>".$row['messages']." 38 </td> 39 </tr> 40 "; 41 } 42 echo "</table>"; 43 }else{ 44 echo "添加失败"; 45 } 46 } 47 48 ?> 49 <!DOCTYPE html> 50 <html lang="en"> 51 <head> 52 <meta charset="UTF-8"> 53 <title>显示留言</title> 54 <style> 55 table{ 56 border:none; 57 border-spacing:0; 58 90%; 59 margin: auto; 60 } 61 </style> 62 </head> 63 <body> 64 65 </body> 66 </html>
效果：
