编程语言前端html
Source
Edit
History

undefined

表单

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<h1>注册</h1>

<!-- 表单 form
 action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
 method: post get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，不能传输大文件
    post方式：比较安全，传输大文件
 -->

<form action="one.html" method="get">
    <!-- 文本输入框: input type="text"
    value: 默认初始值
    maxlength：最长能写几个字符
    size: 文本框的长度
    readonly: 只读
    hidden: 隐藏
    placeholder: 提示信息
    required: 非空判断
    -->
    <p>名字：<input type="text" name="username" value="noahyzhang" maxlength="8" size="30" readonly></p>
    <p>名字2：<input type="text" name="username" placeholder="请输入用户名" required></p>
    <!-- 密码框: input type="password" -->
    <p>密码：<input type="password" name="pwd" hidden></p>

    <!-- 单选框标签
     input type="radio"
     value: 单选框的值
     name：表示组
     checked: 默认
     disabled: 禁用
     -->
    <p>性别：
    <input type="radio" value="boy" name="sex" checked disabled/>男
    <input type="radio" value="girl" name="sex" />女
    </p>

    <!-- 多选框
     input type="checkbox"
     checked: 默认
     -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>

    <!-- 按钮
     input type="button" 普通按钮
     input type="image"  图像按钮
     input type="submit"  提交按钮
     input type="reset"  重置
     -->
    <p>按钮
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../sources/image/hello.jpg">
    </p>

    <!-- 下拉框，列表框 -->
    <p>下拉框
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
        </select>
    </p>

    <!-- 文本域
     cols rows 行/列
     -->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

    <!-- 文件域
     input type="file" name="files"
     -->
    <p>
        <input type="file" name="files">
        <input type="button" name="上传" name="upload">
    </p>

    <!-- 邮件验证 -->
    <p>邮箱：
        <input type="email" name="email">
    </p>

    <!-- URL验证 -->
    <p>URL：
        <input type="url" name="url">
    </p>

    <!-- 数字验证 -->
    <p>数字：
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

    <!-- 滑块 -->
    <p>音量:
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <!-- 搜索框 -->
    <p>搜索:
        <input type="search" name="search">
    </p>

    <!-- 增强鼠标可用性 -->
    <p>
    <label for="mark">点我试试</label>
    <input type="text" id="mark">
    </p>

    <!-- pattern 正则表达式 -->
    <p>自定义邮箱:
        <input type="text" name="diymail" pattern="^[0-9]*$">
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
<hr/>

</body>
</html>