8.1 回顾

表单 —— form （DOM树中的一种）

• 文本框：text

• 密码框：password

• 单选框：radio

• 多选框：checkbox

• 下拉框：< select >< /select >

• 隐藏域：hidden

8.2 获得表单提交的信息

<form action=""><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="woman" 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//修改输入库那个的值input_text.value = '123';//对于单选框、多选框等 固定的值 boy_radio.value只能取到当前的值boy_radio.checked; //查看返回的结果是否为true 如果为true，则被选中girl_radio.checked = true; //赋值
</script>

8.3 提交表单

MD5 加密密码 表单优化

<!-- 表单提交事件
οnsubmit="绑定一个函数" true，false
将这个结果返回给表单，使用onsumbit接收
-->
<form action="#" method="post" onsubmit="return aa()"><p><span>用户名：</span><input type="text" id="username" name="username"></p><p><span>密&nbsp;&nbsp;&nbsp;码：</span><input type="password" id="input-password"><input type="hidden" id="md5-password"></p><p><!-- 绑定事件 onclick 被点击 --><!--οnclick="aa()"--><button type="submit">提交</button></p>
</form>
<!--MD5工具类 加密密码-->
<script src="http://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script>function aa(){var uname = document.getElementById('username');var pwd = document.getElementById('input-password');var md5pwd = document.getElementById('md5-password');// console.log(uname.value);// console.log(pwd.value);// //MD5算法// pwd.value = md5(pwd.value);// console.log(pwd.value);md5pwd.value = md5(pwd.value);//可以校验判断表单内容，true通过提交，false阻止提交return true;}
</script>