使用“原生”HTML DOM获取input的输入值并显示

时间 2021-01-07

理论基础

　　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;
    }

效果图