表单是什么?form-----DOM树
- 文本框----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>
<p>
<span>性别:</span>
<input type="radio" name="sex" id="boy" value="boy">男
<input type="radio" name="sex" id="girl" value="girl">女
</p>
</form>
<script>
let text = document.getElementById('username');
let boy = document.getElementById('boy');
let girl = document.getElementById('girl');
// 得到输入框的值
// text.value;
// 修改输入框的值
// input_text.value = '123';
// 对于单选框,多选框等固定值,用 .value 的方法只能获得当前固定的值
boy.spellcheck;
boy = true; // 默认选中 男
</script>
</body>
</html>
提交表单。md5加密密码,表单优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- MD5 工具类-->
<script src=""https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js""></script>
</head>
<body>
<form action="#" method="post" onsubmit="f()">
<p>
<span>用户名:</span>
<input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span>
<input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!-- 绑定事件 onclick -->
<button type="submit">提交</button>
<!--<input type=""submit"">-->
</form>
<script>
function f() {
// alert('提交成功!');
let uname = document.getElementById('username');
let pwd = document.getElementById('input-password');
let md5pwd = document.getElementById('md5-password');
// 用这个提交的时候密码框显示的密码会变长
// pwd.value = md5(pwd.value);
md5pwd.value = md5(pwd.value);
return true;
}
</script>
</body>
</html>