9.5 表单按钮

来源：网络作者：站长

在文章《9.2 input元素》中我们知道了input元素的type属性值中有button、reset、submit、image类型的按钮，今天要讲的是另外一个标签元素<button>。

<button> 标签定义一个按钮。

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

举例：

<button type="button">Click Me!</button>

我们再对比下input的写法

<input type="submit" value="提交" />

两者在写法上有很大的不同。<button>标签是使用来定义一个按钮，在该标签中可以放置一些内容（文本、图像等）。<input>标签也可以使用来定义按钮，但是它是一个空标签（没有元素内容），不能放置元素内容，所以它的功能没有<button>标签强大。

button 元素的属性

属性	值	描述
disabled	disabled	规定应该禁用该按钮。
name	button_name	规定按钮的名称。
type	button reset submit	规定按钮的类型。
value	text	规定按钮的初始值。可由脚本进行修改。

1、<button> 标签的 disabled 属性

disabled 属性规定禁用按钮。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>按钮</title>
    </head>
    <body>
        <form action="form_action.asp" method="get" name="myForm">
            <button type="button" disabled="disabled">提交</button>
        </form>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：如果使用该属性，则会禁用按钮。被禁用的按钮是无法使用和无法点击的。

2、<button> 标签的 name 属性

name 属性为按钮规定名称。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>按钮</title>
    </head>
    <body>
        <form action="form_action.asp" method="get" name="myForm">
            请选择您喜欢的课程：
            <button name="subject" type="submit" value="HTML">HTML</button>
            <button name="subject" type="submit" value="CSS">CSS</button>
        </form>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：拥有相同名称的两个按钮，当被点击时提交不同的值。

3、<button> 标签的 type 属性

type 属性规定按钮的类型。type属性值有submit（默认。按钮是提交按钮。）、button（可点击的按钮）、reset（重置按钮）

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>按钮</title>
    </head>
    <body>
        <form action="form_action.asp" method="get" name="myForm">
            <button type="submit" value="Submit">提交</button>
            <button type="reset" value="Reset">重置</button>
        </form>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：一定为按钮规定 type 属性。不同的浏览器会为 type 属性设置不同的默认值。

4、<button> 标签的 value 属性

value 属性规定按钮的初始值。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>按钮</title>
    </head>
    <body>
        <form action="form_action.asp" method="get" name="myForm">
            请选择您喜欢的课程：
            <button name="subject" type="submit" value="HTML">HTML</button>
            <button name="subject" type="submit" value="CSS">CSS</button>
        </form>
    </body>
</html>

运行浏览器后得到的效果如图

附加说明：在表单中，只有当按钮本身用于提交表单时，才会传递按钮的值。

提示：虽然<button>标签的功能性要强大，但是在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的按钮值。最稳妥的办法还是使用 input 元素创建按钮。