JavaScript06：操作表单
获取表单内容
value属性获取text、password、select、hidden类型的值
checked属性判断radio、checkbox选框是否勾上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<form method="post">
<p>
<span>用户名：</span><input type="text" id="username">
</p>
<p>
<span>密码：</span><input type="password" id="password">
</p>
<p>
<span>国籍：</span>
<select name="国籍" id="country">
<option value="China">中国</option>
<option value="English">英国</option>
</select>
</p>
<p>
<span>性别：</span>
<span>男</span><input type="radio" name="gender" id="man" value="男">
<span>女</span><input type="radio" name="gender" id="woman" value="女">
</p>
<p>
<span>兴趣爱好：</span>
<span>Java</span><input type="checkbox" class="hobby" id="java" value="Java">
<span>Python</span><input type="checkbox" class="hobby" id="python" value="Python">
</p>
</form>
</body>
</html>
<script>
"use strict";
/**
* 对于类型为text、password还有select，用value属性获取值
* 对于radio、checkbox，value只能获取到预先设置好的固定值，要用checked属性来判断是否勾上
*/
let username = document.getElementById("username");
username.value = "ty";
console.log(username.value);
let password = document.getElementById("password");
password.value = "123";
console.log(password.value);
let country = document.getElementById("country");
country.value = "English";
console.log(country.value)
let man = document.getElementById("man");
man.checked = true;
console.log(man.checked);
let java = document.getElementById("java");
java.checked = true;
console.log(java.checked);
</script>
表单验证（MD5加密）
登录表单时用户输入用户名和密码，但是出于安全考虑，提交表单时提交加密过的MD5密码
使用标签实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<!--
onsubmit="return verify()：表单验证，绑定提交事件onsubmit
-->
<form action="#" method="post" onsubmit="return verify()">
<p>
<span>用户名：</span><input type="text" id="username" name="username">
</p>
<p>
<!--输入真正的密码，但是没有name属性的<input>标签的数据不会被提交-->
<span>密码：</span><input type="password" id="input-password">
</p>
<p>
<!--
设置一个隐藏的md5密码，将真正的密码在verify()方法加密后进行赋值，提交这个加密的密码，避免直接传输密码
md5算法生成的密码是32位的，如果不隐藏这个标签，提交瞬间会看到密码变得很长，观感不好
-->
<input type="hidden" id="md5-password" name="password">
</p>
<!--button标签提交-->
<button type="submit" name="login">提交</button>
</form>
</body>
</html>
<!--md5算法js文件-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script>
"use strict";
function verify(){
let name = document.getElementById("username");
let input_password = document.getElementById("input-password");
let md5_password = document.getElementById("md5-password");
/**
* md5算法在提交之前加密密码，然后提交加密后的md5密码而不是真正的密码
*/
md5_password.value = md5(input_password);
/**
* 除了加密密码，在该函数内可以对输入值进行高级验证，比如用正则表达式验证字符串等
* 如果表单验证通过返回true，否则返回false
*/
return true;
}
</script>
分类:
JavaScript
标签:
JavaScript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现