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

 更新时间:2017年09月03日 11:11:00   作者:Artist1995  
登录与注册是我们在web开发中最常见的模块,也是我们日常生活中经常接触的功能。下面通过本文给大家分享PHP实现登录注册之BootStrap表单功能,需要的朋友参考下吧

前言

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

项目简介

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

登录与注册图解

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>

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

把红圈内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>

这里面<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表单功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • thinkphp命名空间用法实例详解

    thinkphp命名空间用法实例详解

    这篇文章主要介绍了thinkphp命名空间用法,结合实例形式详细分析了thinkPHP命名空间的功能及具体使用技巧,需要的朋友可以参考下
    2015-12-12
  • PHPCMS V9 添加二级导航的思路详解

    PHPCMS V9 添加二级导航的思路详解

    这篇文章主要介绍了PHPCMS V9 添加二级导航所遇到些问题,查询导航栏的信息时返回的$r[arrchildid]与自己想象的不符,文档上说是返回子栏目id但是却有些不同。下面小编通过分享本文给大家解答下
    2016-10-10
  • php加密解密实用类分享

    php加密解密实用类分享

    加密和解密是一项常规任务,这里介绍一个加解密类。如果你想在用户忘记密码时为他或她找回原来的密码,那么这个类是个好用的工具
    2014-01-01
  • PHP AOP教程案例

    PHP AOP教程案例

    这篇文章主要介绍了PHP AOP教程案例,本篇文章通过简要的案例,讲解了AOP该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • Laravel框架实现修改登录和注册接口数据返回格式的方法

    Laravel框架实现修改登录和注册接口数据返回格式的方法

    这篇文章主要介绍了Laravel框架实现修改登录和注册接口数据返回格式的方法,结合实例形式分析了Laravel框架针对登录与注册接口数据操作流程、原理与修改操作实现方法,需要的朋友可以参考下
    2018-08-08
  • 动态表单验证的操作方法和TP框架里面的ajax表单验证

    动态表单验证的操作方法和TP框架里面的ajax表单验证

    这篇文章主要介绍了动态表单验证的操作方法和TP框架里面的ajax表单验证问题,需要的朋友可以参考下
    2017-07-07
  • ThinkPHP3.2.3框架Memcache缓存使用方法实例总结

    ThinkPHP3.2.3框架Memcache缓存使用方法实例总结

    这篇文章主要介绍了ThinkPHP3.2.3框架Memcache缓存使用方法,结合实例形式总结分析看thinkPHP框架下Memcache缓存各种调用方法与配置相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • 深入浅析php中sprintf与printf函数的用法及区别

    深入浅析php中sprintf与printf函数的用法及区别

    这篇文章主要介绍了php中sprintf与printf函数的用法及区别,涉及到printf函数、sprintf函数相关资料,需要的朋友可以参考下
    2016-01-01
  • php处理多图上传压缩代码功能

    php处理多图上传压缩代码功能

    这篇文章主要介绍了php处理多图上传压缩代码功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • ThinkPHP中I(),U(),$this->post()等函数用法

    ThinkPHP中I(),U(),$this->post()等函数用法

    这篇文章主要介绍了ThinkPHP中I(),U(),$this->post()等函数用法,简单分析了ThinkPHP处理表单的常用函数使用方法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-11-11

最新评论