表单、应用、初级验证

秃头酱酱

已于 2022-02-24 09:06:15 修改

阅读量319

点赞数

分类专栏： HTML 文章标签： html 前端

于 2022-02-23 09:30:11 首次发布

本文链接：https://blog.csdn.net/weixin_59806308/article/details/123082424

版权

HTML 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

（一）表单语法

（二）表单元素格式

（三）单选框和多选框

（四）按钮

（五）下拉框

（六）文本域和文件域

（七）多功能标签

（八）表单的应用

只读：readonly
禁用：disabled
隐藏：hidden

（九）表单初级验证

提示信息：placeholder（用在输入框中）
非空判断：required
正则表达式：pattern

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置（可以是网站，也可以是请求处理地址）
method：get方式提交：我们可以在url中看到我们提交的信息，高效，不安全
       post方式提交：比较安全，可传输大文件
-->
<form action="01-我的第一个网页.html" method="post">
    <!--文本输入框input type="text"-->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>
    <!--密码输入框input type="password"-->
    <p>密码：<input type="password" name="password" required></p>
    <!--单选框标签
    input type="radio"
    value:单选框的值
    name：表示组
    -->
    <p>性别：
        <input type="radio" value="male" name="sex">男
        <input type="radio" value="female" name="sex">女
    </p>

    <!--多选框
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sing" name="hobby">唱歌
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--按钮
    input type="button" （普通按钮）
    input type="submit" （提交按钮）
    input type="reset"  （重置按钮）
    input type="image"  （图像按钮）
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击改变">
    </p>
    <p>图像按钮：
        <input type="image" src="../resources/image/头像.jpg"
               width="18px" height="18px">
    </p>
    <!--下拉框（列表框）-->
    <p>国籍：
        <select name="列表名称">
            <option value="China" selected>中国</option>
            <option value="UK">英国</option>
            <option value="US">美国</option>
            <option value="K">韩国</option>
        </select>
    </p>
    <!--文本域：列cols；行rows=-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">
        文本内容
        </textarea>
    </p>
    <!--文件域
    input type="file"name="files"
    -->
    <p>文件：
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <!--多功能标签-->
    <p>邮箱验证：
        <input type="email" name="email">
    </p>
    <p>URL验证：
        <input type="url" name="url">
    </p>
    <p>数字验证：
        <input type="number" name="number" max="100" min="0" step="10">
    </p>
    <p>滑块调节：
        <input type="range" name="voice" max="100" min="0" step="any">
    </p>
    <p>搜索框：
        <input type="search" name="search">
    </p>
    <!--增强鼠标可用性（了解）-->
    <p>
        <label for="mark">点击试试</label>
        <input type="text" id="mark">
    </p>
    <p>自定义邮箱：
        <input type="text" name="diymail"
               pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>
    <p>
        <input type="submit" name="Button" value="提交">
        <input type="reset" name="Reset" value="重置">
    </p>
</form>
<a href="https://www.jb51.net/tools/regex.htm"target="_self">正则表达式</a>
</body>
</html>