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 |
|
规定按钮的类型。 |
| 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 元素创建按钮。
你觉得文章内容怎么样