首页 > 开发 > PHP > 正文

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

2024-05-04 22:45:38
字体:
来源:转载
供稿:网友

前言

前面几篇简单介绍了一下前端与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>            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表