HTML | DOM 按钮名称 属性

HTML 按钮是一种用户交互式元素，用户可以通过鼠标单击来触发特定的操作。在 HTML 中，我们可以使用元素创建按钮，该元素支持多个属性进行自定义和控制。

基本语法

HTML 中创建一个按钮的基本语法如下：

<button>按钮文字</button>

可以指定一个类型（type）属性，以定义按钮的行为和显示样式。可以设置以下三种类型：

• submit：将该按钮作为表单中“提交”按钮使用。
• reset：将该按钮作为表单中“重置”按钮使用。
• button：将该按钮作为普通按钮使用。

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

其他常用属性

disabled

如果按钮被禁用（disabled 属性设置为 true），则该按钮将不会响应鼠标点击事件，并且呈现为灰色。

<button disabled>禁用按钮</button>

name

可以通过name属性指定按钮的名称在表单提交时将用于标识该值。

<button type="submit" name="submitButton">提交</button>

value

通过value属性可以指定按钮的值。如果该值未指定，则按钮文本将用于提交。

<button type="submit" name="submitButton" value="1">提交</button>

onclick

onclick属性定义鼠标单击事件的 JavaScript 代码。

<button onclick="alert('你单击了按钮！')">单击我</button>

效果

以下是一个完整的示例，其中使用了上述属性来自定义和控制按钮的行为和样式。

<form>
  <label>
    姓名：
    <input type="text" name="name">
  </label>

  <label>
    密码：
    <input type="password" name="password">
  </label>

  <br>

  <button type="submit" name="submitButton" value="login" onclick="alert('已提交！')">登录</button>
  <button type="reset">清空</button>
</form>

该表单包含两个输入框和两个按钮，其中一个“提交”按钮将表单数据发送到服务器，另一个“重置”按钮将清空所有输入框的内容。当单击“登录”按钮时，弹出一个提示框，提示已提交表单。