JS学习笔记-操作表单

JS学习笔记-操作表单

表单是什么 form

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

表单的目的：提交信息

获取表单的信息

<form>
    <span>用户名：</span>
    <input id="username" type="text"><br/>
    <span>性别：</span>
    <input name="sex" type="radio" value="man" id="man"> 男
    <input name="sex" type="radio" value="woman" id="woman"> 女
</form>
<script>
    var username = document.getElementById('username');
    username.value; // 获取该元素的值
    username.value = '123123';  //修改该元素的值
    var man = document.getElementById('man');
    var woman = document.getElementById('woman');
    man.checked;    // 判断该单选按钮是否被选中
    woman.checked;
</script>

提交表单并对密码进行md5加密

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

<form action="#" method="post">
    <span>用户名：</span>
    <input type="text" id="username" name="username">
    <br/>
    <span>密码：</span>
    <input type="password" id="password" name="password">
    <br/>
    <!--绑定事件onclick-->
    <button type="button" onclick="btn_submit()">提交</button>
</form>
<script>
    function btn_submit() {
        var username = document.getElementById('username');
        var pwd = document.getElementById('password');
        var form1 = document.getElementById('form1');
        console.log(username.value);
        console.log(pwd.value);
        pwd.value = md5(pwd.value);
        console.log(pwd.value);
    }
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HAjtMUhC-1621229572454)(C:\Users\10098\AppData\Roaming\Typora\typora-user-images\image-20210507121614055.png)]

高阶用法

<form id="form1" action="#" method="post">
    <span>用户名：</span>
    <input type="text" id="username" name="username">
    <br/>
    <span>密码：</span>
    <input type="password" id="input_password" name="input_password">
    <br/>
    <input type="hidden" id="password">
    <!--绑定事件onclick-->
    <button type="button" onclick="btn_submit()">提交</button>
</form>
<script>
    function btn_submit() {
        var username = document.getElementById('username');
        var pwd = document.getElementById('password');
        var form1 = document.getElementById('form1');
        var inpwd = document.getElementById('input_password');

        pwd.value = md5(inpwd.value);
    }
</script>