【HTML5】HTML5基础教程(6)

前言：

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

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

HTML5笔记代码下载地址：

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

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

搜索框滑动和简单验证

<!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

<!--    增强鼠标可用性-->
    <p>
        <label for="user">账号：</label>
        <input type="text" id="user">
    </p>

表单初级验证

为什么要进行表单验证？
- 减轻数据库压力，减少错误数据反复提交
- 增加网页安全性

常用方式

placeholder 输入框提示
required 非空验证
pattern 正则表达式

<!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>