抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

HTML 表单用于搜集不同类型的用户输入。

input元素

<input type=" ">

radio 单选按钮
text 单行文本输入
submit 提交按钮
checkbox 多选按钮
password 定义密码字段

select元素

下拉列表, option 元素定义待选择的选项,selected 属性定义预定义选项。

1
2
3
4
5
<select name="language">
<option value="Chinese" selected>Chinese</option>
<option value="English">Saab</option>
<option value="Japanese">Fiat</option>
</select>

textarea元素

多行文本输入

综合实例

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>html表单练习</title>
</head>
<body>
<table>
<!-- 第一行 -->
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan"><img height="20px" src="img/man.png"></label>
<input type="radio" name="sex" id="nv"><label for="nv"><img height="20px" src="img/woman.png"></label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>月薪</td>
<td>
<select>
<option >请选择月薪范围</option>
<option >低于5k</option>
<option >5k-1w</option>
<option >1w-1.5w</option>
<option >1.5w-2w</option>
<option >2w+</option>
</select>

</td>
</tr>
<!-- 第三行 -->
<tr>
<td>地区:</td>
<td>
<input type="text" value="输入工作地区">
</td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况:</td>
<td><input type="radio" name="marry" checked="checked" id="marry"><label for="marry">已婚</label> <input type="radio" name="marry">已婚</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历:</td>
<td><input type="text" value="输入学历"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>性格:</td>
<td><input type="checkbox" name="xingge">活泼开朗 <input type="checkbox" name="xingge">沉闷呆板 <input type="checkbox" name="xingge">严肃稳重
</tr>
<!-- 第七行 -->
<tr>
<td>个人介绍:</td>
<td>
<textarea>
个人简介
</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td><input type="submit" value="确认"></td>
</tr>
<!-- 第九行 -->
<tr>
<td></td>
<td><input type="checkbox" value="确认" checked="checked">我承诺信息准确</td>
</tr>

</table>
</body>
</html>

image-20210406225555721

评论