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 无法加载mysql的module的时候的配置的解决方案引发的思考
Jan 27 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
May 03 PHP
基于PHP开发中的安全防范知识详解
Jun 06 PHP
解析php中两种缩放图片的函数,为图片添加水印
Jun 14 PHP
php使用qr生成二维码的示例分享
Jan 20 PHP
PHP中使用TCPDF生成PDF文档实例
Jul 01 PHP
yii操作cookie实例简介
Jul 09 PHP
PHP实现对站点内容外部链接的过滤方法
Sep 10 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
Oct 14 PHP
PHP实现的sqlite数据库连接类
Dec 12 PHP
超强多功能php绿色集成环境详解
Jan 25 PHP
PHP实现验证码校验功能
Nov 16 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python的移位操作实现详解
2019/08/21 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
金融系应届毕业生求职信
2014/05/26 职场文书
创卫工作总结2015
2015/04/22 职场文书
实习单位意见
2015/06/04 职场文书
力克胡哲观后感
2015/06/10 职场文书
高三物理教学反思
2016/02/20 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS