PHP實(shí)現(xiàn)登錄注冊之BootStrap表單功能
前言
前面幾篇簡單介紹了一下前端與PHP的一些知識點(diǎn),前端中表單提交是一個非常重要的模塊,在本篇中我會介紹一些關(guān)于表單的知識,如果前面內(nèi)容你掌握的不好并且沒有大量的練習(xí),我感覺你最好先把標(biāo)簽都記下來。
項(xiàng)目簡介
登錄與注冊是我們在web開發(fā)中最常見的模塊,也是我們?nèi)粘I钪薪?jīng)常接觸的功能。用戶通過前端表單頁面填寫內(nèi)容,通過POST方式提交到后臺,然后經(jīng)過PHP代碼處理提交內(nèi)容后,針對登錄或者注冊的邏輯繼續(xù)操作。
登錄與注冊圖解
BootStrap前端框架[ http://v3.bootcss.com/ ]
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的 WEB 項(xiàng)目。
BootStrap如何使用呢?我們可以下載它的源代碼到本地,也可以使用 BootCDN 提供的免費(fèi) CDN 加速服務(wù)。
首先我們搭建頁面基本骨架
<html> <head> <meta charset="UTF-8"> <title>Register</title> </head> <body> </body> </html>
然后我們點(diǎn)擊起步找到如下內(nèi)容
把紅圈內(nèi)CSS文件復(fù)制到我們頁面中
<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,然后一點(diǎn)點(diǎn)的加上CSS代碼看效果。我們來分析一下HTML中的表單。
•form標(biāo)簽==>用來包裹表單內(nèi)容,也是表單的起始標(biāo)簽。
•form標(biāo)簽的屬性action==>action="xxx"里面填寫的是處理該表單的PHP代碼所在文件地址,點(diǎn)擊提交按鈕后表單會把數(shù)據(jù)發(fā)送到該地址。
•form標(biāo)簽的屬性method==>這個有點(diǎn)不好理解,你記著提交表單的時候里面填post就行,method="post",有興趣的話可以百度查一下。
•input標(biāo)簽==>細(xì)心的朋友可以看到input是單個存在的,<input> 標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。<input> 元素在 <form> 元素中使用,用來聲明允許用戶輸入數(shù)據(jù)的 input 控件。
輸入字段可通過多種方式改變,取決于 type 屬性。常見的type屬性有text,email,password,checkbox,radio,button,submit,hidden等,你可以嘗試改變type來看效果。
•input標(biāo)簽的屬性name==>這個name值是至關(guān)重要的,我們后臺PHP代碼之所以能夠分辨每個值都是來自于哪個input框都是根據(jù)name="xx"來判斷。
•input標(biāo)簽的屬性required==>如果用戶什么都不寫難道我們允許他們提交表單的嗎?很明顯不可以,所以我們需要讓用戶填寫內(nèi)容后再提交,required意思是必須的,如果不填寫內(nèi)容點(diǎn)擊提交的時候,表單不會被提交。
總結(jié)
以上所述是小編給大家介紹的PHP實(shí)現(xiàn)登錄注冊之BootStrap表單功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
- 基于PHP實(shí)現(xiàn)用戶登錄注冊功能的詳細(xì)教程
- PHP實(shí)現(xiàn)的注冊,登錄及查詢用戶資料功能API接口示例
- php+redis實(shí)現(xiàn)注冊、刪除、編輯、分頁、登錄、關(guān)注等功能示例
- php+mysql實(shí)現(xiàn)簡單登錄注冊修改密碼網(wǎng)頁
- PHP實(shí)現(xiàn)的登錄,注冊及密碼修改功能分析
- php注冊和登錄界面的實(shí)現(xiàn)案例(推薦)
- 基于PHP實(shí)現(xiàn)用戶注冊登錄功能
- php注冊登錄系統(tǒng)簡化版
- php自動注冊登錄驗(yàn)證機(jī)制實(shí)現(xiàn)代碼
- 基于PHP的登錄和注冊的功能的實(shí)現(xiàn)
相關(guān)文章
淺談laravel-admin form中的數(shù)據(jù),在提交后,保存前,獲取并進(jìn)行編輯
今天小編就為大家分享一篇淺談laravel-admin form中的數(shù)據(jù),在提交后,保存前,獲取并進(jìn)行編輯,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10詳解Grunt插件之LiveReload實(shí)現(xiàn)頁面自動刷新(兩種方案)
這篇文章主要通過兩種方案詳解Grunt插件之LiveReload實(shí)現(xiàn)頁面自動刷新,需要的朋友可以參考下2015-07-07在 Laravel 中 “規(guī)范” 的開發(fā)短信驗(yàn)證碼發(fā)送功能
Laravel是一套簡潔、優(yōu)雅的PHP Web開發(fā)框架(PHP Web Framework)。接下來通過本文給大家分享在 Laravel 中 “規(guī)范” 的開發(fā)短信驗(yàn)證碼發(fā)送功能,需要的朋友參考下吧2017-10-10Symfony2使用第三方庫Upload制作圖片上傳實(shí)例詳解
這篇文章主要介紹了Symfony2使用第三方庫Upload制作圖片上傳的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Symfony2使用第三方庫Upload的具體步驟與相關(guān)使用技巧,需要的朋友可以參考下2016-02-02destoon實(shí)現(xiàn)調(diào)用當(dāng)前欄目分類及子分類和三級分類的方法
這篇文章主要介紹了destoon實(shí)現(xiàn)調(diào)用當(dāng)前欄目分類及子分類和三級分類的方法,是destoon開發(fā)中非常實(shí)用的一個技巧,需要的朋友可以參考下2014-08-08Laravel學(xué)習(xí)基礎(chǔ)之migrate的使用教程
這篇文章主要給大家介紹了關(guān)于Laravel學(xué)習(xí)基礎(chǔ)之migrate使用的相關(guān)資料,文中通過示例代碼介紹非常詳細(xì),分別介紹了生成遷移、遷移結(jié)構(gòu)、運(yùn)行遷移和回滾遷移等實(shí)現(xiàn)的方法,需要的朋友可以參考借鑒,下面來一起看看吧。2017-10-10