html5 output

html5 output元素是html5中新增的表单元素，IDL定义如下：

interface HTMLOutputElement : HTMLElement {
  [PutForwards=value] readonly attribute DOMSettableTokenList htmlFor;
  readonly attribute HTMLFormElement form;
           attribute DOMString name;
 
  readonly attribute DOMString type;
           attribute DOMString defaultValue;
           attribute DOMString value;
 
  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(in DOMString error);
 
  readonly attribute NodeList labels;
};

该元素代表了一个计算结果，用以在页面中显示相关联的表单元素的内容，如输入值、计算结果等，这里我们重点介绍以下几个属性：

• for属性用以明确地定义output元素的相关元素，它的值是由一个或多个ID构成的字符串，多个ID之间用空格分隔，ID无先后顺序、区分大小写且必须在当前document dom tree中可访问。
• form描述了output元素所属的form表单。
• name标识了output元素本身，与其他表单域的name属性类似。

output元素怎么用呢？看一个简单的例子：

<form οninput="o.value = text1.value * text2.value">
    <fieldset>
        <legend>请输入两个数字</legend>
        <input id="Text1" name="text1" type="number" step="any" />
            * 
        <input id="Text2" name="text2" type="number" step="any" />
            =
        <output name="o">0</output>
    </fieldset>
</form>

如果您的浏览器支持output，在文本框中输入数字时就能看到输出结果：

请输入两个数字

* = 0

关于form元素上oninput中的text1.value以及text2.value，换成ID.value的形式也可以正常工作，即Text1.value和Text2.value。

output既然具有name属性，不过却不是表单控件，并不能被提交到服务器。