文章目录
  • 一、修改表单元素属性
  • 1、表单简介
  • 2、表单常用属性
  • 3、表单常用属性修改示例


JavaScript 中 可以通过 DOM ( 文档对象模型 ) 操作 来 修改网页的 内容 , 结构 , 样式 , 属性 ;



在 【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 ) 博客中介绍了 使用

  • innerText 属性
  • innerHTML 属性

修改 DOM 元素标签内容的 ;



在 【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性 ) 博客介绍 通过 DOM 操作 修改元素属性 ;






一、修改表单元素属性



1、表单简介



HTML 表单 是 网页中用于 收集用户输入 的重要组件 , 表单可以 包含多种类型的输入元素

  • 文本字段
  • 密码字段
  • 单选按钮
  • 复选框
  • 下拉列表
  • 文件选择框

这些输入元素允许用户输入数据 , 然后可以将这些数据提交到服务器进行处理 ;



2、表单常用属性



HTML 中 表单元素比较特殊 , 有很多属性和样式需要特殊处理 ;

如 :

  • input 输入框 表单 中的内容 , 不能使用 innerHTML 进行修改 , 必须通过 input 表单的 value 属性修改输入框的值 ;


表单 中最常用的属性如下所示 :

  • type : 定义输入元素的类型 , 如 : text、password、checkbox、radio、submit 等 ;
  • name : 定义输入元素的名称 , 用于在提交表单时标识数据 ;
<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">
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • value : 定义输入元素的值 ;
<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">
  • 1.
  • 2.
  • 3.
  • 4.
  • required : 定义输入字段是否必须填写 ;
<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
  • 1.
  • 2.
  • 3.
  • checked : 指定 复选框 checkbox 和 单选按钮 radiobutton元素 在页面加载时是否应该被选中 ;
<input type="checkbox" name="interest" value="sports" checked>
  • 1.
  • selected : 设置 select 下拉菜单 中的 option 选项 元素 , 该属性指示默认情况下应该选择哪个选项 ;
<select name="city">
  <option value="paris">刘备</option>
  <option value="tokyo" selected>关羽</option>
  <option value="newyork">张飞</option>
</select>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • disabled : 设置 禁用输入元素 , 禁用的元素在表单提交时不会包含在提交的数据中 ;
<input type="text" name="username" disabled>
  • 1.



3、表单常用属性修改示例



代码示例 :

<!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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.

执行结果 :

【Web APIs】JavaScript 操作元素 ③ ( 修改表单元素属性 | 表单常用属性 | 表单常用属性修改示例 )_javascript

页面刷新后 , 处于初始状态 , 按钮可点击 , 表单中显示的内容是 " 点击下方按钮 , 改变表单元素内容 " ;

点击 按钮后 , 表单的内容变为 " 按钮被点击 , 表单内容发生改变 " , 按钮也变为不可用状态 ;