操作表单
表单是什么 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>