HTML笔记 —— 表单

最新推荐文章于 2023-03-06 20:47:29 发布

一纸春秋

最新推荐文章于 2023-03-06 20:47:29 发布

阅读量257

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44823756/article/details/120935277

版权

前端专栏收录该内容

9 篇文章 4 订阅

订阅专栏

本篇博客是根据B站up@遇见狂神说的视频以及W3school官网文档整理的笔记，里面会有一些视频的截图和官网的概念，以及我个人的注释笔记等，
全篇博客包括代码均为自己手打，结果截图均为自己运行的结果。
注：博文中的截图和网络上找到的图，都没有加上csdn的水印，只有我自己的图片才会有水印。这篇博客只是学习交流所用
以下是视频链接
https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0
W3school官网链接
https://www.w3school.com.cn/html/html_jianjie.asp

表单 < form >

HTML 表单用于搜集不同类型的用户输入

HTML 表单包含表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等

在这里插入图片描述

< input > 元素

< input > 元素是最重要的表单元素。根据不同的type属性，< input > 元素会有不同的功能
例如（当然不止这些，这个表格中只是部分内容）：
在这里插入图片描述

常规文本输入，密码框，提交表单，清空表单

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

<form action="1.我的第一个网页.html" method="get">
    <!--文本输入流:
    input标签
    type默认是text,作用是在页面上显示一个文本输入框
        是password时,作用是产生一个密码输入框
        type的值不同,对应的内容不同,内容可以是密码框,多选框等
    name,命名代表input标签叫什么名字,方便网页去接收
    value,默认值
    maxlength,是最长能写几个字符
    size,是文本输入框的大小长度
    -->
    <!--文本输入框-->
    <p>姓名: <input type="text" name = "uesrname" value="默认值" maxlength="8" size="30"> </p>
    
    <!--readonly只读,不能修改里面的值-->
    <p>名字:
        <input type="text" name="username" value="admin" readonly>
    </p>
    
    <!--密码框-->
    <!--hidden隐藏,但是标签还在,如果设定初始值value,也能随着表单一起提交上去-->
    <p>密码: <input type="password" name = "pwd" > </p>
    
    <!--提交表单-->
    <!--disabled禁用按钮-->
    <p>
        <input type="submit" value="提交表单">
        <input type="reset" value="清空表单">
    </p>

</form>
</body>
</html>

在这里插入图片描述

name和value属性的区别

name是控件的名称，多个空间可以取同一个名称
这个名称可以让我们对这个控件进行操作，比如锚链接里面，就可以通过一个控件的名称，跳转到该控件所在的位置
value是控件的值，不同的控件的value的作用不同
（1）type等于button、reset、submit时，value是显示在按钮上的文本内容
（2）type等于text、password、hidden时，value是默认显示的初始值
（3）type等于checkbox、radio、image时，value是与输入相关联的值

name属性还有一个作用，当填写好表单里面的信息后，点击提交表单，可以在浏览器的地址栏看到这些表单的信息（前提是form标签的属性method的属性值是get）
在这里插入图片描述
这里的username就是第一个控件，用来输入姓名的文本框的名字
这里是以键值对的形式打印在地址栏，如果没有name属性相当于没有key值，也就无法打印

比如我删去第一个input标签里面的name属性，再提交一次表单，结果为
在这里插入图片描述

整体代码

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

<form action="1.我的第一个网页.html" method="get">
    <!--文本输入流:
    input标签
    type默认是text,作用是在页面上显示一个文本输入框
        是password时,作用是产生一个密码输入框
        type的值不同,对应的内容不同,内容可以是密码框,多选框等
    name,命名代表input标签叫什么名字,方便网页去接收
    value,默认值
    maxlength,是最长能写几个字符
    size,是文本输入框的大小长度
    -->
    <!--文本输入框-->
    <!--<p>名字: <input type="text" name = "uesrname" value="默认值" maxlength="8" size="30"> </p>-->
    <!--readonly只读,不能修改里面的值-->
    <p>名字:
        <input type="text" name="username" value="admin" readonly>
    </p>
    <!--密码框-->
    <!--hidden隐藏,但是标签还在,如果设定初始值value,也能随着表单一起提交上去-->
    <p>密码: <input type="password" name = "pwd" hidden> </p>

    <!--单选框
        type = "radio"
        value : 单选框的值
        name : 表示组
        checked 默认选中
    -->
    <!--单选框需要设置name属性,否则和多选框一样,可以选择多个选项-->
    <!--不同的input标签拥有相同的name,就可以视为是一个组的,这样就只能选择其中的一个-->
    <!--disabled表示禁用,这个选项就无法选择了-->
    <p>性别:
        <input type="radio" value="boy" name="sex" disabled/>男
            <input type="radio" value="girl" name="sex"/>女
    </p>


    <!--多选框
        type = "checkbox"
        checked 默认选中
    -->
    <p>爱好:
        <input type="checkbox" value="sleep" name="favorite">睡觉
        <input type="checkbox" value="chat" name="favorite">聊天
        <input type="checkbox" value="code" name="favorite" checked>敲代码
        <input type="checkbox" value="game" name="favorite">打游戏
    </p>



    <!--按钮
        input type="button" 普通按钮
        input type="image" 图像按钮
        input type="submit" 提交按钮
        input type="reset" 重置按钮
        按钮的value值是浏览器上显示的按钮名称,前面的单选框和多选框显示的都是<input>后面的名称
        例如<input type="radio" value="boy" name="sex"/>男显示的是男而不是boy
    -->
    <p>按钮
        <input type="button" name="btn1" value="一个按钮">
        <input type="image" src="../resources/image/图片2.png" width="400px" height="300px">
    </p>



    <!--下拉框,列表框 select标签
    selected 将这一选项作为默认值
    -->
    <p>国家:
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="American">美国</option>
            <option value="Japanese">日本</option>
            <option value="Russia" selected>俄罗斯</option>
        </select>
    </p>



    <!--文本域
    -->
    <p>反馈:
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>



    <!--文件域-->
    <p>选择文件:
        <input type="file" name="files">
    </p>



    <!--邮件验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>



    <!--URL验证-->
    <p>url
        <input type="url" name="url">
    </p>



    <!--数字验证
        验证输入的数字是否在min,max的区间
        step是输入栏右边快速增加减少的两个小按钮
    -->
    <p>数字:
        <input type="number" name="number" max="100" min="0" step="10">
    </p>



    <!--滑块
        这里的滑块常见于音量调节,最大值和最小值就是音量的最大最小值
        step就是每次滑动增加或者减少的值
    -->
    <p>滑块:
        <input type="range" min="0" max="50" step="5">
    </p>



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



    <!--增强鼠标可用性
        也就是点击标签名的时候,自动锁定这个框
    -->
    <p>
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>



    <!--提交表单-->
    <!--disabled禁用按钮-->
    <p>
        <input type="submit" value="提交表单">
        <input type="reset" value="清空表单">
    </p>

</form>
</body>
</html>

在这里插入图片描述

表单验证

在这里插入图片描述

placeholder，用于输入框

在这里插入图片描述

required非空判断

在这里插入图片描述

pattern传入正则表达式

注意这里的正则表达式不需要用\来代替
在这里插入图片描述
输入的内容必须符合正则表达式才可以提交表单

一纸春秋

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML笔记 —— 表单

本篇博客是根据B站up@遇见狂神说的视频以及W3school官网文档整理的笔记，里面会有一些视频的截图和官网的概念，以及我个人的注释笔记等，全篇博客包括代码均为自己手打，结果截图均为自己运行的结果。注：博文中的截图和网络上找到的图，都没有加上csdn的水印，只有我自己的图片才会有水印。这篇博客只是学习交流所用以下是视频链接https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0W3school官网链接https://
复制链接

扫一扫