HTML5--新增表单元素/属性/事件(3)

最新推荐文章于 2022-05-19 11:15:33 发布
最新推荐文章于 2022-05-19 11:15:33 发布
阅读量223 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/diweikang/p/8598406.html
版权

前言：

　　HTML5在原本已有表单元素的基础上新增了新的表单元素和属性，增强了表单元素的功能。

第一类.新增input(type)类型

　　1.type为email

　　　　作用：email 类型用于包含 email 地址的输入域。

　　　　 特性：提供了 默认电子邮箱的完整验证：要求 必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的表单提交

　　　　email示例：如果内容不满足邮箱格式，提交表单会有错误提示信息。

<body>
    <form action="#">
        邮箱:<input type="email">
        <input type="submit" value="提交">
    </form>
</body>

　　2.type为url

　　　　作用：url类型用于包含 网址的输入域。

　　　　 特性：提供了网址完整验证，只能输入合法的网址： 必须包含http://(例:http://www.baidu.com)

　　　　url示例：如果内容不满足网址格式，提交表单会有错误提示信息。

<body>
    <form action="#">
        网址:<input type="url">
        <input type="submit" value="提交">
    </form>
</body>

　　3.type为number

　　　　作用：number 类型用于包含数值的输入域。

　　　　 特性： 只能输入数字(包含小数点)，不能输入其它的字符
　　　　 属性：
　　　　　　max -- 限制输入框的最大值
　　　　　　min -- 限制输入框的最小值
　　　　　　value -- 输入框的默认值
　　　　　　step -- 规定数字增长间隔

　　　　number示例：输入框中只能输入number类型值，不能输入其他类型的值

<form action="#">
        数量：<input type="number" value="60" max="100" min="0" step="3">         
        <br>
        <input type="submit" value="提交">
</form>

　　4.type为search

　　　　作用：search 类型用于搜索域，比如站点搜索或 Google 搜索

　　　　 特性：输入值后， 输入框后带有关闭按钮可以清除输入框内容

　　　　search示例：

<body>
    <form action="#">
        请输入商品名称：<input type="search"> <br>
        <input type="submit" value="提交">
    </form>
</body>

　　5.type为range

　　　　作用：range 类型用于包含一定范围内数字值的输入域(可以用作音量键)

　　　　 特性：显示为滑动条
　　　　 属性：
　　　　　　max -- 允许的最大值
　　　　　　min -- 允许的最小值
　　　　　　value -- 规定的默认值
　　　　　　step -- 规定数字增长间隔

　　　　range示例：

<body>
    <form action="#">
        范围：<input type="range" max="100" min="0" value="50"> <br>
        <input type="submit" value="提交">
    </form>
</body>

　　6.type为color

　　　　作用：输入类型用于规定颜色

　　　　 特性：该类型允许你从 拾色器中选取颜色

　　　　color示例：

<body>
    <form action="#">
        颜色：<input type="color"> <br>
        <input type="submit" value="提交">
    </form>
</body>

　　7.type为tel

　　　　作用：tel 输入类型用于包含电话号码的输入字段

　　　　 特性：tel它 并不是来实现验证。它的本质目的是为了能够在 移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字

　　　　tel示例：

<body>
    <form action="#">
        电话：<input type="tel"> <br>
        <input type="submit" value="提交">
    </form>
</body>

　　8.type为image

　　　　作用：image 输入类型将图像定义为提交按钮。

　　　　image示例：　

<body>
    <form action="#">
        <input type="image" src="./img/eg_submit.jpg" alt="Submit"/>
    </form>
</body>

　　9.type为日期相关类型

　　　　类型：　　　　

　　　　　　date - 选择日、月、年

　　　　　　month - 选择月、年

　　　　　　week - 选择周、年

　　　　　　time - 选择时间（时、分）

　　　　　　datetime - 选择时、日、月、年（UTC 时间）

　　　　　　datetime-local - 选择时、日、月、年（本地时间）

　　　　日期示例：　　　　

<body>
    <form action="#">
        时分：<input type="time"> <br>
        年月日：<input type="date"> <br>
        年月日 时分：<input type="datetime"><br>
        年月日 时分：<input type="datetime-local"> <br>
        年月：<input type="month"> <br>
        年周：<input type="week">
        <input type="submit" value="提交"> 
    </form>
</body>

第二类.新增form属性

　　1.noValidate属性

　　　　作用：novalidate 属性规定当提交表单时不对其进行验证。

　　　　noValidate属性示例：　

<body>
    <form action="#" novalidate>
        <!-- 当提交表带内容时，不会对邮箱输入框进行校验 -->
        邮箱：<input type="email" placeholder="请输入你的邮箱地址...">
        <input type="submit">
    </form>
</body>

　　2.autocomplete属性

　　　　作用：autocomplete属性规定是否开启表单内容的自动补全功能。

　　　　注意：

　　　　　　1.表单元素的内容必须提交过。

　　　　　　2.需要自动补全的表单元素需要设置name属性。

　　　　autocomplete属性示例：　　

<body>
    <form action="#" autocomplete="on">
        <!-- 当再次输入内容时，会根据之前输入的内容完成自动补全 -->
        邮箱：
        <input type="email" placeholder="请输入你的邮箱地址..." name="email">
        <input type="submit">
    </form>
</body>

 

第三类.新增input属性

　　1.form属性

　　　　作用：HTML4中表单内的从属元素必须书写在表单内部，而HTML5中，表单元素可以写在任何地方，然后给元素指定一个form属性，属性值为该表单的id，这样就可以声明元素从属于指定表单。

　　　　form属性示例：　

<body>
    <form action="#" id="testForm">
        用户名：<input type="text">
    </form>
    <!-- 此处密码输入框也从属于form表单 -->
    密码：<input type="password" form="testForm">
</body>

　　2.formaction属性

　　　　理解：formaction属性类似于form表单的action属性，设置表单提交路径

　　　　作用：HTML4中表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而HTML5中，可以为所有的提交按钮增加不同的formAction属性，使单击不同的提交按钮将表单提交到不同的页面。

　　　　formAction属性示例：　

<body>
    <form id="testForm">
        <input type="submit" value="s1" formaction="xx.jsp">
        <input type="submit" value="s2" formaction="yy.jsp">
        <input type="submit" value="s3" formaction="zz.jsp">
    </form>
</body>

　　3.formmethod属性

　　　　理解：formmethod属相类似form表单的method属性，设置表单提交方式

　　　　作用：HTML4中一个表单只能由一个method属性来统一指定提交方法。HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。

　　　　取值：常用提交方式是get、post，当然也有其他的提交方式。

　　　　formmethod属性示例：　　　

<body>
    <form id="testForm">
        <input type="submit" name="s1" value="v1" formmethod="post" formaction="xx.jsp">
        <input type="submit" name="s2" value="v2" formmethod="get" formaction="yy.jsp">
    </form>
</body>

　　4.formenctype属性

　　　　理解：formenctype属性类似form表单的enctype属性，设置表单数据编码

　　　　作用：HTML4中表单具有enctype属性，用于指定如何对表单内的数据编码。HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。

　　　　formenctype属性示例：

<body>
    <form id="testForm">
        <!-- 表单数据中的空格变成+号，但不对特殊字符处理。 -->
        <input type="text" formenctype="text/plain">
        <!-- 不对字符进行编码，在使用包含文件上传控件的表单时，必须使用此类型 -->
        <input type="text" formenctype="multipart/form-data">
        <!-- 发送前编码所有字符，当表单action为get时，将表单数据转成字符串。 -->
        <input type="text" formenctype="application/x-www-form-urlencoded">
    </form>
</body>　

　　5.formtarget属性

　　　　理解：formtarget属性类似form表单的target属性，设置新页面打开位置

　　　　作用：HTML4中表单具有target属性，用于指定在何处打开表单提交后所需要加载的页面。HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开页面。

　　　　取值：_blank，_self，_parent，_top，_framename(指定name的框架)

　　　　formtarget属性示例：　　

<body>
    <form>
        <!-- _blank在新的空白页面打开 -->
        <input type="submit" value="s1" formtarget="_blank" formaction="xx.jsp">
        <!-- _self在当前页面打开 -->
        <input type="submit" value="s2" formtarget="_self" formaction="yy.jsp">
        <!-- _parent在当前框架的父框架打开 -->
        <input type="submit" value="s3" formtarget="_parent" formaction="zz.jsp">
        <!-- _top在当前窗口打开 -->
        <input type="submit" value="s3" formtarget="_top" formaction="yy.jsp">
        <!-- _在指定name的frmae中打开 -->
        <input type="submit" value="s3" formtarget="_framename" formaction="ff.jsp">
    </form>
</body>

　　6.autofocus属性

　　　　作用：为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。

　　　　autofocus属性示例：当页面打开时，密码框自动获得焦点。　

<body>
    <form>
        用户名:<input type="text"><br/>
        密码:<input type="text" autofocus>
    </form>
</body>

　　7.required属性

　　　　作用：HTML5新增的required属性可以应用在大多数输入元素上，提交时如果内容为空，不允许提交并有提示信息显示。

　　　　required属性示例：　　　

<body>
    <form id="testForm" action="#">
        用户名：<input type="text" name="userName" required><br/>
        <input type="submit" value="提交">
    </form>
</body>

　　8.labels属性

　　　　作用：HTML5中为所有可使用标签的表单元素、button、select元素等，定义了一个labels属性，属性值为NodeList对象，代表该元素所绑定的标签元素所构成的集合。

　　　　labels属性示例：

<body>
    <form id="testForm" action="#">
        <label id="label" for="txt_name">姓名:</label>
        <input type="text" id="txt_name">
        <input type="button" id="btnValidate" value="验证" onclick="Validate()">
    </form>
    <script>
        function Validate() {
            var txtName = document.getElementById('txt_name')
            var btn = document.getElementById('btnValidate')
            var form = document.getElementById('testForm')
            if (txtName.value.trim() === ''){
                var label = document.createElement('label')
                // 新建一个label标签，同时让其和输入框关联
                label.setAttribute('for', 'txt_name')
                form.insertBefore(label, btn)
                // 此时输入框的labels属性就是一个list
                txtName.labels[1].innerHTML = '请输入姓名'
            }
        }
    </script>
</body>

　　9.标签的control属性

　　　　作用：HTML5中，可以在标签内部放置一个表单元素，通过该标签的control属性来访问该表单元素。

　　　　control属性示例：　　

<body>
    <form id="testForm" action="#">
        <label id="label">
            用户名:
            <input type="text"><br/>
            <small>请输入登录名</small>
        </label>
        <input type="button" value="设置为默认值" onclick="setValue()">
    </form>

    <script>
        function setValue(){
            var label = document.getElementById("label")
            // 通过label的control属性获取到其中包裹的表单元素
            var txtbox = label.control
            txtbox.value = "010010"
        }
    </script>
</body>

　　10.文本框的placeholder属性

　　　　作用：placeholder当文本框处于未输入状态时显示的提示信息。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。

　　　　placeholder属性示例：　

<body>
    <form id="testForm" action="#">
        用户名:<input type="text" placeholder="请输入用户名">
    </form>
</body>

　　11.复选框的indeterminate属性

　　　　作用：HTML4中复选框只是选取与非选取两种状态。HTML5中，可以在JavaScript脚本代码中对该元素使用indeterminate属性，以说明复选框处于"尚未明确是否选取"状态。

　　　　状态：复选框选中、未选中、不明状态。

　　　　indeterminate属性示例：　

<body>
    <form id="testForm" action="#">
        <input type="checkbox" id="cb" indeterminate>属性测试
    </form>
    <script>
        var cb = document.getElementById("cb")
        cb.indeterminate = true
    </script>
</body>

　　12.image提交按钮(height/width属性)

　　　　作用：为图像设置宽、高。

　　　　height/width属性示例：　　

<body>
    <form id="testForm" action="test.jsp" method="post">
        姓名:<input type="text" name="userName">
        <input type="image" src="./img/eg_submit.jpg" alt="编辑" width="20px" height="20px">
    </form>
</body>

　　13.文本框list属性

　　　　作用：HTML5中为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5新增元素，该元素类似选择框，也允许自行输入。

　　　　list属性示例：

<body>
    <form id="testForm" action="test.jsp" method="post">
        <input type="text" list="greetings">
        <datalist id="greetings">
            <option value="数学"></option>
            <option value="英语"></option>
            <option value="机械"></option>
        </datalist>
    </form>
</body>

　　　14.文本框autocomplete属性

　　　　作用：帮助输入框内容的自动补全。

　　　　注意：

　　　　　　1.表单元素的内容必须提交过。

　　　　　　2.需要自动补全的表单元素需要设置name属性。

　　　　取值：on， off，空字符串

　　　　autocomplete属性示例：

<body>
    <form id="testForm" action="test.jsp" method="post">
        <!-- 当输入的内容和datalist中的选项匹配，输入框会自动补全 -->
        <input type="text" list="greetings" autocomplete="" name="text">
        <datalist id="greetings">
            <option value="数学"></option>
            <option value="英语"></option>
            <option value="机械"></option>
        </datalist>
    </form>
</body>

　　15.文本框pattern属性

　　　　作用：HTML5中，对input元素使用pattern属性，属性值为某个格式的正则表达式，提交时内容会进行正则表达式的验证。

　　　　pattern属性示例：

<body>
    <form id="testForm" action="test.jsp" method="post">
        <!-- 当输入的内容和pattern格式不相符时，不允许提交并会有相应提示信息 -->
        <input type="text" pattern="[A-Z]{3}">
        <input type="submit" value="提交">
    </form>
</body>

　　16.文本框selectionDirection属性

　　　　作用：HTML5中对input和textarea元素增加了SelectionDirection属性。属性表示选取内容方向。

　　　　应用场景：获取用户的操作(从左往右选文字或从右往左选文字)，根据用户操作执行相应的程序

　　　　取值：默认为forward

　　　　　　forward -- 表示用户正向选取文字内容。

　　　　　　backward -- 表示用户反向选取文字内容。

　　　　selectionDirection属性示例：

<body>
    <form id="testForm" action="test.jsp" method="post">
        <input type="text" name="text">
        <input type="button" value="点击我" onclick="AD()">
    </form>

    <script>
        function AD(){
            var control = document.forms[0]["text"]
            var direction = control.selectionDirection
            console.log(direction)
        }
    </script>
</body>

　　17.mutiple属性

　　　　作用：multiple 属性规定输入域中可选择多个值

　　　　应用场景：

　　　　　　1.当上传多个文件时，可以使用此属性

　　　　　　2.在email中，允许输入多个邮箱地址(比如抄送多人)，用逗号隔开。

<body>
<form action="#" method="get">
    <input type="file" name="img" multiple="multiple" />
　　 <input type="email" name="email" multiple="multiple" />
    <input type="submit" />
</form>
<p>当您浏览文件时，请试着选择多个文件。</p>
</body>

第四类.新增表单元素

　　1.datalist元素

　　　　作用：datalist 元素规定输入域的选项列表。

　　　　注意：

　　　　　　如果type类型是'url'类型，那么value值必须以'http://'开头，因为这才是合法的url值

　　　　datalist元素示例：

<body>
    <form action="#" autocomplete="on">
        <!-- datalist可以为输入框预设几个值，input通过list属性绑定datalist的id -->
        <input type="text" list="fruits"/>
        <datalist id="fruits">
            <option label="苹果" value="苹果" />
            <option label="香蕉" value="香蕉" />
            <option label="芒果" value="芒果" />
        </datalist>
    </form>
</body>

　　2.keygen元素

　　　　作用：keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

　　　　keygen 元素示例：　　　

<body>
    <form action="#" method="get">
        Username: <input type="text" name="usr_name" />
        Encryption: <keygen name="security" />
        <input type="submit" />
    </form>
</body>

　　3.output元素

　　　　作用：output 元素用于不同类型的输出。

　　　　output元素示例：　

<body>
    <form οnsubmit="return false">
        <input id="num_a" /> +
        <input id="num_b" /> =
        <output id="result" onforminput="resCalc()"></output>
    </form>
    <script type="text/javascript">
        function resCalc()
        {
            numA=document.getElementById("num_a").value;
            numB=document.getElementById("num_b").value;
            document.getElementById("result").value=Number(numA)+Number(numB);
        }
    </script>
</body>

第五类.新增表单事件

　　1.oninput事件

　　　　作用：监听当前指定元素内容的改变，只要内容改变(添加内容，删除内容)事件就会触发。

　　　　举例：

<body>
    <form action="" onsubmit="haha();">
        用户名：
        <input type="text" name="userName" id="userName">
        <br> 电话：
        <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">
        <br>
        <input type="submit" id="submit">
    </form>
    <script>
        /*1.oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/
        document.getElementById("userName").oninput = function () {
            console.log("oninput:" + this.value);
        }
    </script>
</body>

　　2.oninvalid事件

　　　　作用：当表单提交验证不通过时会触发该事件。

　　　　举例：

<body>
    <form action="" onsubmit="haha();">
        用户名：
        <input type="text" name="userName" id="userName">
        <br> 电话：
        <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">
        <br>
        <input type="submit" id="submit">
    </form>
    <script>
        /*oninvalid:当验证不通过时触发*/
        document.getElementById("userPhone").oninvalid = function () {
            /*设置默认的提示信息*/
            this.setCustomValidity("123");
            //console.log(this.validity);
        }
    </script>
</body>

 

转载于:https://www.cnblogs.com/diweikang/p/8598406.html

weixin_30258027
关注
HTML5--新增input类型、表单属性和元素
weixin_44348052的博客
07-08 890
并不是所有浏览器都支持新增的input类型，但若是不被支持仍可以显示为常规的文本域。规定输入域的选项列表，当用户在自动完成域中开始输入时，将显示可填内容的选项列表。以下代码段中，当input被选中后会自动提供datalist中的可选列表。 在使用过程中，我们使用的list属性来绑定。首先，该元素已经从web标准中删除了。提供验证用户的可靠方法。...
HTML5新增表单元素和表单属性
Kepler_II的博客
03-22 432
新表单元素 选项列表。与 input 元素配合使用，定义 input 可能的值 用于表单的密钥对生成器字段 不同类型的输出，比如脚本的输出。 Safari和IE9以下不支持, 规定了输入域的选项内容 ，与input元素配合使用，定义input输入域的选项内容。 <form action="" method=""> <input list="browsers"><!-- 通过使用input里面的一个属性list，跟datalist的id相联系--> &..
html表单之autocomplete属性
The_upside_of_down的博客
11-29 2882
autocomplete 属性规定表单或输入字段是否应该自动完成。 当自动完成开启，浏览器会基于用户之前的输入值自动填写值。 提示：您可以把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off，反之亦然。 autocomplete 属性适用于 &lt;form&gt; 以及如下 &lt;input&gt; 类型：text、search、url、tel、email...
Vue中实现输入框Input输入格式限制
qsj0606的博客
03-17 2235
Vue中实现输入框Input输入格式限制 1、使用修饰符实现数字输入 在VUE中可以在v-modal后添加修饰符的形式来限制输入，比如： <input v-model.number="testValue" type="number"> .number可以实现限制数字输入，但是会有以下问题： 会出现type="number"自带样式，当然可以通过添加以下css清除 /* 普通IE浏览器 样式清除 */ input::-webkit-outer-spin-button,input::-webkit
HTML中input标签使用法汇总
m0_67846661的博客
05-19 1万+
HTML input标签的属性： 1.type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = “text”。具体它有那些值，我们后面再讨论。 2.required：标记一个字段是否为必须。如果一个字段被标记为required = “required”（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。 3.pattern
form表单提交
weixin_52374211的博客
04-01 281
<form method=”post” action=url enctype=”application/x-www-form-urlencoded”> <label>姓名：<input name=”custname” required></label> <label>电话：<input type=”tel” name=”custtel” required></label> <label>.
HTML5新增的表单元素和属性实例解析
09-28
HTML5的这些新增表单元素和属性为开发者提供了更丰富的界面组件，使得网页表单不仅仅局限于文本的输入和提交，还可以更加贴合用户的需求和习惯。通过实例演示和解析，可以看到这些新特性在实际应用中是如何发挥作用...
HTML5中form表单的新增属性.ppt
07-02
HTML5中form表单的新增属性.ppt
详解HTML5表单新增属性
01-19
1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=testform> <input type=text> &lt...
限制input输入类型(多种方法实现)
weixin_34183910的博客
05-13 327
1.只能输入和粘贴汉字<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"><br/>3...
文本框提交时不能为空，input输入框的一些功能属性
ZT1090258642的博客
03-20 1万+
<input type="" required="required" name="" id="" value="" /> 加上required 这个属性 ，就成了必填字段 。 出处:https://ask.csdn.net/questions/357391
html中input的作用和结论,html中input标签的属性有哪些？input标签的用法总结（附实例）...
weixin_34920577的博客
06-20 626
html中input标签的属性有哪些？input标签的用法总结(附实例)发布时间：2020-10-12 16:03:38来源：亿速云阅读：57作者：小新这篇文章给大家分享的是有关html中input标签的属性有哪些？input标签的用法总结(附实例)的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。首先先来说说html input标签的属性：1.type：该属性是input...
SSM框架整合--实现简单的增删改查(商品管理系统)
guolin的博客
04-10 3430
SSM框架整合步骤 1：搭建一个web工程，将所需的jar包放进去 2，创建数据库，创建表 插入2条初始数据进去 INSERT INTO product VALUE(NULL,"手机",899,2); INSERT INTO product VALUE(NULL,"电视",1299,5); 有了数据之后，将实体类创建出来 package com.jgl.model; p...
form表单的各种属性简单列举
zjbkzj的博客
05-19 4447
form表单的各种属性列举
form表单
热门推荐
JiuMeilove的博客
09-02 4万+
form表单详解form表单form表单简介form表单属性acceptaccept-charsetactionautocompleteenctypemethodnamenovalidatetargetHTML 表单输入元素文本域（Text Fields）密码字段单选按钮（Radio Buttons）复选框（Checkboxes）提交按钮(Submit Button)fieldset标签 标签 form表单 表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程
HTML5新特性：input元素的新增属性与表单处理
本章主要探讨HTML5中input元素的新增属性，以及HTML5表单和文件处理的新特性。在HTML5中，input元素增加了如autocomplete、autofocus和form等新属性，使得表单交互更加便捷和灵活。 在HTML5表单中，`autocomplete`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值