[JS]15.操作表单

表单是什么？ form DOM树

• 文本框 text
• 下拉框
• 单选框 radio
• 多选框 checkbox
• 隐藏域 hidden
• 密码框 password
• …

表单的目的：提交信息

获得和设置表单的值

<form action="post">

    <p>
        <span>用户名</span> <input type="text" id="username">
    </p>

    <p>
        <span>性别</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>

</form>


<script>
    var username = document.getElementById('username');
    var boy_value = document.getElementById('boy');
    var girl_value = document.getElementById('girl');

    //查看返回的结果是否为true
    girl_value.checked;
    boy_value.checked;
    //赋值
    boy_value.checked = true;

    //得到输入框的值
    username.value;
    username.value;
    //修改输入框的值
    username.value = '123';

</script>

表单提交验证以及MD5加密

md5加密需要用到一个工具类

    <script src="http://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<!--
表单绑定提交事件
onsubmit = 绑定提交函数，返回值为true，false
将这个结果返回给表单，使用onsubmit接收

οnsubmit="return check()"

-->
<form action="http://mylight1109.cn" method="post" onsubmit="return check()">

    <p>
        <span>用户名</span> <input type="text" id="username" name="username">
    </p>

    <p>
        <span>密码</span> <input type="password" id="input-password">
    </p>

    <input type="hidden" id="md5-password" name="password">

    <!--    绑定事件 οnclick="check()"-->
    <button type="submit" >提交</button>

</form>


<script>
    function check(){
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');


        //优化，避免在提交表单的瞬间密码框变长
        md5pwd.value = md5(pwd.value); 

        return false;
    }

</script>