使用“原生”HTML DOM獲取input的輸入值並顯示

理論基礎

　　HTML <input> value屬性。value規定<input>元素的值。value對於不同input類型，用法也不同。

　　1.對於"button","reset","submit"類型 —— 定義按鈕上的文字；

　　2.對於"text","password","hidden"類型 ——定義輸入字段的初始（默認）值；

　　3.對於"checkbox","radio","image"類型 ——定義與input元素相關的值，當提交表單時該值會發送到表單的action URL。

最需要注意的是 ，value屬性對於<input type="checkbox">和<input type="radio">是必需的。而對於<input type="file"> value屬性是不適用的。

實現原理

　　使用document.getElementByid("idName").value獲取元素的值，然后輸出到頁面上。

實現代碼

<h1>登錄</h1>
<small>本網頁展示了使用HTML DOM來訪問HTML元素最常用的方法</small>
<hr/>

Account &nbsp;<input type="text" id="account" value="15515"><br/>
Password <input type="password" id="pwd" value="123456"><br/>
<input type="button" value="Show Values" onclick="getValue()">
<hr/>
<p id="show"></p>


<script>
    var a = document.getElementById("account").value;
    var p = document.getElementById("pwd").value;
    function getValue() {
        document.getElementById("show").innerHTML = "Account: " + a + "<br/>" + "Password: " + p;
    }

效果圖