7、表单初级验证

最新推荐文章于 2024-09-11 00:06:23 发布

小黄同学leo

最新推荐文章于 2024-09-11 00:06:23 发布

阅读量58

点赞数

分类专栏： html5的快速入门文章标签：前端 html5 html

本文链接：https://blog.csdn.net/weixin_51257968/article/details/122831304

版权

html5的快速入门专栏收录该内容

9 篇文章 0 订阅

订阅专栏

为什么需要表达验证：

减轻服务器负担
保证数据安全性

常用方式

placeholder：提示输入的信息（需要是输入框）
require：非空判断（需要是输入框）

pattern：正则表达式

（可以去这里

查）最全常用正则表达式大全_赵英超的博客-CSDN博客_最全的常用正则表达式大全

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--
表单form
action：表单提交位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
        get方式提交:我们可以在url中看到我们提交的信息，不安全(默认)
        post：比较安全，传输大文件

表单语法：
        文本输入框：input type="text"
            value="Leo的HTML 默认初始值
            maxlength：最长能输入多少字符
            size：文本框的长度
        密码框：input type="password"
        单选框标签：
             input type="radio"
             value:单选框的值
             name:单选框的组(注意，name需要一致才可以成一组，成单选)
-->
<form action="1.我的第一个网页.html" method="get"  >
<!--
 文本输入框：input type="text"
            value="Leo的HTML 默认初始值
            maxlength：最长能输入多少字符
            size：文本框的长度
-->
    <p>用户名:<input type="text" name="username" maxlength="8" value="Leo的HTML" size="20" hidden ></p>
<!--
 密码框：input type="password"
-->
    <p>密码：<input type="password" name="password" placeholder="请输入密码"></p>
<!--
单选框标签：
    input type="radio"
    value:单选框的值
    name:单选框的组(注意，name需要一致才可以成一组，成单选)
-->
    <p><input type="radio" value="boy" checked  name="sex">男
       <input type="radio" value="girl" name="sex">女
    </p>

<!--
多选框
    input type="checkbox"
    value:多选框的值
    name：多选框的组，建议多选也选成一组
    -->
    <p>
        爱好:
        <input type="checkbox" value="sleep"checked name="hobby">睡觉
        <input type="checkbox" value="chat" name="hobby" disabled>聊天
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="game" name="hobby">睡觉
    </p>
    <hr>
<!--按钮
input type="button" 普通按钮
input type="image"  图片按钮
input type="submit" 提交按钮
input type="reset"  重置按钮
-->
    <p><input type="button" name="bot" value="点击可变长" ></p>
    <input type="image" src="../resource/image/P1.jpg" width="200px" height="250px">
    <hr>
<!--下拉框，列表框
select name="name"
option value="value"
-->
    <select name="列表名称" >
        <option value="china" selected>中国</option>
        <option value="usa">美国</option>
        <option value="japan">日本</option>
        <option value="indian">印度</option>
    </select>
    <hr>
<!--文本域
textarea name="textarea" cols="" rows=""
-->
    <p>反馈
        <textarea name="textarea" cols="50" rows="10" readonly>文本内容</textarea>
    </p>
    <hr>
<!--文件域
input type="file" name="files"
input type="button" name="" value=""
-->
    <p>
        <input type="file"  name="files">
        <input type="button" name="upload" value="上传">
    </p>
<!--邮箱验证-->
    <p>
        邮箱：
        <input type="email" name="email" required pattern="^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$" >
    </p>
<!--URL验证-->
    <p>
        URL：
        <input type="url" name="url">
    </p>
<!--数字验证-->
    <p>
        数字：
        <input type="number" max="100" min="0" step="10" name="num">
    </p>
<!--滑块
input type="range"
step:增加或减少的数幅度
max：最大值
min：最小值
-->
    <p>音量控制：<input type="range" name="voice" max="100" min="0" step="2" disabled> </p>
<!--搜索框-->
    <p>搜索：<input type="search" name="search"></p>
    <p><input type="submit"> <input type="reset" value="重置数据"></p>
</form>
</body>
</html>