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