在 【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 ) 博客中介绍了 使用
修改 DOM 元素标签内容的 ;
在 【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性 ) 博客介绍 通过 DOM 操作 修改元素属性 ;
HTML 表单 是 网页中用于 收集用户输入 的重要组件 , 表单可以 包含多种类型的输入元素 , 如 :
这些输入元素允许用户输入数据 , 然后可以将这些数据提交到服务器进行处理 ;
HTML 中 表单元素比较特殊 , 有很多属性和样式需要特殊处理 ;
如 :
表单 中最常用的属性如下所示 :
<input type="text" name="username" placeholder="Enter your username">
<input type="password" name="password" placeholder="Enter your password">
<input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="submit" value="Submit">
<input type="text" name="username" value="JohnDoe">
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="submit" value="Submit">
<input type="text" name="email" required>
<input type="password" name="password" required>
<input type="checkbox" name="terms" value="agree" required> I agree to the terms and conditions
<input type="checkbox" name="interest" value="sports" checked>
<select name="city">
<option value="paris">刘备</option>
<option value="tokyo" selected>关羽</option>
<option value="newyork">张飞</option>
</select>
<input type="text" name="username" disabled>
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
</head>
<body>
<input type="text" value="点击下方按钮 , 改变表单元素内容"></input>
<button id="button">修改元素内容</button>
<script>
// 注意 : HTML 文档加载顺序是从上到下加载
// 这里要先加载标签 , 然后加载 JavaScript 脚本
// 页面加载后 , 会自动执行该 JavaScript 脚本
var button = document.querySelector('button');
var input = document.querySelector('input');
button.onclick = function() {
// 改变表单元素
input.value = "按钮被点击 , 表单内容发生改变";
// 禁用按钮
//button.disabled = "true";
// 在事件函数中 , this 指向 事件的调用者 button
this.disabled = "true";
}
</script>
</body>
</html>
执行结果 :
页面刷新后 , 处于初始状态 , 按钮可点击 , 表单中显示的内容是 " 点击下方按钮 , 改变表单元素内容 " ;
点击 按钮后 , 表单的内容变为 " 按钮被点击 , 表单内容发生改变 " , 按钮也变为不可用状态 ;