8.JS操作表单

8.操作表单

表单是什么

  • 文本框 text

  • 下拉框 select

  • 单选框 radio

  • 多选框 checkbox

  • 隐藏域 hidden

  • 密码框 password

  • ........

表单的目的：提交信息

获得要提交的信息

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <form action="post">
     <p>
         <span>用户名:</span><input type="text" id="username">
     </p>
     <!--多选框的值就是定义好的value值-->
     <p>
         <span>性别：</span>
         <input type="radio" name="sex" value="man" id="boy">男
         <input type="radio" name="sex" 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='321'//修改输入框的值
     //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
     boy_radio.checked//查看返回的结果，是否为true，如果为true，则被选中
     girl_radio.checked=true//赋值
 </script>
 </body>
 </html>

提交表单

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--表单绑定提交事件
 onsubmit绑定一个提交检测函数true，false
 将这个结果返回给表单-->
 <form action="http://baidu.com" method="post" onsubmit="aaa()">
     <p>
         <span>用户名:</span><input type="text" id="username">
     </p>
     <p>
         <span>密码:</span><input type="text" id="input-password">
     </p>
     <input type="hidden"id="md5-password"name="password">
 <!--绑定事件 onclick被点击-->
    <button type="button">提交</button>
 </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);
         return true;
     }
 </script>
 </body>
 </html>
 
posted @ 2022-09-08 17:03  l希尔瓦娜斯l  阅读(234)  评论(0)    收藏  举报