HTML <output>用法及代碼示例

HTML中的<output>標記用於表示由客戶端腳本(例如JavaScript)執行的計算結果。 <output>標記是HTML 5中的新標記，它需要一個開始和結束標記。

用法:

<output> Results... </output>

屬性：輸出標記接受以下列出的三個屬性：

為了：此屬性包含一個屬性值element_id，該屬性值用於指定結果與計算之間的關係。
HTML - <output> form屬性用法及代碼示例：該屬性包含一個屬性值form_id，用於指定一種或多種形式的輸出元素。
HTML - <output> name屬性用法及代碼示例：此屬性包含用於指定輸出元素名稱的屬性值名稱。

範例1：

html

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h2>HTML output Tag</h2> 
    <form oninput="sumresult.value = parseInt(A.value)  
                + parseInt(B.value) + parseInt(C.value)"> 
        <input type="number" name="A" value="50" /> + 
        <input type="range" name="B" value="0" /> + 
        <input type="number" name="C" value="30" /> 
        <br> 
        <!-- output tag -->
        Result:<output name="sumresult"></output> 
    </form> 
</body> 
  
</html>

輸出：

範例2：在此示例中，<output>標記與for和form屬性一起使用。

html

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h2>HTML output Tag</h2> 
    <form oninput="sumresult.value = parseInt(A.value)  
                + parseInt(B.value) + parseInt(C.value)"> 
        <input type="number" name="A" value="50" /> + 
        <input type="range" name="B" value="0" /> + 
        <input type="number" name="C" value="50" /> 
        <br /> Submit Result:
        <!-- output tag -->
        <output name="sumresult" for="A B C"></output> 
        <br> 
        <input type="submit"> 
    </form> 
</body> 
  
</html>

輸出：

支持的瀏覽器：

穀歌瀏覽器10.0
Internet Explorer 13.0
Firefox 4.0
Opera 11.0
蘋果Safari 5.1

相關用法

注：本文由純淨天空篩選整理自Shubrodeep Banerjee大神的英文原創作品 HTML <output> Tag。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。