HTML <output> 输出域 小灰灰 2020-05-16 16:56 734阅读 0赞 HTML `<output>` 输出域 `<output>`标签可以创建一个输出域,专用于显示各种值。 此标签是HTML5新增。 代码实例如下: ```html <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.dandelioncloud.cn/" /> <title>蒲公英云</title> <script> window.onload=function(){ let form=document.forms[0]; form.oninput=function(){ result.value = parseInt(a.value) + parseInt(b.value) } } </script> </head> <body> <form> <input type="range" id="a" value="50"> +<input type="number" id="b" value="50"> =<output name="result" id="result" for="a b"></output> </form> </body> </html> ``` 调整input元素的值可以在output输出域显示计算结果。 代码分析如下: (1).为form表单注册input事件处理函数,利用了事件冒泡原理。 (2).只要form的input子元素的value值被手动调整,那么触发input事件。 (3).事件处理函数将计算结果写入赋值给输出域,于是就得到显示。 特别说明:为了节省时间,将id属性值作为对象使用。 **元素属性:** (1).for:此属性可以使输出域与其他元素关联起来,属性值是所关联元素的id值,多个id属性值用空格分隔。 (2).name:规定表单元素的名称,提交表单时,使用此属性接收数据。 (3).form:属性值是表单id属性值,将输出域与对应表单关联起来,这样可以将其归属于多个form表单。 代码实例如下: ```html <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.dandelioncloud.cn/" /> <title>蒲公英云</title> <script> window.onload=function(){ let form=document.forms[0]; form.oninput=function(){ result.value = parseInt(a.value) + parseInt(b.value) } } </script> </head> <body> <form id="ant"> <input type="range" id="a" value="50"> +<input type="number" id="b" value="50"> </form> =<output form="ant" name="result" id="result" for="a b"></output> ``` 将元素的form属性值设置为"ant",那么即便此元素位于form之外,也归属于它。
还没有评论,来说两句吧...