JavaScript 06 操作表单提交表单

最新推荐文章于 2024-07-22 08:55:10 发布

ShakeSharkPP

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量151

点赞数 1

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_40617873/article/details/107011777

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

操作表单

表单是什么 form DOM树

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

表单的目的：提交信息

<form action="post">
  <p>
  <span>username: </span><input type="text" id="username">
</p>
<!--多选框的值，就是定义好的-->
    <p>
    <span>sex</span>
<input type = "radio" name = "sex" value = "male" id = "male">male
<input type = "radio" name = "sex" value = "female" id = "female">female
</p>

</form>
<script>
  var input_text = document.getElementById('username');
var male_radio = document.getElementById('male');
var female_radio = document.getElementById('female');
// 得到输入框的值
input_text.value 
// 修改输入框的值
input_text.value = '123'

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

提交表单

md5加密密码,表单优化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  </head>
  <body>
    <!--表单绑定提交事件
onsumbit 绑定一个提交检测的函数 true false
将这个结果返回给表单，使用onsubmit接收
-->

    <form action="https://www.baidu.com/" method = "post" onsubmit = "return aaa">
      <p>
        <span>username: </span><input type="text" id="username" name = "username">
      </p>
      <!--多选框的值，就是定义好的-->
      <p>
        <span>password: </span><input type = "password" id = "input-password">
      </p>
      <input type="hidden" id="md5-password" name = "password">
      <!-- 绑定事件 -->
      <button type = "submit" onclick = "aaa()">submit</button>
      <!-- <input type = "submit"> -->
    </form>
    <script>
      function aaa(){
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        md5pwd.value = md5(pwd.value);

        // console.log(uname.value);
        // // MD5 algo
        // pwd.value = md5(pwd);
        // console.log(pwd.value);

        // 可以校验判断表单内容，true就是通过提交，false：阻止提交
        return true;

      }
    </script>
  </body>
</html>

ShakeSharkPP

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 06 操作表单提交表单

操作表单表单是什么 form DOM树文本框 text下拉框 select单选框 radio多选框checkbox隐藏域 hidden密码框 password表单的目的：提交信息<form action="post"> <p> <span>username: </span><input type="text" id="username"></p>
复制链接

扫一扫