前端常用控件的名称、属性、事件、方法

以下通过豆包梳理，此处仅做记录。

前端开发中，常用控件（HTML 元素）的名称、核心属性、事件及方法如下，这些是构建交互界面的基础：

1. 输入类控件

<input>（输入框）

• 名称：输入框（支持多种类型）
• 核心属性：
  • type：输入类型（text/password/number/email/date/file等）
  • value：当前输入值
  • placeholder：提示文本
  • disabled：禁用状态（true/false）
  • readonly：只读状态
  • required：是否必填
  • checked：单选 / 复选框的默认选中状态
• 常用事件：
  • input：输入内容变化时触发
  • change：值改变且失去焦点时触发
  • focus：获取焦点时触发
  • blur：失去焦点时触发
  • click：点击时触发
• 常用方法：
  • focus()：获取焦点
  • blur()：失去焦点
  • select()：选中输入框内容
  • setAttribute('disabled', true)：设置禁用

<textarea>（多行文本框）

• 名称：多行文本框
• 核心属性：
  • rows/cols：默认行数 / 列数
  • value：文本内容
  • placeholder：提示文本
• 常用事件：
  • input：内容变化时触发
  • scroll：滚动时触发
• 常用方法：
  • focus()/blur()：聚焦 / 失焦
  • setSelectionRange(start, end)：选中部分文本

2. 选择类控件

<select> + <option>（下拉选择框）

• 名称：下拉选择框
• 核心属性：
  • value：当前选中项的值
  • multiple：是否允许多选（true/false）
  • option 的 value：选项值
  • option 的 selected：默认选中
• 常用事件：
  • change：选中项变化时触发
• 常用方法：
  • add(option)：添加选项
  • remove(index)：删除指定索引的选项
  • selectedIndex：获取 / 设置选中项索引（select.selectedIndex = 0）

<input type="checkbox">（复选框）

• 名称：复选框
• 核心属性：
  • checked：是否选中（true/false）
  • name：分组标识（同组需相同）
• 常用事件：
  • change：选中状态变化时触发

<input type="radio">（单选框）

• 名称：单选框
• 核心属性：
  • checked：是否选中
  • name：分组标识（同组只能选一个）
• 常用事件：
  • change：选中状态变化时触发

3. 按钮类控件

<button>（按钮）

• 名称：按钮
• 核心属性：
  • type：submit（提交表单）/reset（重置）/button（普通按钮）
  • disabled：是否禁用
• 常用事件：
  • click：点击时触发
  • mouseover：鼠标悬停时触发
  • mouseout：鼠标离开时触发
• 常用方法：
  • click()：模拟点击
  • setAttribute('disabled', true)：禁用按钮

<input type="submit">（提交按钮）

• 名称：提交按钮
• 核心属性：value（按钮文本）
• 常用事件：click、submit（触发表单提交）

4. 媒体类控件

<img>（图片）

• 名称：图片
• 核心属性：
  • src：图片路径
  • alt：加载失败时的替代文本
  • width/height：尺寸
• 常用事件：
  • load：图片加载完成时触发
  • error：加载失败时触发
• 常用方法：
  • setAttribute('src', 'new.jpg')：更换图片

<video>（视频）

• 名称：视频
• 核心属性：
  • src：视频路径
  • controls：显示控件（true/false）
  • autoplay：自动播放
  • loop：循环播放
• 常用事件：
  • play：开始播放时触发
  • pause：暂停时触发
  • ended：播放结束时触发
• 常用方法：
  • play()：播放
  • pause()：暂停
  • load()：重新加载视频

5. 容器与布局类

<div>（块级容器）

• 名称：块级容器
• 核心属性：
  • class：CSS 类名
  • id：唯一标识
  • style：行内样式
• 常用事件：
  • click：点击时触发
  • mouseenter：鼠标进入时触发
  • mouseleave：鼠标离开时触发
• 常用方法：
  • appendChild(element)：添加子元素
  • removeChild(element)：移除子元素
  • getElementsByClassName()：获取子元素

<span>（行内容器）

• 名称：行内容器
• 核心属性：class、id（同<div>）
• 常用事件：click、mouseover等

6. 表单与链接类

<form>（表单）

• 名称：表单
• 核心属性：
  • action：提交目标 URL
  • method：提交方式（get/post）
• 常用事件：
  • submit：提交时触发（可通过event.preventDefault()阻止默认提交）
  • reset：重置时触发
• 常用方法：
  • submit()：手动提交表单
  • reset()：重置表单

<a>（超链接）

• 名称：超链接
• 核心属性：
  • href：跳转地址（#表示锚点）
  • target：打开方式（_blank新窗口）
• 常用事件：
  • click：点击时触发（可阻止默认跳转）
• 常用方法：
  • click()：模拟点击

总结

这些控件通过属性定义初始状态，通过事件响应用户交互，通过方法实现动态操作。实际开发中，结合 JavaScript 可灵活控制控件行为（如表单验证、动态渲染），结合 CSS 可美化样式。掌握这些基础是构建复杂前端交互的关键。