JavaScript

表单元素属性的获取与设置

操作	语法	描述
获取属性值	DOM对象.属性名	获取表单元素的属性值
设置属性值	DOM对象.属性名 = 新值	设置表单元素的属性值

常用表单元素属性

属性	描述	示例
value	获取或设置表单元素的值	表单.value = '用户名'
type	获取或设置表单元素的类型	表单.type = 'password'
disabled	禁用或启用表单元素	表单.disabled = true
checked	控制复选框或单选按钮的选中状态	表单.checked = true
selected	控制下拉菜单选项的选中状态	选项.selected = true

表单元素属性操作示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单元素属性操作示例</title>
  <style>
    form {
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
    div {
      margin-bottom: 15px;
    }
    label {
      display: inline-block;
      width: 80px;
      font-weight: bold;
    }
    input[type="text"],
    input[type="password"],
    select {
      width: 200px;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    button {
      padding: 5px 15px;
      margin-right: 10px;
      border: 1px solid #ddd;
      border-radius: 3px;
      background-color: #f0f0f0;
      cursor: pointer;
    }
    button:hover {
      background-color: #e0e0e0;
    }
    button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <form>
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" name="password">
      <button type="button" id="togglePwd">切换可见性</button>
    </div>
    <div>
      <label for="remember">记住我：</label>
      <input type="checkbox" id="remember" name="remember">
    </div>
    <div>
      <label for="gender">性别：</label>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">男</label>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">女</label>
    </div>
    <div>
      <label for="role">角色：</label>
      <select id="role" name="role">
        <option value="admin">管理员</option>
        <option value="user">普通用户</option>
        <option value="guest">访客</option>
      </select>
    </div>
    <div>
      <button type="button" id="submitBtn">提交</button>
      <button type="reset">重置</button>
    </div>
  </form>
  
  <script>
    // 获取表单元素
    const username = document.getElementById('username');
    const password = document.getElementById('password');
    const togglePwd = document.getElementById('togglePwd');
    const remember = document.getElementById('remember');
    const male = document.getElementById('male');
    const female = document.getElementById('female');
    const role = document.getElementById('role');
    const submitBtn = document.getElementById('submitBtn');
    
    // 设置默认值
    username.value = '默认用户名';
    male.checked = true; // 默认选中男
    role.value = 'user'; // 默认选择普通用户
    
    // 切换密码可见性
    togglePwd.addEventListener('click', function() {
      if (password.type === 'password') {
        password.type = 'text';
        togglePwd.textContent = '隐藏密码';
      } else {
        password.type = 'password';
        togglePwd.textContent = '显示密码';
      }
    });
    
    // 禁用提交按钮
    submitBtn.disabled = true;
    
    // 监听用户名输入，输入后启用提交按钮
    username.addEventListener('input', function() {
      submitBtn.disabled = this.value === '';
    });
    
    // 提交按钮点击事件
    submitBtn.addEventListener('click', function() {
      // 获取所有表单值
      const formData = {
        username: username.value,
        password: password.value,
        remember: remember.checked,
        gender: male.checked ? 'male' : 'female',
        role: role.value
      };
      
      console.log('表单数据:', formData);
      alert('表单提交成功！');
    });
  </script>
</body>
</html>