用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树
// <input type="text" id="email">
//这种方式可以应用于 text 、 password 、 hidden 以及 select
var input = document.getElementById(‘email‘);
input.value; // ‘用户输入的值‘
//设置值只需直接赋值即可
input.value = ‘test@example.com‘; // 文本框的内容已更新
对于单选框和复选框， value 属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用 checked 判断
//<label><inputtype="radio"name="weekday"id="monday"value="1">Monday</label>
//<label><inputtype="radio"name="weekday"id="tuesday"value="2">Tuesday</label>
varmon=document.getElementById(‘monday‘);
vartue=document.getElementById(‘tuesday‘);
mon.value;//‘1‘ 获取的是值
tue.value;//‘2‘
mon.checked;//true或者false 检查是否被选中
tue.checked = true;//true或者false
//设置 checked 为 true 或 false 即可
提交表单
<!--方式一是通过 <form> 元素的 submit() 方法提交一个表单，例如，响应一个 button 的 click 事件-->
<!--HTML-->
<form id="test-form" method="post">
<input type="text" id="test" name="test">
<input type="password" id="password" name="password">
<button type="submit" onclick="doSubmitForm()">Submit</button>
</form>
<script>
//这种方式的缺点是扰乱了浏览器对form的正常提交。
function doSubmitForm(){
var text=document.getElementById(‘test‘);
var psw=document.getElementById(‘password‘);
console.log(text.value);
console.log(psw.value);
psw.value = ‘222‘;
}
</script>
<!--第二种方式是响应 <form> 本身的onsubmit 事件，在提交form时作修改-->
<!--HTML-->
<form id="test-form" onsubmit="return checkForm()">
<input type="text" name="test">
<button type="submit">Submit</button>
</form>
<script>
function checkForm(){
var form=document.getElementById(‘test-form‘);
//可以在此修改form的input...
//继续下一步:
return true;
/*注意要 return true 来告诉浏览器继续提交，如果 return false ，浏览器将不会继续提交
form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。*/
}
</script>
MD5用户信息加密
<form id="test-form" method="post">
<input type="text" id="test" name="test">
<input type="password" id="password" name="password">
<button type="submit" onclick="doSubmitForm()">Submit</button>
</form>
<!-- 引入MD5加密，然后会返回加密好的 -->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"> </script>
<script>
//这种方式的缺点是扰乱了浏览器对form的正常提交。
function doSubmitForm(){
var text=document.getElementById(‘test‘);
var pwd=document.getElementById(‘password‘);
console.log(text.value);
//MD5算法:把用户输入的明文变为MD5:
pwd.value = md5(pwd.value);
console.log(psw.value);
}
</script>
? **这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个 变成32个 * （因为MD5有32个字符）。要想不改变用户的输入，可以利用 * 实现
<!--HTML-->
<form id="test-form" action="https://ai.taobao.com/?pid=mm_124190590_30248727_109212350230" method="post" onsubmit="return doSubmitForm()">
<input type="text" id="test" name="test">
<!-- 将password隐藏起来-->
<input type="password" id="input-password">
<input type="hidden" id="md5-password" name="password">
<button type="submit">Submit</button>
</form>
<!-- 引入MD5加密，然后会返回加密好的 -->
<script src="https://www.baidu.com/?tn=93041572_hao_pg"> </script>
<script>
//这种方式的缺点是扰乱了浏览器对form的正常提交。
function doSubmitForm(){
var input_pwd = document.getElementById(‘input-password‘);
var md5_pwd = document.getElementById(‘md5-password‘);
// 把用户输入的明文变为MD5: pwd.value = md5(pwd.value);
md5_pwd.value = md5(input_pwd.value);
// 继续下一步:
return true;
}
原文：https://www.cnblogs.com/saxonsong/p/14759964.html