HTML----表单元素的简单验证和简单约束

最新推荐文章于 2021-07-23 11:53:48 发布

GOV_D

最新推荐文章于 2021-07-23 11:53:48 发布

阅读量165

点赞数 2

分类专栏： HTML 文章标签： html html5 网页设计

本文链接：https://blog.csdn.net/gdnlnsjd/article/details/118674577

版权

HTML 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

带有简单验证的表单元素
email:输入的如果不算邮箱格式会报错
URL：输入的不是网址会报错
number：输入的数不在限制范围内报错

数字框number
min:最小值
max；最大值
step:按一次上下键增长/减少的值

滑动框range
min:最小值
max；最大值
step:按一次上下键增长/减少的值

搜索框search

表单元素的几个简单约束
+属性
readonly：只读
disabled:不能选中，不能操作
hidden：隐藏，用户看不见，但实际还存在

表单的几个初级验证
表单元素+属性
placeholder:提示信息
required：非空判断
pattern:正则表达式，更进一步的验证，直接去搜索需要的正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的简单验证</title>
</head>
<body>
<form action="我的第一个页面.html" method="post">
    <p>账号:<input type="text" name="username" placeholder="账号"></p>
    <p>密码:<input type="password" name="password" placeholder="密码"></p>

    <p>性别：
        <input type="radio" name="sex" value="boy" checked>男
        <input type="radio" name="sex" value="gril" >女
    </p>

    <p>爱好：
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" value="code">敲代码
        <input type="checkbox" name="hobby" value="read">看书
        <input type="checkbox" name="hobby" value="game">玩游戏
    </p>

    <p>普通按钮：
        <input type="button" name="bt1" value="普通按钮">
    </p>

    <p>图片按钮：
        <input type="image" src="../resouce/image/play.png" width="150" height="=150">
    </p>

    <p>国家：
        <select name="country" >
            <option value="china">中国</option>
            <option value="india">印度</option>
            <option value="japan">日本</option>
            <option value="us" selected>美国</option>
        </select>
    </p>

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

    <p>
        <input type="file" name="file">
    </p>

    <p>邮箱：
        <input type="email" name="email" required pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

    <p>URL:
        <input type="url" name="url" required pattern="^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$">
    </p>

    <p>数字：
        <input type="number" name="number" min="0" max="100" step="2" required>
    </p>

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

    <p>搜索：
        <input type="search" name="search" placeholder="输入搜索内容">
    </p>

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


</body>
</html>

页面效果：
在这里插入图片描述

GOV_D

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML----表单元素的简单验证和简单约束

带有简单验证的表单元素email:输入的如果不算邮箱格式会报错URL：输入的不是网址会报错number：输入的数不在限制范围内报错数字框numbermin:最小值max；最大值step:按一次上下键增长/减少的值滑动框rangemin:最小值max；最大值step:按一次上下键增长/减少的值搜索框search表单元素的几个简单约束+属性readonly：只读disabled:不能选中，不能操作hidden：隐藏，用户看不见，但实际还存在表单的几个初级验证表单元素+属性
复制链接

扫一扫

专栏目录