携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
回顾：上次了解浏览器时必不可少的DOM，DOM其实无处不在，操作表单就跟DOM息息相关。今天我们来细化下里面的内容！
html表单也是DOM
用JavaScript操作表单和操作DOM是类似的
常见的输入控件有以下几种：
- 文本框，对应的
<input type="text">，用于输入文本 - 口令框，对应的
<input type="password">，用于输入口令 - 单选框，对应的
<input type="radio">，用于选择一项 - 复选框，对应的
<input type="checkbox">，用于选择多项 - 下拉框，对应的
<select>，用于选择一项
获取值 & 设置值
- 调用
value获得对应的用户输入值 - 对于
text、password、hidden以及select，直接设置value就可以 - 对于单选框和复选框，设置
checked为true或false即可
提交表单的两种办法
方式一：是通过
<form>元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单
缺点：扰乱了浏览器对form的正常提交
方式二：响应
<form>本身的onsubmit事件，在提交form时作修改
缺点：需要注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form
举例子：
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
<input type="text" id="username" name="username">
<input type="password" id="password" name="password">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var pwd = document.getElementById('password');
// 把用户输入的明文变为MD5:
pwd.value = toMD5(pwd.value);
// 继续下一步:
return true;
}
</script>
//缺陷注意：用户输入了口令提交时，口令框的显示会突然从几个`*`变成32个
//要想不改变用户的输入，可以利用`<input type="hidden">`实现
写在最后
以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）
附上学习链接，感谢廖大神出题和解答：
