前言
前面幾篇簡單介紹了一下前端與PHP的一些知識點，前端中表單提交是一個非常重要的模塊，在本篇中我會介紹一些關于表單的知識，如果前面內容你掌握的不好并且沒有大量的練習，我感覺你最好先把標簽都記下來。
項目簡介
登錄與注冊是我們在web開發中最常見的模塊，也是我們日常生活中經常接觸的功能。用戶通過前端表單頁面填寫內容，通過POST方式提交到后臺，然后經過PHP代碼處理提交內容后，針對登錄或者注冊的邏輯繼續操作。
登錄與注冊圖解
BootStrap前端框架[ http://v3.bootcss.com/ ]
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。
BootStrap如何使用呢？我們可以下載它的源代碼到本地，也可以使用 BootCDN 提供的免費 CDN 加速服務。
首先我們搭建頁面基本骨架
<html> <head> <meta charset="UTF-8"> <title>Register</title> </head> <body> </body> </html>
然后我們點擊起步找到如下內容
把紅圈內CSS文件復制到我們頁面中
<html> <head> <meta charset="UTF-8"> <title>Register</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> </body> </html>
BootStrap給了許多案例，其中有一個登錄頁的案例http://v3.bootcss.com/examples/signin/
我們來仿一下這個頁面
<html>
<head>
<meta charset="UTF-8">
<title>Register</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<form class="form-signin" action="" method="post">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<br>
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<br>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
<br>
<input type="submit" class="btn btn-lg btn-primary btn-block" type="submit" value="Sign in">
</form>
</div>
</body>
</html>
這里面<style></style>里面包裹的是CSS，如果有疑惑的地方可以逐個百度看一下，也可以先不寫CSS，然后一點點的加上CSS代碼看效果。我們來分析一下HTML中的表單。
•form標簽==>用來包裹表單內容，也是表單的起始標簽。
•form標簽的屬性action==>action="xxx"里面填寫的是處理該表單的PHP代碼所在文件地址，點擊提交按鈕后表單會把數據發送到該地址。
•form標簽的屬性method==>這個有點不好理解，你記著提交表單的時候里面填post就行，method="post"，有興趣的話可以百度查一下。
•input標簽==>細心的朋友可以看到input是單個存在的，<input> 標簽規定了用戶可以在其中輸入數據的輸入字段。<input> 元素在 <form> 元素中使用，用來聲明允許用戶輸入數據的 input 控件。