JavaScript学习笔记十五—— 表单相关

JavaScript学习笔记十五—— 表单相关

---

参考教程B站狂神https://www.bilibili.com/video/BV1JJ41177di

---

表单

• 文本框 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="gender" value="man" id="boy">男
        <input type="radio" name="gender" value="women" id="girl">女
    </p>

</form>

<script>

    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

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

    //对於单选框，多选框等固定的值，id.value只能获取当前的值
    boy_radio.checked; //查看返回的结果，true为选中
    girl_radio.checked = true; //赋值true则被选中
    
</script>

提交表单

<!--onsubmit= 绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接收-->
<form action="https://www.baidu.com/" 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">
    </p>
    <input type="hidden" id="md5-password" name="password">

<!--    提交按钮-->
<!--    <input type="submit">-->
    <button type="submit">提交</button>
</form>

<script>
    function aaa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('password');
        var md5pwd = document.getElementById('md5-password');
        //MD5加密
        //pwd.value = md5(pwd.value);
        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false就是阻止提交
        return true;
    }

</script>