Day04

搜索框滑块和简单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框滑块和简单验证</title>
</head>
<body>
<form action="1.初识.html">
    <p>
        <input type="password"name="pwd"value="123123" hidden>
    </p>
<!--    邮箱验证-->
<p>邮箱：
    <input type="email" name="email" size="30"value="12@1" hidden>
</p>
​
<!--    URL-->
    <p>URL:&nbsp;&nbsp;&nbsp;
        <input type="URL" name="url" size="30">
    </p>
<!--    数字-->
    <p>数字：
        <input type="number" name="number" max="10" min="0"step="1">
    </p>
<!--    滑块
input type="range"-->
    <p>滑块：
        <input type="range" name="voice" min="0" max="100"step="2">
    </p>
<!--    搜索框-->
    <p>搜索：
        <input type="search"name="search">
    </p>
    <input type="submit">
</form>
</body>
</html>

表单的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的应用</title>
</head>
<body>
<form action="1.初识.html" method="get">
<!--readonly:只读不可更改
hidden:隐藏框-->
<p>名字:
    <input type="text" name="username" value="admin" readonly hidden>
</p>
<p>密码:
    <input type="password" name="pwd" value="123456" >
</p>
<!--disabled:禁用
checked:默认-->
<p>性别：
    <input type="radio" value="boy" name="sex" checked disabled>男
    <input type="radio" value="girl" name="sex">女
</p>
    <p>
        <!--增强鼠标可用性-->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
    <input type="submit">
​
</form>
</body>
</html>

表单初级验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单初级验证</title>
</head>
<body>
<form action="1.初识.html">
    <p>姓名：
        <input type="text" name="name" placeholder="请输入名字：" required>
    </p>
    <p>电话：
        <input type="text" name="tel" pattern=“^((d{3,4})|d{3,4}-)?d{7,8}$” >
    </p>
    <input type="submit">
</form>
</body>
</html>
 
posted @   宙斯xcl  阅读(89)  评论(0)  编辑  收藏  举报
相关博文：
·  Day03
·  Day04
·  搜索框滑块和简单验证
·  HTML5-搜索框滑块和简单验证
·  HTML搜索框滑块
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手