操作表单

表单    form  DOM树

文本框 　　text

下拉框　　select

单选框　　redio

多选框　　checkbox

隐藏域　　hidden

密码框　　password

。。。

表单目的：提交信息

获得要提交的信息

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 
10 <form action="post">
11     <p>
12         <span>用户名</span><input type="text" id="username">
13 
14     </p>
15     多选框的值，就是定义好的value值
16     <p>
17         <span>性别：</span>
18         <input type="radio" name="sex" value="man" id="boy">男
19         <input type="radio" name="sex" value="woman" id="girl">女
20     </p>
21 </form>
22 <script>
23     var input_text = document.getElementById('username');
24     var boy_redio = document.getElementById('boy');
25     var girl_redio = document.getElementById('girl');
26     //得到输入框的值 input_text.value
27     //修改输入框的值
28     input_text.value='123';
29 
30     //对于单选框，多选框等固定的值，boy_redio.value只能取到当前的值
31     girl_redio.checked;//查看返回的结果，是否为true，若为true则被选中
32     girl_redio.checked = true;//赋值
33 </script>
34 </body>
35 </html>

 

posted @ 2022-03-30 10:47  doremi429  阅读(29)  评论(0)  编辑  收藏  举报