javaScript17-操作表单

表单是什么 form

表单也是DOM树中的一个节点

  • 文本框 text
  • 下拉框 select
  • 单选框 radio
  • 多选框 box
  • 密码框 password
  • 隐藏域 hidden
  • 其他

表单的目的：提交信息

获得要提交的信息

<body>

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

<script>
  let name=document.getElementById('username');
  //修改输入框的值
  name.value='123';

  //对于单选多选的框 value固定 只能通过判断是true还是false
  let b=document.getElementById('b');
  let g=document.getElementById('g');

</script>

</body>

提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--d5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form method="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password">
    </p>
    <!-- 绑定事件，onclick 被点击-->
    <button type="button" onclick="aaa()">提交</button>
</form>

<script>

function aaa(){
    let uname=document.getElementById('username');
    let pwd=document.getElementById('password');
    console.log(uname.value);
    console.log(pwd.value);

    //md5算法加密
    pwd.value=md5(pwd.value);
    console.log(pwd.value);

}

</script>

</body>
</html>

上述md5加密，提交的时候会出现密码框变长的现象，因此可以通过或下面的方法改进（利用一个隐藏的密码框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--d5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form method="post" action="https://www.baidu.com/" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password">
    </p>
    <!--在函数中：把密码放在这个隐藏的框里面，并加密-->
    <input type="hidden" id="md5-password">
    
    <button type="submit" >提交</button><!--或者 <input type="submit">  -->
</form>

<script>

function aaa(){
    let uname=document.getElementById('username');
    let pwd=document.getElementById('password');
    let md5pwd=document.getElementById('md5-password');

    //md5算法加密
    md5pwd.value=md5(pwd.value);
    //true是通过提交，false是阻止提交
    return true;

}

</script>

</body>
</html>
posted @ 2021-11-12 16:11  卡卡发  阅读(33)  评论(0)    收藏  举报