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 相关文章推荐
数字转英文
Dec 06 PHP
从网上搜到的phpwind 0day的代码
Dec 07 PHP
php下HTTP Response中的Chunked编码实现方法
Nov 19 PHP
php中删除字符串中最先出现某个字符的实现代码
Feb 03 PHP
解析PHP自带的进位制之间的转换函数
Jun 08 PHP
PHP系统命令函数使用分析
Jul 05 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
Jan 03 PHP
PHP内核学习教程之php opcode内核实现
Jan 27 PHP
php使用pear_smtp发送邮件
Apr 15 PHP
php输出含有“#”字符串的方法
Jan 18 PHP
[原创]php正则删除img标签的方法示例
May 27 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
Aug 05 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
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php删除指定目录的方法
2015/04/03 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
发现的以前不知道的函数
2006/09/19 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
js闭包实例汇总
2014/11/09 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
js评分组件使用详解
2017/06/06 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python获取从命令行输入数字的方法
2015/04/29 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
消防安全管理制度
2014/02/01 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
创先争优承诺书范文
2014/03/31 职场文书