对立色彩空间_输入对立点：HTML5输出元素

对立色彩空间

Of the many new features introduced by HTML5, only one element was designed to be the exact opposite of a tag that already existed: <output>, the logical companion to HTML’s <input>.

HTML5引入的许多新功能中，只有一个元素被设计为与已经存在的标签完全相反： <output> ，HTML的<input>的逻辑伴侣。

Originally designed to contain the results of a form calculation, the scope of the <output> element was expanded to make it useful for many purposes, not just traditional forms. However, like <progress> and other tags, <output> depends on HTML5’s close relationship with JavaScript: without the addition of some simple scripting, the tag doesn’t have a great deal of utility.

最初旨在包含表单计算结果的元素，后来扩展了<output>元素的范围，使其可用于多种用途，而不仅仅是传统表单。 但是，像<progress>和其他标签一样， <output>取决于HTML5与JavaScript的紧密关系：如果不添加一些简单的脚本，该标签就没有太多实用程序。

To demonstrate the <output> element, let’s say that we want to create an online purchasing system for concert tickets in North America, with a cover price of $25 per head. All purchases will be limited to 12 tickets. The basic markup for the form would be:

为了演示<output>元素，假设我们要创建一个北美演唱会门票在线购买系统，每人的标价为25美元。 所有购买将仅限于12张票。 表单的基本标记为：

<form>
	<label for="ticketcount">Number of passes</label>
	<input type="number" name="ticketcount" id="ticketcount" min="1" max="12" value="1" onchange="spinny()">
	<span id="price">@ $25 per ticket</span> =
	<output name="total" for="ticketcount price">$25</output>
</form>

Note that the <output> element contains default content, and that accessibility practices are followed, with the addition that the for attribute of the output takes all the space-delimited id values of the elements that contribute to its final value.

请注意， <output>元素包含默认内容，并遵循可访问性做法，另外， output的for属性采用所有以空格分隔的id值，这些id值构成其最终值。

To update the total cost of ticket purchases, we can use a little JavaScript:

要更新购票的总费用，我们可以使用一些JavaScript ：

var total = document.querySelector('output[name="total"]'),
ticketcount = document.getElementById('ticketcount');
function spinny() {
	total.value = "$" + ticketcount.valueAsNumber * 25;
}

The result:

结果：

Number of passes 通过次数 @ $25 per ticket = @每张票$ 25 =

$25

$ 25

Internet Explorer has a problem with updating output using the value method; innerHTML is more reliable cross-browser.

Internet Explorer在使用value方法更新output遇到问题； innerHTML是更可靠的跨浏览器。

The <output> element can also be used to display the value of a form input that otherwise lacks presentation, such as range.

<output>元素还可用于显示否则缺少表示形式的表单输入的值，例如range 。

<form oninput="weight.value =  shippingweight.valueAsNumber.toPrecision(3)">
	<label for="shippingweight">Shipping Weight</label>
	<input type="range" min="0" max="25" value="1.0" step="0.1" name="shippingweight" id="shippingweight">
	<output name="weight" for="shippingweight">1.0</output>kg
</form>

The result:

结果：

Shipping Weight 装运重量

1.0kg

1.0公斤

In a broader sense, the <output> element can be used to show the outcome of a user action: for example, the reported results of a form submission.  <output> is extremely versatile and easy to style: you can use any CSS on it that can be applied to any other element. Best of all, it has support in all modern browsers: there's no need for any polyfills.

从广义上讲， <output>元素可用于显示用户操作的结果：例如，表单提交的报告结果。 <output>用途广泛且易于设置样式：您可以在其上使用可以应用于任何其他元素的任何CSS 。 最好的是，它在所有现代浏览器中都具有支持：不需要任何polyfill。

翻译自: https://thenewcode.com/754/input-Antipode-The-HTML5-output-Element

对立色彩空间