前言：
本文内容：文本框和单项框、按钮和多选框、列表框文本域和文件域
推荐免费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">
<p>文本框：
<input type="text" name="text" value="Joker大雄" maxlength="9" size="30"/>
</p>
<p>密码框：<input type="password"></p>
<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">
<p>文本框：<input type="text" name="text" value="Joker大雄" maxlength="9" size="30"/></p>
<p>密码框：<input type="password"></p>
<p>单选框：
<input type="radio" value="radio1" name="radio" checked="checked">选项一<input type="radio" value="radio2" name="radio">选项二
</p>
<p>多选框：
<input type="checkbox" value="checkbox1">多选框1
<input type="checkbox" value="checkbox2">多选框2
<input type="checkbox" value="checkbox3">多选框3
</p>
<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">
<p>文本框：<input type="text" name="text" value="Joker大雄" maxlength="9" size="30"/></p>
<p>密码框：<input type="password"></p>
<p>单选框：
<input type="radio" value="radio1" name="radio" checked="checked">选项一<input type="radio" value="radio2" name="radio">选项二
</p>
<p>多选框：
<input type="checkbox" value="checkbox1">多选框1
<input type="checkbox" value="checkbox2">多选框2
<input type="checkbox" value="checkbox3">多选框3
</p>
<p>按钮：
<input type="button" value="按钮">
<input type="image" src="../resource/img1.png" width="200px" height="90px">
</p>
<p>下拉框：
<select name="select">
<option>请选择...</option>
<option>下拉框1</option>
<option>下拉框2</option>
<option>下拉框3</option>
</select>
</p>
<p>文本域：
<textarea name="textarea" cols="50" rows="20">
</textarea>
</p>
<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>
|
微信
