思路：首先写上两输入框，一个提交按钮，并且给input标签写上id名（便于在js中通过id名来获取输入框的内容，也可以是其他的名字如：class  name等也可以是自己命的名字）。当用户单击鼠标按钮时，产生onclick事件，同时onclick指定的事件处理程序或代码将被调用执行。就是帮我们实现点击某个元素想要执行某个操作的需求。

<body>
用户名：<input type="text" id="username" /> <br />
密码：<input type="password" id="password" /><br />
<button onclick="huoqu()">按钮</button>
</body>

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 

语法：document.getElementById(id名)

注：取内容的时候不要忘记加上".value"

<script>
    function huoqu() {
        var username = document.getElementById("username").value;
        var userPsd = document.getElementById("password").value;
        alert("用户名为：" + username + " " + "密码为：" + userPsd);
    }
</script>

举栗子：计算两个输入框 一个按钮， 点击加按钮的时候 计算两个输入框内容的和
点击减按钮的时候 计算两个输入框内容的差 

<body>
 num1:<input type="text" id="ipt1" /><br /> 
 num2:<input type="text" id="ipt2" /><br />
 <button onclick="sum()">加按钮</button>
 <button onclick="reduce()">减按钮</button>
</body>function sum() {
    var num1 = document.getElementById("ipt1").value;
    var num2 = document.getElementById("ipt2").value;
    var sum = parseInt(num1) + parseInt(num2);
    alert(sum);
}
function reduce() {
    var num1 = document.getElementById("ipt1").value;
    var num2 = document.getElementById("ipt2").value;
    var jian = parseInt(num1) - parseInt(num2);
    alert(reduce);
}