表单是什么? form DOM 树
文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…
表单的目的:提交信息
获得要提交的信息:
<form action="post">
<p><span>用户名:</span><input type="text" id="username"></p>
<!-- 多选框的值一定是写死的value-->
<p><span>性别:</span>
<input type="radio" name="sex" value="boy" id="man">男
<input type="radio" name="sex" value="girl" id="women">女
</p>
</form>
<script>
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('man');
var girl = document.getElementById('women');
//得到输入框的值
input_text.value
//修改输入框的值
input_text.value='123'
//对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
boy_radio.checked;// 查看返回的结果是否选中,如果为true,则被选中
boy_radio.checked = true; //赋值
</script>
提交表单:MD5加密密码,表单优化
<!--
表单绑定事件
onsubmit = 绑定一个提交检测的函数,true,false
将这个结果返回给表单,使用onsubmit接受
οnsubmit=“return aaa() ”
-->
<form action="#" method="post" onsubmit="return aaa()">
<p><span>用户名:</span><input type="text" id="username" name="username"></p>
<p><span>密码:</span><input type="password" id="input-password" name="password"></p>
<input type="hidden" id="md5-password" name="password">
<!-- 多选框的值一定是写死的value-->
<p><span>性别:</span>
<input type="radio" name="sex" value="boy" id="man">男
<input type="radio" name="sex" value="girl" id="women">女
</p>
<!--绑定事件 onclick 被点击-->
<button type="submit" onclick="aaa()"> 提交</button>
</form>
<script>
function aaa() {
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
//MD5 算法
md5pwd.value= md5(pwd.value)
//可以校验判断表单的内容,true就是通过,false阻止提交
return true;
}
</script>