JS 操作表单

xiao666yan

已于 2023-06-25 00:22:33 修改

阅读量63

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言

于 2023-06-24 23:56:41 首次发布

本文链接：https://blog.csdn.net/qq_51325652/article/details/131368270

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

表单是什么 form DOM 树

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

表单的目的：提交信息

<body>
    <form action = "post">
        <p>
            <span>用户名：</span><input type = "text" id = "username">
        </p>
        <p>
            <span>性别：</span>
            <input type = "radio" name = "sex" value="男" id="boy">男
            <input type = "radio" name = "sex" value="女" id="girl">女
        </p>

    </form>
<script>
    let myname = document.getElementById('username');
    let boy = document.getElementById('boy');
    let girl = document.getElementById('girl');
    //得到输入框的值  myname.value
    //修改输入框的值  myname.value='123'


    //对于单选框 多选框等等固定的值  value只能取到当前的值
    //查看返回的结果是否为true 如果是，被选中boy.checked
</script>

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

<body>
    <form action = "post">
        <p>
            <span>用户名：</span><input type = "text" id = "username">
        </p>
        <p>
            <span>密码：</span><input type = "password" id = "password">
        </p>
        <p>
            <span>性别：</span>
            <input type = "radio" name = "sex" value="男" id="boy">男
            <input type = "radio" name = "sex" value="女" id="girl">女
        </p>
        <button type="button" onclick = "aaa()">提交</button>
    </form>
<script>
    function aaa(){
        //alert("调用成功");
        let username = document.getElementById('username');
        let password = document.getElementById('password');
        console.log(username.value)
        //password.value = '123456';
        //MD5算法  加密 拦截请求 
        //password.value = MD5(password.value);
        console.log(password.value)
    }
</script>