HTML button标签的用法（附带实例）

与 input 标签创建的按钮相比，button 标签可以创建视觉效果更加丰富的按钮。

例如，创建一个图片和文本混合的按钮，如下图所示：

使用 button 标签时，同样可以使用 type 属性定义按钮类型，如：

button：普查按钮，需要自定义单击操作，如使用 onclick 事件和 JavaScript 代码；
submit：提交按钮，提交当前表单中的所有数据；
reset：重置按钮，恢复表单中字段元素的初始状态。

下面的代码创建了一个使用图片和文本的“保存”按钮效果。

<button type="button">
<img src="/img/save-b.png" alt="save" align="top" />
保存
</button>

代码执行结果见图 1。

使用 button 标签时，默认类型是 submit，即提交表单数据。如果需要自定义按钮执行的操作，可以将 type 属性设置为 button 值，并通过 onclick 事件编写执行代码，如下面的代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form id="form1" action="/demo/form.php" method="get">
    <p>用户 <input id="username" name="username" type="text" maxlength="15" size="25"></p>
    <p>
        <button type="button" onclick="save_click();">保存</button>
        <img src="/img/save-b.png" alt="save" align="top" />
    </p>
</form>
</body>
</html>
<script>
    function save_click() {
        // 提交表单
        form1.submit();
    }
</script>

代码执行结果见下图：

HTML button标签的用法（附带实例）

相关文章