欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-03 19:37:30
前言 前面几篇简单介绍了一下前端与php的一些知识点，前端中表单提交是一个非常重要的模块，在本篇中我会介绍一些关于表单的知识，如果前面内容你掌握的不好并且没有大量的练习，...

前言

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

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

项目简介

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

登录与注册图解

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

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

bootstrap前端框架[ ]

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给了许多案例，其中有一个登录页的案例

我们来仿一下这个页面

<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表单功能，希望对大家有所帮助

上一篇： 这货才是专业的

下一篇： java根据出生日期计算年龄（精确到天）

推荐阅读