参考资料

  1. HTML DOM 被按下的键盘键的keycode?
  2. HTML DOM document.write() 方法
  3. HTML DOM 改变一个iframe的src
  4. HTML DOM 返回image的替代文本
  5. HTML DOM 返回一个button的type 实例
  6. HTML DOM 返回文档中第一个图像的ID
  7. HTML DOM 返回文档中第一个表单的名字
  8. HTML DOM 返回页面上所有相对URL的基URL 实例

HTML DOM Button type 实例

标签:

用法:

  1. 通过DOM访问按钮类型:
    document.getElementById("myBtn").type

  2. 设置按钮类型:
    document.getElementById("myBtn").type = "submit"

属性值:

  • button:普通按钮(默认)

  • submit:提交表单按钮

  • reset:重置表单按钮

实例:

<button id="myBtn" type="button">点击我</button>

<script>
let btn = document.getElementById("myBtn");
console.log(btn.type); // 输出"button"
btn.type = "submit"; // 修改类型为submit
</script>

功能:

  1. 控制按钮在表单中的行为

  2. 动态修改按钮功能

  3. 区分不同用途的按钮

CSS扩展:

/* 按类型选择按钮 */
button[type="button"] {
  background-color: #4CAF50;
}

button[type="submit"] {
  background-color: #008CBA;
}

button[type="reset"] {
  background-color: #f44336;
}