前言:

本文内容:文本框和单项框、按钮和多选框、列表框文本域和文件域

推荐免费HTML5基础讲解视频:【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

文本框和单项框

属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
maxlength type为text或password时,输入的最大字符数
checked type为radio或checkbox时,指定按钮是否被选中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框和单选框</title>
</head>
<body>
<form method="get" action="html1.html">
<!--文本输入框
type="text"
value 默认初始值
maxlength 输入最大长度
size 文本框长度

-->
<p>文本框:
<input type="text" name="text" value="Joker大雄" maxlength="9" size="30"/>
</p>
<!--密码框 type="password"-->
<p>密码框:<input type="password"></p>
<!--单选框标签
input type="radio"
value 单选框值
name 相同的name值表示在同一个组里

-->
<p>单选框:
<input type="radio" value="radio1" name="radio" checked="checked">选项一
<input type="radio" value="radio2" name="radio">选项二
</p>
</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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮和多选框</title>
</head>
<body>
<form method="get" action="html1.html">
<!--文本输入框
type="text"
value 默认初始值
maxlength 输入最大长度
size 文本框长度
-->
<p>文本框:<input type="text" name="text" value="Joker大雄" maxlength="9" size="30"/></p>
<!--密码框 type="password"-->
<p>密码框:<input type="password"></p>
<!--单选框标签
input type="radio"
value 单选框值
name 相同的name值表示在同一个组里

-->
<p>单选框:
<input type="radio" value="radio1" name="radio" checked="checked">选项一<input type="radio" value="radio2" name="radio">选项二
</p>
<!--多选框
type="checkbox"
-->
<p>多选框:
<input type="checkbox" value="checkbox1">多选框1
<input type="checkbox" value="checkbox2">多选框2
<input type="checkbox" value="checkbox3">多选框3
</p>
<!--按钮
type="button" 普通按钮
type="image" 图片按钮(也可以提交)
type="submit" 提交按钮
type="reset" 重置按钮
-->
<p>按钮:
<input type="button" value="按钮">
<input type="image" src="../resource/img1.png" width="200px" height="90px">
</p>
<p>
<input type="submit" value="提交"/>
<input type="reset" value="取消"/>
</p>

</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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表框文本域和文件域</title>
</head>
<body>
<form method="get" action="html1.html">
<!--文本输入框
type="text"
value 默认初始值
maxlength 输入最大长度
size 文本框长度
-->
<p>文本框:<input type="text" name="text" value="Joker大雄" maxlength="9" size="30"/></p>
<!--密码框 type="password"-->
<p>密码框:<input type="password"></p>
<!--单选框标签
input type="radio"
value 单选框值
name 相同的name值表示在同一个组里

-->
<p>单选框:
<input type="radio" value="radio1" name="radio" checked="checked">选项一<input type="radio" value="radio2" name="radio">选项二
</p>
<!--多选框
type="checkbox"
-->
<p>多选框:
<input type="checkbox" value="checkbox1">多选框1
<input type="checkbox" value="checkbox2">多选框2
<input type="checkbox" value="checkbox3">多选框3
</p>
<!--按钮
type="button" 普通按钮
type="image" 图片按钮(也可以提交)
type="submit" 提交按钮
type="reset" 重置按钮
-->
<p>按钮:
<input type="button" value="按钮">
<input type="image" src="../resource/img1.png" width="200px" height="90px">
</p>
<!-- 下拉框,列表框
<select>
<option>下拉框1</option>
<option>下拉框2</option>
</select>
-->
<p>下拉框:
<select name="select">
<option>请选择...</option>
<option>下拉框1</option>
<option>下拉框2</option>
<option>下拉框3</option>
</select>
</p>
<!--文本域
cols="" 跨列
rows="" 跨行
-->
<p>文本域:
<textarea name="textarea" cols="50" rows="20">

</textarea>
</p>
<!--文件域
type="file"
name 传值名称
-->
<p>
<input type="file" name="files"><br/>
<input type="button" name="upload" value="上传">
</p>
<p>
<input type="submit" value="提交"/>
<input type="reset" value="取消"/>
</p>

</form>
</body>
</html>