表单按钮
在文章《9.2 input元素》中我们知道了input元素的type属性值中有button、reset、submit、image类型的按钮,今天要讲的是另外一个标签元素<button>。
<button> 标签定义一个按钮。
在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
举例:
1 |
< button type = "button" >Click Me!</ button > |
我们再对比下input的写法
1 |
< input type = "submit" value = "提交" /> |
两者在写法上有很大的不同。<button>标签是使用来定义一个按钮,在该标签中可以放置一些内容(文本、图像等)。<input>标签也可以使用来定义按钮,但是它是一个空标签(没有元素内容),不能放置元素内容,所以它的功能没有<button>标签强大。
button 元素的属性
属性 | 值 | 描述 |
---|---|---|
disabled | disabled | 规定应该禁用该按钮。 |
name | button_name | 规定按钮的名称。 |
type |
|
规定按钮的类型。 |
value | text | 规定按钮的初始值。可由脚本进行修改。 |
1、<button> 标签的 disabled 属性
disabled 属性规定禁用按钮。
举例:
1
2
3
4
5
6
7
8
9
10
11
12 |
<!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 属性为按钮规定名称。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!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(重置按钮)
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<!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 属性规定按钮的初始值。
举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<!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 元素创建按钮。
你觉得文章内容怎么样