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

时间：2021-09-03 来源：互联网编辑：宝哥软件园浏览：次

序

前面的文章简单介绍了前端和PHP的一些知识点。表单提交是前端非常重要的模块。在这篇文章中，我将介绍一些关于表单的知识。如果你没有很好地掌握前面的内容，也没有进行大量的练习，我认为你最好先把标签写下来。

项目介绍

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

登录和注册图

BootStrap前端框架[http://v3.bootcss.com/]

Bootstrap是最流行的HTML、CSS和JS框架，用于开发具有响应布局和移动设备优先级的WEB项目。

如何使用BootStrap？我们可以在本地下载它的源代码，或者使用BootCDN提供的免费CDN加速服务。

首先，我们构建页面的基本框架

Html头元字符集=' utf-8 ' title register/title/head body/body/html然后我们点击Start找到以下内容

将红色圆圈中的CSS文件复制到我们的页面

让我们模仿这一页

html head meta charset=' UTF-8 ' title register/title！-最新版本的Bootstrap核心CSS文件-linkrel='样式表' href=' https://cdn.bootcss.com/bootstrap/3.3.7/CSS/Bootstrap . min . CSS ' integrity=' sha 384-bvyiisifek1dgmjrakycuharg 32 mucw73 rydg 4va pmtsz/k68 vbdejh4u ' cross origin='匿名'样式正文{ padding-top 3360 40px；填充-bottom : 40px；背景色： # eee；} .表单登录{ max-width : 330 px；padding: 15pxmargin: 0 auto}/style/head body div class=' container ' form class=' form-Sign in ' action=' method=' post ' H2 class=' form-Sign in-heading '请登录/H2 label for=' input mail ' class=' Sr-only ' Email address/label br输入类型=' Email ' name=' Email ' id=' input mail ' class=' form-control '占位符='Email address '需要自动对焦br label for=' input passwor d ' class=' Sr-only ' Password/label输入类型='password '

有用样式/样式包装的CSS。有疑问可以一个一个看，也可以先不写CSS，再稍微加一点CSS代码看看效果。我们来分析一下HTML中的表单。

表单标签==用于包装表单的内容，也是表单的起始标签。

表单标签的属性action==action='xxx '填充了处理表单的PHP代码的文件地址，点击提交按钮后表单会将数据发送到这个地址。

表单标签的attribute方法==有点难以理解。提交表格时记得填写帖子，方法='post '。有兴趣可以去百度查一下。

Input标签==细心的朋友可以看到输入是单独存在的，输入标签指定了用户可以输入数据的输入字段。输入元素在表单元素中用于声明允许用户输入数据的输入控件。

根据类型属性，可以用多种方式更改输入字段。常见的类型属性包括文本、电子邮件、密码、复选框、单选、按钮、提交、隐藏等。您可以尝试更改类型以查看效果。

输入标记的属性名==非常重要。我们的后台PHP代码之所以能区分每个值来自哪个输入框，是基于name='xx '。

需要输入标签的属性===如果用户没有写任何东西，我们允许他们提交表单吗？显然不是，所以我们需要用户在提交之前填写内容。必需意味着必需。如果您没有填写内容并单击提交，表单将不会被提交。

摘要

以上是边肖介绍的登录注册BootStrap表单功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！