1. 表单是什么
- 文本框 text
- 下拉框 select
- 单选框 radio
- 多选框 checkbox
- 隐藏框 hidden
- 密码框 password
表单的目的主要用来提交信息
2. 表单取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="post">
<p>
<span>用户名</span><input type="text" id="username">
</p>
<!-- 多选框的值就是定义好的value值 -->
<!-- document.getElementsByTagName('input') -->
<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');
//得到文本框中的值
// input_text.value
//修改输入框的值
//input_text.value = '222222'
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
//对于单选框,多选框的值,boy_radio.value只能得到渠道当前的值
//girl_radio.checked
//得到输入的值
//得到输出的值
</script>
</body>
</html>
3. 表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<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">
</p>
<input type="hidden" id="md5-password" name="password">
<!-- 绑定事件 onclick-->
<button type="submit">提交</button>
</form>
</body>
<script>
function aaa() {
alert(1);
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value)
//可以校验表单的内容
return true;
}
</script>
</html>
使用hidden方法提升用户体验,可参照JavaScript应用:前端MD5加密
写在最后
各位看官,都看到这里了,麻烦动动手指头给博主来个点赞8,您的支持作者最大的创作动力哟! <(^-^)>
才疏学浅,若有纰漏,恳请斧正
本文章仅用于各位同志作为学习交流之用,不作任何商业用途,若涉及版权问题请速与作者联系,望悉知