HTML <output> 輸出域

admin發表於2018-11-13
HTML

<output>標籤可以建立一個輸出域，專用於顯示各種值。

此標籤是HTML5新增。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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屬性值作為物件使用。

<output>元素屬性：

（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.softwhy.com/" />
<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之外，也歸屬於它。

相關文章