16、搜索框、滑块、简单验证

之前都是一些基本的文件域都没有验证

16.1 邮件验证

邮件验证也是input标签中的一种，type属性为email。这里的文本框就添加了简单的email的验证

16.2 URL验证

input标签type属性为url就是url框，会有网址的简单验证

16.3 数字验证

input标签中type属性为number，其中max属性为最大值，min为最小值，step属性表示步长（每次点击上下键自动增加的个数，例如商品数量）

16.4 滑块

input标签中type属性为range，max属性为最大值，min最小值为最小值，name属性为键

16.5 搜索框

input标签中type属性为search

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册title>
head>
<body>
<h1>注册h1>


<form action="4.链接标签学习.html" method="get">

    <p>用户名：<input type="text" name="username" value="提高效率" maxlength="8" size="30">p>

    <p>密码：<input type="password" name="pwd">p>

    <p>性别：
        <input type="radio" value="man" name="sex">男
        <input type="radio" value="woman" name="sex">女
    p>



    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="eat" name="hobby">吃饭
        <input type="checkbox" value="fight" name="hobby">打豆豆
    p>


    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../resources/image/1.jpg">
    p>



    <p>下拉列表
        <select name="country" >
            <option value="china" selected>中国option>
            <option value="russia" >俄罗斯option>
            <option value="US" >美国option>
            <option value="UK" >英国option>
        select>
    p>


    <p>文本域：意见反馈
        <textarea name="textarea" cols="50" rows="10">textarea>
    p>



    <p>文件域：文件上传
        <input type="file" name="files">
        <input type="button" name="upload" value="点击上传">
    p>





    <p>邮箱：
        <input type="email" name="email">
    p>


    <p>URL:
        <input type="url" name="url">
    p>

    <p>数字验证：商品数量
        <input type="number" name="count" step="1" max="100" min="0">
    p>

    <p>音量：
        <input type="range" max="100" min="0" name="voice">
    p>

    <p>搜索：
        <input type="search" name="search">
    p>

    <p>
        <input type="submit">
        <input type="reset">
    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
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

相关阅读:
knex事务
最近5年133个Java面试问题列表
设计模式 — — 单例模式
[Java基础] 设计模式之单例模式
反编译正常回编译出现问题自己解决办法
路由器的路由过程
Docker Swarm 节点维护
抖音播映量破500的原因找到了，不是内容不好，而是这5个功能
如何通过执行SQL为低代码项目提速？
基于STM32单片机温度水位-proteus仿真-源程序

原文地址：https://blog.csdn.net/nytcjsjboss/article/details/134061079