《HTML+CSS+JavaScript》之第9章表单

9.1 表单简介

9.1.1 表单是什么

表单最重要的作用是在浏览器端收集用户的信息，然后将数据提交给服务器端来处理。

9.1.2 表单标签

form、input、textarea、select、option。
外观划分：

单行文本框
密码文本框
单选框
复选框
按钮
文件上传
多行文本框
下拉列表

9.2 form标签

9.2.1 form标签简介

所有表单标签必须放在form标签内部。（与服务器无交互的表单元素可以不放在form标签内）

<form>
	各种表单标签
</form>
1
2
3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <form>
        <input type="text" value="这是一个单行文本框"/><br/>
        <textarea>这是一个多行文本框</textarea><br/>
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

9.2.2 form标签属性

属性	说明
name	表单名称，区分表单
method	提交方式，指定表单数据的http提交方法，post（更安全），get
action	提交地址，指定表单数据提交的处理地址
target	窗口打开方式
enctype	表单数据提交的编码方式，一般上传文件时才需要

9.3 input标签

大多数表单使用input标签实现，input是自闭和标签。

input标签的type属性取值

属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button、submit、reset	按钮
file	文件上传

9.4 单行文本框

9.4.1 单行文本框简介

常见于网站注册登录功能。

<input type="text"/>
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        姓名：<input type="text" />
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

9.4.2 单行文本框属性

属性	说明
value	默认显示文字
size	长度，一般用CSS来控制
maxlength	最多可输入字符数

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        姓名：<input type="text" /><br />
        姓名：<input type="text" value="helicopter"/>
        姓名：<input type="text" size="20"/><br />
        姓名：<input type="text" size="10"/>
        姓名：<input type="text" />
        姓名：<input type="text" maxlength="5"/>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

9.5 密码文本框

9.5.1 密码文本框简介

外观与单行文本框相似，属性相同（value，size，maxlength等）。但输入字符不可见。

<input type="password"/>
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        账号：<input type="text" /><br />
        密码：<input type="password" />
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

9.5.2 密码文本框属性

属性	说明
value	默认显示文字
size	长度，一般用CSS来控制
maxlength	最多可输入字符数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        账号：<input type="text" size="15" maxlength="10" /><br />
        密码：<input type="password" size="15" maxlength="10" />
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

9.6 单选框

9.6.1 单选框简介

<input type="radio" name="组名" value="取值"/>
1

name表示单选按钮所在组名，value表示单选按钮取值，这两个属性必须设置。
一组单选按钮，只能选中其中一项。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        性别:
        <input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

checked属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        性别:
        <input type="radio" name="gender" value="男" checked />男 <!--checked默认选中-->
        <input type="radio" name="gender" value="女" />女
    </form>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

9.6.2 忽略点

无name属性及name取值不同的单选框，可以同时选中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        性别（无name属性）:
        <input type="radio" value="男"/>男
        <input type="radio" value="女"/>女<br/>
        性别（有name属性）:
        <input type="radio" name="gender" value="男"/>男
        <input type="radio" name="gender" value="女"/>女<br />
        性别（name取值不一样）:
        <input type="radio" name="gender1" value="男"/>男
        <input type="radio" name="gender2" value="女"/>女<br />
        年龄:
        <input type="radio" name="age" value="80后" />80后
        <input type="radio" name="age" value="90后" />90后
        <input type="radio" name="age" value="00后" />00后
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

为了更好的语义化，表单元素与文本一般需要借助label标签关联起来。

<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
//改为
<label><input type="radio" name="gender" value="男" />男</label>
<label><input type="radio" name="gender" value="女" />女</label>
1
2
3
4
5

一般情况下，value属性值与文本相同，value属性是为了方便JavaScript或者服务器操作数据。
所有表单元素的value属性作用都是一样的。

9.7 复选框

name表示复选按钮所在组名，value表示复选按钮取值，这两个属性必须设置。
一组复选按钮，可以选中多项。

<input type="checkbox" name="组名" value="取值"/>
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        你喜欢的水果：<br/>
        <input type="checkbox" name="fruit" value="苹果" checked/>苹果
        <input type="checkbox" name="fruit" value="香蕉"/>香蕉
        <input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
        <input type="checkbox" name="fruit" value="李子"/>李子
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

9.8 按钮

9.8.1 普通按钮button

配合JavaScript进行各种操作。

<input type="button" value="取值"/>
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementsByTagName("input");
            oBtn[0].onclick = function () {
                alert("I ❤ HTML！");
            };
        }
    </script>
</head>
<body>
    <form method="post">
        <input type="button" value="表白"/>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

9.8.2 提交按钮submit

给服务器提交数据，针对当前form标签而言。

<input type="submit" value="取值"/>
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <input type="button" value="普通按钮"/>
        <input type="submit" value="提交按钮"/>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

9.8.3 重置按钮reset

清除用户在表单中输入的内容，针对当前form标签而言。

<input type="reset" value="取值"/>
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        账号：<input type="text" /><br />
        密码：<input type="password" /><br />
        <input type="reset" value="重置" /><br />
    </form>
    昵称：<input type="text" />
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

9.8.4 button标签

基本不会用到button标签。

<button></button>
1

9.9 文件上传

<input type="file"/>
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <input type="file"/>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

9.10 多行文本框

输入多行文本，默认显示文本在标签对的内部设置，而不是value属性中设置。

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        个人简介：<br/>
        <textarea rows="5" cols="20">请介绍一下你自己</textarea>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

9.11 下拉列表

9.11.1 下拉列表简介

select和option标签对配合使用表示，可看成特殊的无序列表。

<select>
	<option>选项内容</option>
	<option>选项内容</option>
</select>
1
2
3
4

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>jQuery</option>
            <option>JavaScript</option>
            <option>Vue.js</option>
        </select>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

9.11.2 select标签属性

multiple，设置可选择多项（Ctrl+鼠标左键）。
size，设置显示几个列表项，取值整数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select size="5" multiple> <!--chrome要求size最少4-->
            <option>HTML</option>
            <option>CSS</option>
            <option>jQuery</option>
            <option>JavaScript</option>
            <option>Vue.js</option>
            <option>HTML5</option>
            <option>CSS3</option>
        </select>
    </form>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

9.11.3 option标签属性

selected，是否选中。
value，选项值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select size="5">
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
            <option value="jQuery">jQuery</option>
            <option value="JavaScript" selected>JavaScript</option>
            <option value="vue.js">Vue.js</option>
            <option value="HTML5">HTML5</option>
            <option value="CSS3">CSS3</option>
        </select>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

相关阅读:
ChatGPT如何应对用户的情感和心理需求？
福布斯 AI 50 榜单中唯一开源向量数据库：Weaviate
webpack的插件webpack-dev-server
threejs (二) 相机
 CSS前导知识
 何为面向对象的编程思想
 NodeJS http请求
 安全易用的文件同步程序：Syncthing | 开源日报 No.70
使用vue3+element-ui plus 快速构建后台管理模板
 day04 spring 声明式事务
原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125592610

《HTML+CSS+JavaScript》之第9章 表单