操作表单

表单是什么？ form DOM 树
文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…
表单的目的：提交信息

获得要提交的信息：

<form action="post">
    <p><span>用户名:</span><input type="text" id="username"></p>
<!--    多选框的值一定是写死的value-->
    <p><span>性别:</span>
        <input type="radio" name="sex" value="boy" id="man">男
        <input type="radio" name="sex" value="girl" id="women">女
    </p>


</form>

<script>
   var input_text = document.getElementById('username');
   var boy_radio = document.getElementById('man');
   var girl = document.getElementById('women');
   //得到输入框的值
   input_text.value
   //修改输入框的值
   input_text.value='123'

   //对于单选框，多选框等等固定的值,boy_radio.value只能取到当前的值

   boy_radio.checked;// 查看返回的结果是否选中，如果为true，则被选中
   boy_radio.checked = true; //赋值
</script>

提交表单：MD5加密密码，表单优化

<!--
    表单绑定事件
    onsubmit = 绑定一个提交检测的函数，true，false
    将这个结果返回给表单，使用onsubmit接受
    οnsubmit=“return aaa() ”
    -->

<form action="#" method="post" onsubmit="return aaa()">
    <p><span>用户名:</span><input type="text" id="username" name="username"></p>
    <p><span>密码:</span><input type="password" id="input-password" name="password"></p>
    <input type="hidden" id="md5-password" name="password">
    <!--    多选框的值一定是写死的value-->
    <p><span>性别:</span>
        <input type="radio" name="sex" value="boy" id="man">男
        <input type="radio" name="sex" value="girl" id="women">女
    </p>

<!--绑定事件  onclick  被点击-->
    <button type="submit" onclick="aaa()"> 提交</button>

</form>

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

        //MD5 算法
        md5pwd.value= md5(pwd.value)
        //可以校验判断表单的内容，true就是通过，false阻止提交
        return true;


    }

</script>