前言:

本文内容:搜索框滑动和简单验证、表单应用、表单初级验证、HTML总结

推荐免费HTML5基础讲解视频:【狂神说Java】HTML5完整教学通俗易懂_哔哩哔哩_bilibili

HTML5笔记代码下载地址:

蓝奏云:下载地址 密码:joker

百度云:下载地址 提取码:drtu

搜索框滑动和简单验证

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框滑动和简单验证</title>
</head>
<body>
<form method="get" action="html1.html">

<!-- 邮件验证-->
<p>邮箱:
<input type="email" name="mail">
</p>
<!-- url验证-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字验证
max:最大值
min:最小值
step:步长
-->
<p>数字:
<input type="number" name="number" max="100" min="0" step="2">
</p>
<!--滑块-->
<p>滑块
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<p>
<input type="submit" value="提交"/>
<input type="reset" value="取消"/>
</p>

</form>
</body>
</html>

表单应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled
1
2
3
4
5
<!--    增强鼠标可用性-->
<p>
<label for="user">账号:</label>
<input type="text" id="user">
</p>

表单初级验证

  • 为什么要进行表单验证?

    • 减轻数据库压力,减少错误数据反复提交
    • 增加网页安全性
  • 常用方式

    • placeholder 输入框提示
    • required 非空验证
    • pattern 正则表达式
    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
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>表单简单验证</title>
    </head>
    <body>
    <form method="get" action="html1.html">
    <!--
    placeholder 提示信息
    -->
    <p>文本框:<input type="text" name="text" placeholder="请输入用户名"/></p>
    <!-- required 非空验证-->
    <p>密码框:<input type="password" placeholder="请输入密码" required></p>
    <!--正则表达式-->
    <p>手机号:
    <input type="text" name="diymail" pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$">
    </p>

    <p>
    <input type="submit" value="提交"/>
    <input type="reset" value="取消"/>
    </p>
    </form>
    </body>
    </html>

HTML总结

HTML总结