html怎么让表单居中？？？
时间：2024-01-09 09:00:02 | 来源：网站运营
时间：2024-01-09 09:00:02 来源：网站运营
html怎么让表单居中？？？：关于表单，对我们来说并不陌生。例如，我们去银行办信用卡的时候，银行会让我们填写如下图所示的单子：
在上图所示的单子中，可以填写我们的姓名，电话，身份证等信息，把这些填写完整后，就可以办理信用卡了。
其实，上图中所展示的这个单子就是表单了。当然，这个表单是我们日常生活中遇到的表单，那在网页开发中，表单是什么样子的呢？如下图所示：
在上图中给我们呈现的是一个“婚恋”网站的注册页面，在这个注册页面中，我们可以填写生日，常住地，身高，学历等信息，完成这些信息的填写后，就可以进行注册了。当然，注册成功以后，就可以找媳妇了。
像这种注册页面（不同网站，注册页面填写的信可能是不一样的），是在我们访问网站的时候，比较常见的页面，在这些注册页面中可以填写我们的信息，完成注册。而这就是我们在网页中看到的表单了。
了解了什么是表单后，在这里需要你思考一个简单的问题：使用表单的目的是什么？回答的非常好，使用表单的目的就是为了
收集用户信息。例如上图所展示的“婚恋”网站，只有通过表单收集了用户信息，才能跟用户进行交互。
例如，发短信，发邮件等。
知道了，表单的使用目的以后，我们再来看一下，表单是有哪几部分组成的？
在HTML中，一个完整的表单通常有表单域，表单控件(也称为表单元素)和提示信息3个部分组成。
如下图所示：
首先，我们来看一下“表单域”，如上图用红色的线框起来的区域就是表单域，也就是表单的区域了（关于表单域还会在接下来的课程中继续学习），在整个区域中有很多的框可以用来填写信息，而且还有按钮可以进行选择，这些用来填写信息的框和按钮就是"表单控件"。
为了说明在这些“表单控件”中填写什么样的信息，在其左侧都有说明性的文字，例如“身高”，表明在其右侧的框中只能填写身高。这些说明性的文字就是“提示信息”。
通过导学内容的学习，我们知道了使用表单的目的就是用来收集用户的信息，而表单的组成有三部分，分别是“表单域”，“表单控件”以及“提示信息”。
在我们整个HTML表单课程的学习过程中，除了要了解表单的使用目的以及组成以外，最重要的就是掌握表单控件的创建以及对应属性的设置，这是我们整个课程的核心。
2、表单域
通过前面内容的学习，我们知道了表单是有三部分组成的，分别是：“表单域”，
“表单控件”以及“提示信息”。这一小节课，我们学习一下“表单域”的内容。
表单域就是一个包含表单元素的区域。关于表单元素，在前面的课程中我们已经学习过了，就是用来收集用户信息的一些框和按钮，也称之为表单控件。
而我们的表单域就是包含这些表单控件的区域，下面再次看一下我们前面已经看过的一张图。
通过上图，我们可以看到表单域包含了整个表单控件。
在HTML的标签中，我们通过
<form>标签来定义表单域。那么这个表单域有什么作用呢？
表单域的作用就是收集用户在表单元素中填写的这些信息，然后把这些信息发送到对应网站所在的服务器中。
例如，我们在上图所示的“婚恋”网站的注册页面中的表单元素中填写了信息以后，单击“注册”按钮，这些信息就会发送到该“婚恋”网站所在的服务器（关于服务器，这里可以简单的理解成一个高性能的电脑，关于服务器的内容后面课程中还会详细讲解）进行保存。
了解了表单域的作用后，下面看一下它的基本语法规范。
<form action="地址" method="提交方式" name="表单域名称"> 各种表单元素控件</form>在
form 标签中，有三个属性，这三个属性的含义如下图所示：
下面对这三个属性做一个简单的介绍（关于三个属性，在学习Node课程时，还会详细讲解）。
action: 我们前面说过，表单域的作用就是收集用户在表单元素中填写的信息，然后发送到网站所在的服务器，那么对应的服务器端会有一个文件来接收这些信息，而action就是用来指定服务器端接收信息的这个文件的地址。
method: 表示的含义就是以什么样的方式将表单元素中用户填写的数据发送到服务端。比较常见的方式有
get和
post 这两种方式，关于这两种方式有什么区别，也是在我们后期的Node课程中，会详细的讲解。
name:指定表单域的名称，在一个页面中有可能会有多个表单域，为了做区分，可以给每个表单域起一个名字,名字可以随意起，只要不重名就可以。
了解了以上三个属性后，看一下表单域的代码实现，如下所示：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单</title> </head> <body> <form method="post" action="register.php" name="form1"> </form> </body></html>在上面的代码中，我们创建了一个表单域，名字叫做
form1, 同时指定了数据发送的方式为
post, 以及服务端接收数据的文件为
register.php.
在这里还需要再次强调一下，关于
form标签中的这三个属性，目前我们在创建表单域的时候不用指定，只需要单独写一个
form标签就可以了，后期在学习Node服务端开发的时候，还会详细的讲解。
现在，对于我们来说，只需要记住以下两点内容就可以了。
第一：在写表单元素（表单控件）之前，应该有个表单域将其包含起来。
第二：表单域的创建就是通过
form标签来完成的。
以上就是关于“表单域”这一小节的内容，在这里我们就学习完了，下面把这块内容再来做一个总结。
关于这一小节的内容，我们主要学习了以下几点：
- 表单域的作用就是收集用户在表单元素中填写的这些信息，然后把这些信息发送到对应网站所在的服务器中。
- 表单域的创建就是通过
form标签来完成的。 - 在写表单元素（表单控件）之前，应该有个表单域将其包含起来。
3、文本框与密码框
通过前面的学习，我们知道了HTML表单是有，“表单域”，“表单控件”以及“提示信息”这三块内容组成。
而在上一小节中，我们已经学习了“表单域”，在这一小节中我们来学习一下“表单控件”的内容，而关于"提示信息"就非常简单了，就是一些说明性的文字，在创建表单控件的时候，我们也会加上这些提示信息。
下面我们就来看一下“表单控件”的内容。
“表单控件”也称之为“表单元素”，就是让用户来输入数据或者是选择数据的一些控件。
当然，这些表单元素是各种各样的，如下图所示：
通过上图，我们可以看到，有要求用户输入信息的表单元素，例如：“验证码”，“昵称”等。也有让用户选择信息的表单元素，例如：“生日”的选择。
总的来说，表单元素可以分为三类：
第一类：
input 输入表单元素
第二类：
select 下拉表单元素
第三类：
textarea 文本域元素
我们先来学习第一类，
input 输入表单元素。
在英文单词中，
input 就是输入的意思，而在表单元素中，我们是通过
<input>标签来构建该类表单元素的。
<input>标签就是用于收集用户的信息。
<input>标签的语法规范如下：
<input type="属性值" />通过
<input> 标签的语法规范，我们可以看到它是一个单标签，而且包含一个必须添加的
type属性。
type属性的取值有多种，根据取值的不同，会显示不同的表单元素，关于这一点，是我们重点要学习的。
那，
type 属性可以有哪些值呢？如下图所示：
下面，我们先看一下
type属性取值为
text的情况。
当
type属性取值为
text表示创建的表单元素为
文本框。
文本框就是让用户输入文本信息的，例如，下图的“验证码”,“昵称”都是文本框。
下面，我们就创建一个文本框。代码如下所示的：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单</title> </head> <body> <form> 用户名:<input type="text" /> </form> </body></html>通过上面的代码，我们可以看到首先创建了一个表单域，然后在其内部添加了文本框，文本框是使用
<input>标签创建，并且
type 属性的值必须为
text. 在浏览器中打开上面的网页，效果如下：
通过上图，我们可以看到，在网页中出现了一个框，在这个框中可以输入任意的文字，这就是文本框了。我们给这个文本框的左侧添加了“用户名”这个提示信息，当用户看到这个提示信息就知道在这个文本框中要输入用户名了。在这，你可能会想，既然有了输入用户名的文本框，那么怎样制作输入密码的框呢？
代码如下：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单</title> </head> <body> <form> 用户名:<input type="text" /> <br /> 密 码:<input type="text" /> </form> </body></html>在上面的代码中，我们添加了“密码”这一项，那么在这需要你考虑一下如上的创建方式是否正确？？
回答非常的好，以上创建“密码”的方式是错误的。因为，如果按照上面的方式来创建密码，那么用户在输入密码的时候，就会变成明文展示了，这样非常不安全。
如下图所示：
而我们希望的是当用户输入密码的时候，不能以明文形式进行展示，也就是不能让用户看见所输入的密码。这时候就需要将
type属性的值修改成
password.
代码如下所示：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单</title> </head> <body> <form> 用户名:<input type="text" /> <br /> 密 码:<input type="password" /> </form> </body></html>在浏览器中打开上面的网页，然后输入密码，会看到如下的效果。
通过上图，我们可以看到在输入密码的时候，没有再展示出具体的密码信息了，而是以小圆点来代替，这样就安全多了。而这时用来输入密码的这个框我们称之为密码框。
关于本小节的课程在这我们就学习完了，下面我们做一个总结。
我们可以通过
<input>标签来构建输入表单元素。
<input>标签的语法规范如下：
<input type="属性值" /><input>标签中包含一个必须添加的
type属性。
type属性的取值有多种，根据取值的不同，会显示不同的表单元素。例如文本框,
type属性的取值为
text,密码框
type属性的取值为
password.
如果对你有帮助的话，点个赞收个藏，给作者一个鼓励。也方便你下次能够快速查找。其他优质文章 ：
前端行业发展：- Web 前端分为哪几个大方向，工资待遇如何，辛苦吗？
- 找前端工作会不会很难？
- 现在web前端的工资怎样？
- 前端开发就业情况如何？
前端工作内容：
- 前端工程师主要工作内容是什么？
- 前端开发是做什么的？工作职责有哪些？
前端学习路线：
前端必读书籍：
面试相关：
- 关于前端Vue框架的面试题，面试官可能会问到哪些？
- 【一定要收藏】32000字的前端面试题总结！！！
- web前端简历个人技能该怎么写?
- 前端简历中项目描述怎么写能够更加的优雅？
- 面试前端工程师简历应该怎么写才容易通过？
- 自学 web 前端人怎么找工作？
- 自学前端简历怎么写啊？
HTML教程：
- HTML5入门教程（含新特性），从入门到精通
- HTML图文教程（表单域/文本框与密码框/单选按钮与复选框）
- HTML图文教程（选按钮与复选框/input标签/提交按钮与重置按钮）
- HTML图文教程（通按钮/文件域/label/下拉表单）
- HTML零基础入门教程， 零基础学习HTML网页制作（HTML基本结构）
- HTML零基础入门教程， 零基础学习HTML网页制作（HTML 标签）
Koa2教程：
- Koa2框架是什么？Koa框架教程快速入门Koa中间件
- Koa2框架路由应用，Koa2前景、Koa2中间件
- Koa2异常处理
VUE教程：
- 最全的vue学习教程来了，vue模块化组件超级好用，vue项目推荐，vue项目结构搭建，案例分析
其他：
- 13 个有趣且实用的 CSS 框架 / 组件
- 有哪些好的前端社区？
在线咨询
