表单

最新推荐文章于 2023-03-16 22:24:38 发布

遇事不通请右转

最新推荐文章于 2023-03-16 22:24:38 发布

阅读量129

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_45238600/article/details/103154597

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

作为本人《HTML5》专栏的最后一篇博文，也是我们HTML语言学习的重中之重，希望同学们在这里打起精神，认真去看本片博文的内容

那么，现在就是我们这一块知识点的核心知识了——表单：
我们还是通过对代码的注释来讲解这里的知识点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h1>注册</h1>

<!--表单from
action：表单提交的位置：可以是一个网站，也可以是一个请求处理的地址
method:post,get提交方式
    get方式提交：我们可以看到提交的信息，不安全、高效
    post方式提交：比较安全、传输大文件
-->

<form action="1.MyFirstHtml.html" method="post">
    <!--文本输入框：
        input type="text"
        value:初始值
        maxlength:最长能写几个字符(注意：这里的字符数，不分中英文)
        size:文本框长度（单位是 像素）

        readonly:只读、不可改
        disabled：该按钮不可选
        hidden:隐藏该区域（仅不可视、不可输入，但是是真实存在的）
        required:不可为空，否则无法提交
    -->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" id="mark" required></p>
    <!--密码框：input type="password"-->
    <p>密码：<input type="password" name="pwd" placeholder="请输入密码"></p>
    <p>特长：<input type="specialty" name="pwd" hidden></p>
    <p>爱好：<input type="specialty" name="pwd" value="单推右转哥" readonly></p>

    <!--单选框标签
        input type="radio"
        value：单选框的值
        name：表示单选的分组
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
        <input type="radio" value="boy" name="sex" disabled>机器人
    </p>



    <!--多选框
        input type=checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="view cartoon" name="hobby">看《革命机》
        <input type="checkbox" value="caixvkun" name="hobby" checked>基尼胎没
        <input type="checkbox" value="shadiao" name="hobby">学生证变
        <input type="checkbox" value="zhizhang" name="hobby">草根武装
    </p>

    <!--按钮
        input type="button" 普通按钮
        input type="image"  图像按钮
        input type="submit" 提交按钮
        input type="reset"  重置按钮（不能重置我们代码自动赋初值的文本框内容）

        checked：默认选中
    -->
    <p>按钮：
        <input type="button" name="btn" value="点击按钮，关注右转哥！">
        <input type="image" src="../resources/image/BingoGirl.jpg">
    </p>

    <p>学习右转哥的博文后，你想...
        <!--下拉框，列表框-->
        <select name="列表名称">
            <option value="giveALike">点赞</option>
            <option value="focusOn" checked>关注</option>
            <option value="comments">评论</option>
            <option value="forwarding">转发</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>
    
    <!--URL-->
    <p>url：
        <input type="url" name="url">
    </p>
    
    <!--数字-->
    <p>满意度：
        <input type="number" name="satisfaction" max="100" min="0" step="5">
    </p>
    
    <!--滑块-->投币数量：
    <input type="range" name="number" min="0" max="5" step="1">

    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>

    <p>
        <!--增强鼠标可用性
            label：点击label修饰的区域，则跳转到for内的标记的id声明的区域
        -->
        <label for="mark">点击修改用户名</label>
    </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">
        <input type="reset">
    </p>
    
</form>


</body>
</html>

我们现在来观看下显示结果：

HTML5 表单展示

因为录屏还是无法录制弹出的页面，所以本人将弹出的页面截图展示：
在这里插入图片描述
那么，作为本人《HTML5》专栏的最后一篇博文，看到这里的同学也就意味着已经学习完了所有有关HTML5的基本内容，那么，本人在现阶段（近2年内）对于前端的学习，也就在这里完结了。

若是对本专栏博文有疑问、意见或建议的，请在下方评论区提出，本人将尽早予以答复，谢谢

遇事不通请右转

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单

作为本人《HTML5》专栏的最后一篇博文，也是我们HTML语言学习的重中之重，希望同学们在这里打起精神，认真去看本片博文的内容那么，现在就是我们这一块知识点的核心知识了——表单：我们还是通过对代码的注释来讲解这里的知识点：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
复制链接

扫一扫

专栏目录