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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>表单练习</h1>
    <hr>
    昵称：<input type="text" placeholder="请输入昵称">
    <br>
    密码：<input type="password" placeholder="请输入密码">
    <br>
    性别：<label><input type="radio" name="sex">男</label>&nbsp;<label><input type="radio" name="sex">女</label>
    <br>
    所在城市：
    <select>
        <option>北京</option>
        <option selected>南京</option>
        <option>上京</option>
    </select>
    <br>
    婚姻状况：<label><input type="radio" name="hunyinzhuangkuang">未婚</label>&nbsp;<label><input type="radio" name="hunyinzhuangkuang">已婚</label>&nbsp;<label><input type="radio" name="hunyinzhuangkuang">保密</label>
    <br>
    喜欢的类型：
    <br>
    <label><input type="checkbox" checked>未婚</label>
    <label><input type="checkbox" >可爱</label>
    <label><input type="checkbox" >性感</label>
    <label><input type="checkbox" >萝莉</label>
    <label><input type="checkbox" >御姐</label>
    <label><input type="checkbox" >小鲜肉</label>
    <label><input type="checkbox" >大叔</label>
    <br>
    个人介绍：
    <br>
    <textarea cols="30" rows="10" placeholder="简单介绍下你自己吧"></textarea>
    <h3>我保证</h3>
    <ul>
        <li>我年满十八周岁</li>
    </ul>
    <h3>我承诺</h3>
    <ol>
        <li>不抽烟</li>
        <li>不喝酒</li>
        <li>拒绝赌和毒</li>
    </ol>
    <label><input type="checkbox" checked>我为以上的所有内容负责</label>
    <br>
    <hr>
    <button type="submit">提交注册</button>
    <button type="reset">重新填写</button>
</body>
</html>