PHP实现登录注册之BootStrap表单功能


Posted in PHP onSeptember 03, 2017

前言

前面几篇简单介绍了一下前端与PHP的一些知识点,前端中表单提交是一个非常重要的模块,在本篇中我会介绍一些关于表单的知识,如果前面内容你掌握的不好并且没有大量的练习,我感觉你最好先把标签都记下来。

PHP实现登录注册之BootStrap表单功能

项目简介

登录与注册是我们在web开发中最常见的模块,也是我们日常生活中经常接触的功能。用户通过前端表单页面填写内容,通过POST方式提交到后台,然后经过PHP代码处理提交内容后,针对登录或者注册的逻辑继续操作。

登录与注册图解

PHP实现登录注册之BootStrap表单功能

PHP实现登录注册之BootStrap表单功能

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>

然后我们点击起步找到如下内容

PHP实现登录注册之BootStrap表单功能

把红圈内CSS文件复制到我们页面中

<html>
<head>
  <meta charset="UTF-8">
  <title>Register</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 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" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 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>

PHP实现登录注册之BootStrap表单功能

这里面<style></style>里面包裹的是CSS,如果有疑惑的地方可以逐个百度看一下,也可以先不写CSS,然后一点点的加上CSS代码看效果。我们来分析一下HTML中的表单。

•form标签==>用来包裹表单内容,也是表单的起始标签。

•form标签的属性action==>action="xxx"里面填写的是处理该表单的PHP代码所在文件地址,点击提交按钮后表单会把数据发送到该地址。

•form标签的属性method==>这个有点不好理解,你记着提交表单的时候里面填post就行,method="post",有兴趣的话可以百度查一下。

•input标签==>细心的朋友可以看到input是单个存在的,<input> 标签规定了用户可以在其中输入数据的输入字段。<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。

 输入字段可通过多种方式改变,取决于 type 属性。常见的type属性有text,email,password,checkbox,radio,button,submit,hidden等,你可以尝试改变type来看效果。

•input标签的属性name==>这个name值是至关重要的,我们后台PHP代码之所以能够分辨每个值都是来自于哪个input框都是根据name="xx"来判断。

•input标签的属性required==>如果用户什么都不写难道我们允许他们提交表单的吗?很明显不可以,所以我们需要让用户填写内容后再提交,required意思是必须的,如果不填写内容点击提交的时候,表单不会被提交。

总结

以上所述是小编给大家介绍的PHP实现登录注册之BootStrap表单功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

PHP 相关文章推荐
php实现ping
Oct 09 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
Aug 05 PHP
PHP自定义大小验证码的方法详解
Jun 07 PHP
php对包含html标签的字符串进行截取的函数分享
Jun 19 PHP
PHP链接MySQL的常用扩展函数
Oct 23 PHP
php使用mysqli向数据库添加数据的方法
Mar 20 PHP
php获取远程文件内容的函数
Nov 02 PHP
使用PHP如何实现高效安全的ftp服务器(二)
Dec 30 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
Sep 11 PHP
Laravel框架查询构造器简单示例
May 08 PHP
php5对象复制、clone、浅复制与深复制实例详解
Aug 14 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
Feb 21 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
Sep 02 #PHP
php简单读取.vcf格式文件的方法示例
Sep 02 #PHP
PHP实现简单的模板引擎功能示例
Sep 02 #PHP
PHP实现类似于C语言的文件读取及解析功能
Sep 01 #PHP
PHP设计模式之工厂模式实例总结
Sep 01 #PHP
浅谈关于PHP解决图片无损压缩的问题
Sep 01 #PHP
phpStudy配置多站点多域名和多端口的方法
Sep 01 #PHP
You might like
PHP安全性漫谈
2012/06/28 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
PHP生成树的方法
2015/07/28 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
门卫岗位职责
2013/11/15 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
优秀教研组申报材料
2014/12/26 职场文书
老公保证书
2015/01/17 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
重阳节活动主持词
2015/07/04 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Win11更新失败并提示0xc1900101
2022/04/19 数码科技
python数字图像处理之图像的批量处理
2022/06/28 Python