干货：HTML中表单元素理解

.HTML中表单元素的基本概念

HTML表单是HTML元素中较为复杂的部分,表单往往和脚本,动态页面,数据处理等功能相结合,因此是制作动态网站很重要的内容.

表单一般用来收集用户的输入信息

2.表单工作原理

访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交,这些信息通过网络传送到服务器上.服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误.当数据完整无误后,服务器反馈一个输入完成的信息

3.表单的功能

功能:表单用于向服务器传输数据,从而实现用户与WEB服务器的交互表单能够包含input系统标签,比如文本字段,复选框,单选框,提交按钮等表单还可以包含textarea,select,fieldset,label标签.

4.表单的常用类型及说明

1.表单常用的类型有:

2.表单属性：

3.文本输入框(text)：

当用户要在表单中输入字母,数字内容时,就会用到文本域

代码如下:

注意,表单本身并不可见.同时,在大多浏览器中,文本域的缺省宽度是20个字符.

在密码域中输入的字符,浏览器将使用项目符号来代替这些字符.

4.单选按钮(radio)：

当用户从若干给定的选择中选取一个选项时,就会用到单选框.

代码如下:

用户只能从众多选择中选取一个选项.

当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态.

5.复选框(checkboxes)

当用户需要从若干给定的选择中选取一个或多个选项时,就会用到复选框

代码如下:

用户一次可以选择多个选项.

6.重置按钮(reset)

重置按钮会清除当前页面上的用户输入的所有数据,把当前页面恢复到打开时的样子.

代码如下:

<form><p><input type="reset"></p></form>

7.提交按钮

会在当前页面生成一个提交按钮,用户点击此按钮,浏览器就会把当前页面用户输入的数据传送到服务端

代码如下:

<form><p><input type="button" value="按钮"/></p></form>

8.提交文件

当需要把客户端的文件发送到服务端时,需要用到提交文件按钮

代码如下:

<form action="/index/" method="post"><p><input type="file"/></p></form>

上传文件注意两点: 请求方式必须是post enctype="multipart/form-data"

9.下拉菜单

当需要用户从很多选项中选择一个或多个选项时,也可以使用下拉列表.

代码如下:

这样的下拉列表,用户只能从其中选择一个选项,当需要用户选择两个或以下时,可以添加参数来进行控制.

代码如下:

还可以在

OPTION

中添加

selected="selected"

选项来设置默认值.

10.表单属性

1.action属性的说明:

使用action选项来指定服务端的脚本来处理被提交的表单

<form action="/index/" method="post">

如果省略action属性,则action会被设置为当前页面

2.method属性的说明:

method属性规定在提交表单时所用的http方法(POST或GET)

<form action="/index/" method="post">

或

<form action="/index/" method="get">

3.get方法或post方法的使用方式说明:

如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息.

当使用get方法时,表单的数据在页面地址栏中是可见的

因此,get最适合少量数据的提交,浏览器会设定容量限制

如果表单正在更新数据,或者包含敏感信息(比如密码)时应该使用post,post的安全性更好.

因为在页面地址栏中被提交的数据是不可见的.

切图 qietu(.com)

. 打开一个页面，通过效果图来引入今天的内容：从效果图上看出，网页右侧有一个登录区域，里面包含文本框，密码框，下拉菜单、复选框、按钮等，当点击按钮时，该页面会自动将用户输入的内容发送到服务器，这个时候就需要用到表单了

2. 什么是表单

(1) 通俗说表单是一个将用户输入的信息组织起来的容器，需要将用户输入信息填写到表单容器中，当点击按钮时，表单会将数据统一发送到服务器

(2) 典型的应用场景：登录注册网上订单网上搜索在网页中应用非常广泛，例如申请邮箱，需要先填写注册信息，然后才能申请提交，同时如果希望登录邮箱，也必须在登录邮箱才能进入到邮箱里，这就是表单典型应用

(3) 为了方便操作，表单提供了多种表单元素：文本框密码框单选按钮复选框下拉列表多行文本等等。在接下来的学习中，逐步掌握在网页中创建表单的方法以及常用的表单元素

3. 表单怎么使用呢

(1) 在代码视图下，光标移动到需要放置表单的位置上，点击--插入---表单----表单，可以在工作区插入一个表单。由于表单仅仅是一个容器，不会在浏览器显示。

(2) 可以看到表单使用<form></form>标签表示，在开始和结束标签之间存放表单元素等内容。

(3) 表单属性

① 为了能够实现信息提交目的，还需要为表单指定要提交的页面地址，并指定提交方式

② 光标停留在表单任意位置，单击属性面板会自动显示表单相关的属性

③ Id:设置表单的id。相当于现实中身份证，处理表单，一般都要表单设置id id=””

④ 动作：当提交表单时，如何向发送表单数据，处理表单数据的目标地址 action=””

⑤ 方法：规定提交方式取值 get或者post method =””

⑥ 咱们前期学网页的时候，先不考虑这些元素，简单了解就好，后期跟程序在进行整合

(4) 表单属性

① 最常用的输入元素是单行文本框，提供给用户输入单行文本信息，比如用户名的输入。步骤如下，光标停留到表单里插入---表单---文本域

② 插入单行文本框之后，鼠标单击选中文本框

1) 元素名称：对应于属性面板中name，用来指定表单元素的名称，提交的时候，填写的数据是随着表单名称一起提交的

2) 字符宽度:单行文本框的宽度属性面板中 size

3) 最多字符：允许用户输入的最多字符数.超过该数值，将无法继续输入属性面板中 Max Length

4) 初始值：打开网页的时候，文本默认的显示文本.一般用于提示用户输入信息属性面板中 value

5) Type: 表单元素的类型 name:表单元素的名称 size:表单元素的宽度 maxlength:允许输入的最大字符 value文本框的初始值

③ 密码框

1) 用户登录的表单，为了保障账户的安全，在需要密码的地方使用*代替。防止密码被窃取的风险，只不过是文本显示输入的文本，密码框将用户输入文本为 *来显示。

2) 代码显示-- 除了type属性值不一样之外，其他属性和单行文本框是一样的

④ 单选按钮

1) 也是网页中应用非常广泛，主要作用是来限制用户选中一组数据中的其中一个，以确保数据的准确性。例如用户的性别的时候，正确的是男或者女，如果是单行文本，可以随意填写，往往提交的信息不准确

2) 插入---表单----单选按钮：插入一个单选按钮，如果需要多个话，在重复上述步骤即可

3) 选中插入的单选按钮，发现效果不是我们期待的，两个单选按钮可以同时选中。那咱们如何能选中一个呢

4) 可以根据单选按钮名称进行分组，相同名称的一组按钮才能相互排斥。只需要在多个单选框设置为相同的名称就可以了，被选中的单选按钮连同该项的值会一起提交

5) 是否是默认选中，checked:表示按钮的默认选中的状态

⑤ 复选框

1) 在一些特殊情况下，并不强调要求用户选择其中的一项，例如选择自己兴趣爱好的，爱好可能会有多项，就需要用到复选框，允许用户选择其中多项内容

2) 插入---表单---复选框，如果想添加多个，重复上述步骤

3) 同单选按钮一样，同一组的复选框应当设置统一名称，便于提交数据，同时也可以为复选框设置默认选中，可以设置多个默认选中状态

⑥ 下拉列表

1) 主要用在多个项目中选中其中一个场景，可以使用单选或者多选按钮来定义，如果备选选项较多是，会占用较大空间，用户选择自己所在的省份和城市变得不太现实，下拉列表能解决这一问题而出现的。占用极少空间显示较多内容

2) 插入----表单---选择,可以向表单中插入一个下拉列表，刚创建的列表的时候，是没有内容的，给列表添加列表值

3) 单击列表值，会弹出列表设置面板，设置下拉备选框

4) 下拉列表：select标签列表项使用option标签

5) Select name:下拉列表的名称，option是放入到select标签内的，使用value属性表示当前项的值，selected 该选项默认是选中的 option开始标签和结束标签之间的内容是显示在用户面前的文本

⑦ 按钮

1) 是表单中是不可缺少的部分，写好表单元素之后，需要添加按钮，用来响应用户的操作。

2) 常见按钮：提交、重置、普通、图片

a. 提交按钮：整个表单提交的内容发送到服务器

b. 重置按钮：整个表单还原初始状态

c. 普通按钮：没有任何反应，通常和javascript特效方面，后面课程继续学习

d. 图片：主要是为了弥补普通按钮在外观上不足，允许我们使用一张图片来代替

3) 插入---表单---按钮，功能通过属性面板中

4. 表单在实际项目中怎么使用，看一下综合案例

(1) 制作网易邮箱登录页面

(2) 演示内容------只写表单案例，其他内容，写好。

们在浏览网页的时候，可以看到页面上有导航栏，逛商城的时候会看到商品的详情页里有商品的简介，以及在注册或者申请一个网站会员的时候会让我们填写各种各样的信息，这些分别由列表、表格、表单来完成的，今天我学习了这些知识，下面我把我学到的知识梳理一下，以及在学习中遇到的坑总结一下，希望能给其他初学者一些帮助，同时，如有不足之处，也请各位大神指出来，我也好学习学习，提升自我。

网站导航栏

HTML列表在网站页面中使用的是相当广泛。如上图的网站导航栏，就是使用了列表实现的，再比如说，一个栏目的文章列表等等，都是使用了列表功能，根据我今天学到的内容，我总结了一下，总共三大知识点：

一、HTML列表分为三种：

1.无序列表：

无序列表是由标签<ul>和<li>组成的；
<ul>标签是声明无序列表的，<li>标签作为列表中每一项的起始项。

可以在<ul>标签中使用type属性来控制每一项前面的圆点的样式:

1.disc 默认值，每一项前面的圆点为黑色实心圆。
2.square 每一项前面的圆点为实体方心。
3.circle 每一项前面的圆点为空心圆。

<h3>商品列表</h3>
<ul start="2">
    <li>iPhone 12</li>
    <li>MacBook Air</li>
    <li>AirPods Pro</li>
</ul>

效果如图：

2.有序列表：

与无序列表有区别的是有序列表，他的每一项都是由它是有先后顺序进行排列的，并且会用数字依次进行标记；
有序列表由标签<ol>和<li>组成。

<h3>商品列表</h3>
<ol>
    <li>iPhone 12</li>
    <li>MacBook Air</li>
    <li>AirPods Pro</li>
</ol>

效果如图：

有序列表

可以在<ol>标签中使用start属性来控制第一项数字起始值：

<h3>商品列表</h3>
<ol start="2">
    <li>iPhone 12</li>
    <li>MacBook Air</li>
    <li>AirPods Pro</li>
</ol>

效果如图：

start=2

可以使用type规定在列表中使用的标记类型，type值有五种：

1 默认值，以数字样式标记；
A 以大写字母作为每一项前面的标记；
a 以小写字母作为每一项前面的标记；
I 以大写的罗马数字作为标记；
i 以小写的罗马数字作为标记。

不过我个人感觉，这个type属性的作用貌似不多大，基本上都是以默认值，就是数字来作为每一项的标记了吧。

3.自定义列表：

<dl>
    <dt>名称：</dt>
    <dd>小白学编程</dd>
    <dt>地址：</dt>
    <dd>河南省郑州市二七区</dd>
    <dt>联系</dt>
    <dd>电话：<a href="tel:189****1122">189****1122</a></dd>
    <dd>邮箱：<a href="mailto:admin@admin.com">admin@admin.com</a></dd>
</dl>

效果如图：

自定义列表

备注：根据本小白查的文档，a标签的href属性，不仅可以填写链接，还可以用：

【tel:电话号码】的格式点击进行拨号，只不过是在电脑上需要有能拨号的软件；

拨号

【mailto:邮箱地址】的格式可以快速拉起发送邮件的软件。

发送邮件

不过我不知道这个的兼容性怎么样，如果有知道的大佬，可以在评论区指导一下，跪谢！

二、HTML表格：

<table>标签定义一个HTML表格；
一个HTML表格由table以及一个或多个tr、th或者td组成
tr元素定义表格行，th元素定义表头，td元素定义表格单元格。

一个表格的基本结构：

<table class="table">
    <!-- caption：表格标题 -->
    <caption>
        商品信息表
    </caption>
    <!-- 表头 -->
    <thead>
        <!-- 添加表格数据的时候必须先添加一行 -->
        <tr>
            <td>ID</td>
            <td>商品名称</td>
            <td>单价</td>
            <td>单位</td>
            <td>数量</td>
            <td>金额</td>
        </tr>
    </thead>
    <!-- 一个表格可以有多个tbody，但是只能有一个thead -->
    <tbody>
        <tr>
            <td>1</td>
            <td>iPhone 12 mini</td>
            <td>5499</td>
            <td>部</td>
            <td>100</td>
            <td>549900</td>
        </tr>
    </tbody>
</table>

总结：
1.一个表格允许有多个<tbody>，但是有且只能有一个<thead>；
2.添加表格数据的时候必须先添加一行；
3.所有的数据必须填充到<td>或者<th>标签中；
4.th是td元素的一个加强版，<th>比<td>多了个加粗和居中的效果。

Excel里的表格可以进行行与列的合并，单元格直接也能合并，那么HTML表格也是可以的，可以使用colspan进行列合并，rowspan进行行的合并。利用这两个属性，我们可以使用<table>标签写一个课程表。

三、HTML表单与常用控件

HTML表单是用于搜集用户输入的不同类型数据的，它包含了不同类型的<input>元素，如:文本框、单选框、复选框、提交按钮等等。因此可以看出，<input>元素是表单中最重要的元素。

表单的基本格式：

<form action="" method="POST" class="register">
    <!-- 这里面可以放input元素 -->
</form>

action：处理表单的程序，通知表单往何处发送数据；
method：表单数据提交类型，有两个值：
- GET：数据直接显示在url地址中；
- POST：表单数据在请求头体中。

根据我学习的成果，我总结出了input元素的七种type类型并一一做了记录：

1.type="text" 单行文本框

<label for="username">账号：</label>
<input type="text" name="username" id="username" value="admin" required>

单行文本框

2.type="email" 邮箱型文本框

<label for="email">邮箱：</label>
<input type="email" name="email" id="email" value="html@html.cn" required>

邮箱型文本框还会对输入的内容进行校验，如果不符合邮件地址的格式会弹出如上图提示。

3.type="password" 密码型文本框/非明文

<label for="password">密码：</label>
<input type="password" name="password" id="password" value="" placeholder="密码不少于6位" required>

密码型文本框

输入内容

值得注意的是，密码型文本框在输入密码的时候都是以小黑点进行替换的，并不会显示我们输入的内容。

4.type="radio" 单选框

<label for="">性别：</label>
<div>
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="male" id="male">
    <label for="female">女</label>
    <input type="radio" name="gender" value="male" id="male" checked>
    <label for="secret">保密</label>
</div>

单选框

单选框（radio）的name值必须都相同才能保证值的唯一性，默认选中使用checked属性。

5.type="checkbox" 复选框

<label for="#">兴趣：</label>
<div>
    <input type="checkbox" name="hobby[]" value="basketball" id="basketball">
    <label for="basketball">篮球</label>
    <input type="checkbox" name="hobby[]" value="game" id="game">
    <label for="game">游戏</label>
    <input type="checkbox" name="hobby[]" value="travel" id="travel">
    <label for="travel">旅游</label>
    <input type="checkbox" name="hobby[]" value="program" id="program">
    <label for="program">编程</label>
</div>

复选框

复选框的name值一定要用数组表示，否则，服务器在接收数据的时候不能获取所有选中的值。

6.type="file" 文件域

<label for="user-pic">头像：</label>
<input type="file" name="user_pic" id="user-pic" />

上传文件

7.type="hidden" 隐藏域

<input type="hidden" name="MAX_FILE_ZIE" value="80000" />

隐藏域在页面是看不到的，是服务器端进行处理的一项数据。

通过上述的七种<input>元素类型，我得出一个结论就是一个<input>元素至少包含有三个属性：

type 控件的类型；
name 相当于变量名称，用于后端服务器接收时使用；
value 控件的值。

除了上述的<input>元素的7种标签类型，还有下拉列表、文本域这些常用的控件。

下拉列表/下拉框

<label for="">学历：</label>
<select name="edu" id="eud">
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3" selected>本科</option>
    <option value="4">研究生</option>
    <option value="5" label="老司机">博士</option>
</select

下拉列表/下拉框

注意：
如果option里有label值，label属性的优先级于option里的内容。因此，上述列表第5项应该显示“老司机”。
HTML5中新属性：
multiple multiple可以选择多个选项
size 数值，如：3，下拉框里可见的选项数量

<label for="">学历：</label>
<select name="edu" id="eud">
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3" selected>本科</option>
    <option value="4">研究生</option>
    <option value="5" label="老司机">博士</option>
</select>

multiple、size用法

文本域（多行文本框）

<label for="comment">备注：</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>

文件域与隐藏域

上传文件需要注意两点：

请求类型必须为POST类型；
form表单必须有enctype属性，并且数据编码设置为：enctype=”multipart/form-data”；

<form action="" method="POST" class="register" enctype="multipart/form-data">
    <label for="user-pic">头像：</label>
    <!-- 隐藏域在页面是看不到的，是服务器端进行处理的一项数据。 -->
    <input type="hidden" name="MAX_FILE_ZIE" value="80000" />
    <input type="file" name="user_pic" id="user-pic" />
    <div class="user-pic" style="grid-column: 2;"></div>
    <button>提交</button>
</form>

enctype有3个值：

application/x-www-form-urlencoded 默认值，在发送前对所有字符进行编码；
multipart/form-data 使用上传文件空间时必须用该值；
text/plain 将空格转换为“+”，但不对特殊字符编码。

四、表单的form属性

<form action="check.php" method="get" id="register">
  <div class="box">
  	<label for="email">邮箱:</label>
		<input type="email" form="register" name="email" id="email" placeholder="demo@email.com" />
  	<label for="password">密码:</label>
		<input type="password" form="register" name="password" id="password" placeholder="至少8位" />
  	<button form="register">提交</button>
	</div>
</form>
<label for="username">帐号:</label>
<input type="text" name="username" id="username" placeholder="不能为空" />

注册表单

如果某个控件写在form表单的外部，则该控件需要使用form属性：form=”表单的id值”，才可以在表单提交时传该控件的值，否则无法进行传值。

例如：以下情况就是没有在空间中写form属性的情况，我们可以看到，在浏览器里没有获取到密码password的值，只获取到了username和email的值：

没有获取到password的值

我个人的理解是：如果不把表单控件写到form内部，这样会方便js获取表单元素的值，但是这样写会容易影响布局，造成布局混乱，建议还是按照标准的写法，把所有的控件都写到form表单内部。

至于什么时候使用GET方法，什么时候使用POST方法呢？通过今天的学习，我做了如下总结：

GET方法传输的数据相对于POST要小的很多，并且是明文传输的，是直接将参数放在应用程序的URL中传输的，一眼就能看见，因此对于小一些的表单，对安全性要求不高的，可以使用GET方法。
POST方法可以发送大文件，并且在请求的URL中看不到发送的数据，安全性高，因此建议使用POST方法。当然这个安全性也是相对来说的，对于一些网络黑客高手，还是有办法获取这些传输内容，至于怎么获取的，我也不清楚，毕竟咱还是小白。
还有一点就是在上传文件的时候必须使用POST方法，因为文件一般都比较大，GET方法最大大概只能发送32K的数据，POST方法可以达到1G。

作业：用表格写一个课程表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/table.css">
    <title>表格：行与列的合并</title>
</head>
<body>
    <table class="lesson">
        <caption>
            xxxx小学课程表
        </caption>
        <thead>
            <tr>
                <th colspan="2"></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">上午</td>
                <td>1</td>
                <td>语文</td>
                <td>数学</td>
                <td>音乐</td>
                <td>社会</td>
                <td>科学</td>
            </tr>
            <tr>
                <td>2</td>
                <td>数学</td>
                <td>语文</td>
                <td>音乐</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>3</td>
                <td>美术</td>
                <td>音乐</td>
                <td>音乐</td>
                <td>数学</td>
                <td>音乐</td>
            </tr>
            <tr>
                <td>4</td>
                <td>社会</td>
                <td>体育</td>
                <td>音乐</td>
                <td>体育</td>
                <td>语文</td>
            </tr>

            <tr class="rest">
                <td colspan="7">中午休息</td>
            </tr>

            <tr>
                <td rowspan="4">下午</td>
                <td>5</td>
                <td>语文</td>
                <td>数学</td>
                <td>音乐</td>
                <td>社会</td>
                <td>科学</td>
            </tr>
            <tr>
                <td>6</td>
                <td>数学</td>
                <td>语文</td>
                <td>音乐</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>7</td>
                <td>课外活动：</td>
                <td colspan="4">各班自行组织，自愿参加</td>
                <td>数学</td>
                <td>音乐</td> -->
            </tr>
        </tbody>
    </table>
</body>
</html>

效果：

用HTML表格写一个课程表

个人总结：为了学习这些表单知识，真真的是看了一天，头都懵了，还有不少内容没有记住，还是需要多写多练，其中我认为比较坑的几个地方是：

表格的行与列的合并，colspan、rowspan，如果能熟练的用好这两个属性，相信写出上面课程表实例也不难；
表单的属性太多了，一时半会真的是记不住；
上传文件需要注意的两点：请求类型必须为POST；form表单加上enctype=”multipart/form-data”；
表单控件的form属性，这个可能是因为我还是个小白，才接触这些东西，不知道这些知识点，不知道今后的工作中用到这个属性的情况多不多。

在看视频教程的过程中，我看到好多大佬在用VS Code的时候都是使用了快捷键，后来网上搜了一下，原来官方给的就有一个PDF文档，从VS里就可以进去，在工具的顶部导航栏帮助里，如下图：

快捷键

为了方便大家快速找到，我把官方地址贴出来吧，VS Code快捷键PDF文档：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

VS Code快捷键

在线咨询

上一篇：前端入门-html 表单控件使用
下一篇：钓不同鱼种时选择鱼钩的种类，将有效提高中钩率，减少跑鱼等现象

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

干货：HTML中表单元素理解

一、HTML列表分为三种：

二、HTML表格：

三、HTML表单与常用控件

下拉列表/下拉框

文本域（多行文本框）

文件域与隐藏域

四、表单的form属性

作业：用表格写一个课程表

您的项目需求