HTML 表单按钮的基本知识
按钮对象 :
按钮是表单中常用的对象。 如下语法可以在 javascript 中引用到文档中的按钮对象
语法: document.formname.buttonname
示例代码:
<form name=buttonform>
<input name=button1 value=test type=button>
</form>
<script language="javascript">
var buttonobject= document.buttonform.button1;
</script>
这里是表单中按钮元素中可用的函数，dom 属性和方法。
事件句柄: 与按钮相关的:
下面所有的例子采用了自定义的 javascript 函数 output()
<script language=javascript>
function output()
{
alert("测试按钮事件");
}
</script>
DOM 属性:
如下是 DOM (文档对象模型 Dynamic Object Model) 中定义的属性列表
可用于在 javascript 中获取或修改按钮属性。
下面的示例代码基于表单
<form name=testb>
<input name=myb type=button value=xxx>
</form>
| DOM 属性 | 说明 | 示例 |
| name | 用于访问按钮名称 |
获取时用:
var ss = document.testb.myb.name;
|
| type | 用于获取控件类型 |
To Get:
var ss = document.testb.myb.type;
|
| value | 用于访问按钮上的文本值 |
To Get:
var ss = document.testb.myb.value;
设置时用::
document.testb.myb.value = "性急";
|
| disabled | 用于启用或者禁用按钮。
通过设置该属性为 true 可以禁用按钮。 |
禁用时用:
document.testb.myb.disabled = true;
启用时用::
document.testb.myb.disabled = false;
|
DOM 方法:
如下是 DOM (文档对象模型 Dynamic Object Model) 中定义的方法列表
用于在 javascript 中完成动态修改如按钮单击事件等代码。
| DOM 方法 | 说明 | 示例 |
| click() | 用于动态创建按钮单击事件 |
要执行单击按钮事件时用:
document.testb.myb.click();
|
| blur() | 用于动态执行按钮失去焦点事件 |
想要执行失去焦点代码时用:
document.testb.myb.blur();
|
| focus() | 用于动态执行按钮获取焦点事件 |
想要执行获取焦点代码时用:
document.testb.myb.focus();
|
示例: 当鼠标移到按钮上时改变按钮文本
<script language=javascript>
function bevent()
{
var xx = document.xx.btest;
xx.value= "测试按钮事件";
}
</script>
<form name=xx>
<input type=button name=btest onMouseOver="bevent()">
</form>
结果:
| 
导言
