html : output标签

马黑黑

output标签通常作为form的子元素出现，用于form内的表单元素的实时输出，具有value值。下面的output标签，标签内的数字就是它的value值：

	<output>500<output>

一般情况下，output标签应该有自己的 id 标识，以便和表单元素捆绑，并通过编程实时输出表单指定元素的值。试看以下代码，我们虽然没有提供完整的form组件标签，但input标签和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岁

花飞飞

四行代码写成一个在线演示。。神奇的代码大神用。。
看不懂的飘过一下~

红影

“oninput是可输入元素的输入事件”，然后这个事件对应事件的值吧。
这个挺难懂

马黑黑

红影 发表于 2023-8-2 09:49
“oninput是可输入元素的输入事件”，然后这个事件对应事件的值吧。
这个挺难懂

写成正规的JS代码：

元素.oninput = () => {
    ageout.value = 元素.value + '岁';
}

意思是，元素在输入时，元素的value值赋予 ageout 标签（即 id="ageout" 的 output 标签）的 value 值。

表单元素的输入，可以是文本的纯录入，可以是滑杆的滑动，或是上、下箭头的选值，以及单选按钮、多选按钮的选择等等。

马黑黑

花飞飞 发表于 2023-8-2 08:31
四行代码写成一个在线演示。。神奇的代码大神用。。
看不懂的飘过一下~

这个认真研究一下立马能懂

红影

马黑黑 发表于 2023-8-2 12:58
写成正规的JS代码：

元素.oninput = () => {

还可以有这么多舒服方式啊。

马黑黑

红影 发表于 2023-8-2 14:15
还可以有这么多舒服方式啊。

嵌入式很多场合会用到，它实际上也是地道的JS

红影

马黑黑 发表于 2023-8-2 18:16
嵌入式很多场合会用到，它实际上也是地道的JS

只是对它们总是感觉很陌生

马黑黑

红影 发表于 2023-8-2 20:23
只是对它们总是感觉很陌生

就是直接写在HTML元素里。例如：

1. <p onclick="javascript: alert('你点击了我');">点击我</p>

复制代码

也可以直接写成：

1. <p onclick="alert('你点击了我');">点击我</p>

复制代码

花飞飞

马黑黑 发表于 2023-8-2 12:59
这个认真研究一下立马能懂

立马估计是不行了，慢慢懂吧

马黑黑

花飞飞 发表于 2023-8-2 21:01
立马估计是不行了，慢慢懂吧

这个，语句少，逻辑清楚，再好理解不过

花飞飞

马黑黑 发表于 2023-8-2 21:03
这个，语句少，逻辑清楚，再好理解不过

你感觉象一加一等于二，我感觉是高数。

马黑黑

花飞飞 发表于 2023-8-2 21:06
你感觉象一加一等于二，我感觉是高数。

这个绝对不是高数，是五毛六毛的问题

红影

马黑黑 发表于 2023-8-2 20:32
就是直接写在HTML元素里。例如：

也可以直接写成：

直接写的这个就是嵌入式吧？

马黑黑

红影 发表于 2023-8-2 21:27
直接写的这个就是嵌入式吧？

写在HTML标签里的JS语句是嵌入式

花飞飞

马黑黑 发表于 2023-8-2 21:07
这个绝对不是高数，是五毛六毛的问题

不是就好……有空学学这里的逻辑

马黑黑

花飞飞 发表于 2023-8-3 12:32
不是就好……有空学学这里的逻辑

简单的一匹，比PS要简单不少

红影

马黑黑 发表于 2023-8-2 22:50
写在HTML标签里的JS语句是嵌入式

哦，从JS嵌入HTML .

花飞飞

马黑黑 发表于 2023-8-3 12:48
简单的一匹，比PS要简单不少

好哒。。。老师这么说就有信心了。不然看着它望而却步