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 相关文章推荐
用IE远程创建Mysql数据库的简易程序
Oct 09 PHP
php动态生成JavaScript代码
Mar 09 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
Apr 12 PHP
深入extjs与php参数交互的详解
Jun 25 PHP
php删除数组元素示例分享
Feb 17 PHP
php include类文件超时问题处理
Feb 06 PHP
php删除文本文件中重复行的方法
Apr 28 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
Jun 24 PHP
PHP加密解密实例分析
Dec 25 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
Oct 18 PHP
PHP filesize函数用法浅析
Feb 15 PHP
PHP如何开启Opcache功能提升程序处理效率
Apr 27 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
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
大学生秋游活动方案
2014/02/17 职场文书
基层党员公开承诺书
2014/05/29 职场文书
工作检讨书500字
2014/10/19 职场文书
大学生支教感言
2015/08/01 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技