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>