马黑PHP整站系统

label 和 output标签

位置: 首页 > 前端三套件[ 发布时间: 2023.8.2  作者: 马黑  阅读: 250 ]

label 和 output标签通常作为form的子元素出现,其中:

(一)label标签主要有两个作用,其一是作为form内待输入元素的说明,其二是通过 for 捆绑到指定 id 或 name 的元素,点击它时该元素获得焦点。

(二)output标签用于form内的表单元素的实时输出,具有value值。下面的output标签,标签内的数字就是它的value值:

	<output>500<output>

一般情况下,output标签应该有自己的 id 标识,以便和表单元素捆绑,并通过编程实时输出表单指定元素的值。试看以下代码,我们虽然没有提供完整的form组件标签,但input标签和label、output标签一样可以捆绑、编程:

	<label for="age">年龄 :<label>
	<input id="age" type="range" min="0" max="130" value="18" oninput="ageout.value=this.value + '岁'" />
	<output id="ageout">18岁</output>

其中的 oninput="ageout.value=this.value + '岁'" 是嵌入式JS代码,oninput是可输入元素的输入事件,利用该事件,我们令ID标识为ageout的output标签的value值等于this.value,this指向有嵌入式JS语句的那个input表单元素标签。

效果如下:

18岁

前一篇: 十六进制颜色模式演示
下一篇: JS:cloneNode 能做什么

发表评论:

       

评论列表 [0条]

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com