|
按钮（button）在网页中非常常见，当需要执行某个操作时，一般需要单击按钮。按钮有三类：普通按钮、提交（submit）按钮和重置（reset）按钮。
一、普通按钮
普通按钮的语法为：
<input type = "button" name = 控件名称 value = 按钮值 onclick = 处理程序>
其中，type = "button"说明它是按钮控件，name值是按钮在程序内部的名称，value值是按钮显示给用户的文字。当用户单击按钮时，就会激发click事件，onclick用于设置此时所要进行的处理，一般是一段程序。
下面给出普通按钮的例子。为说明onclick的用法，我们不得不给出简单的JavaScript程序。
【例9】使用普通按钮。
<html>
<head>
<title>itsway --表单</title>
</head>
<body>
<form name = "example">
几个按钮：<br>
<input type = "button" name = "button1" value = "普通按钮">
<input type = "button" name = "button2" value = "打开窗口"
onclick = "window.open()">
<input type = "button" name = "button3" value = "关闭当前窗口"
onclick = "window.close()">
</form>
</body>
</html>
当单击“普通按钮”时，程序不会有任何动作，因为并没有给它定义onclick程序；当单击“打开窗口”时，会执行按钮的onclick对应的程序“window.open()”，打开一个新窗口；当单击“关闭当前窗口”时，会执行按钮的onclick对应的程序“window.close()”，从而可以关闭当前窗口。
正如本章开头所说的那样：要真正发挥动态网页的强大功能，则必学JavaScript。要想深入学习，请看本站JavaScript教程或其他网站、图书中的相关教程。
二、提交按钮和重置按钮
提交按钮是一种特殊的按钮，它不需要设置onclick行为，在单击该类按钮时可以实现表单内容的提交，将表单提交给<form>标记的action属性指向的程序或网页。语法为：
<input type = "submit" name = 控件名称 value = 按钮值>
该语法和普通按钮的另一个最大不同是：它的type = submit。
重置按钮可以用来清除用户在表单中输入的信息，格式为：
<input type = "reset" name = 控件名称 value = 按钮值>
请注意重置按钮的type = reset。
这两个按钮的用法，我们在本章例1中已经见过了。当时可能还不太理解，现在结合一般按钮，在了解了它们的语法之后，再看一遍例1，就好理解多了。
【例10】使用提交和重置按钮，向自己的电子邮箱发一些内容。
下面的网页向webmaster@itsway.net发送一些信息，你可以修改这个邮箱地址，改成自己的邮箱，填写表单后单击“提交”按钮，看看会收到什么内容。
<html>
<head>
<title>itsway --表单</title>
</head>
<body>
<font size = "2">
<form name = "diaocha" action = "mailto:webmaster@itsway.net" method = "post">
<p>用户名：
<input type = "text" name = "username" size = "20"></p>
<p>密码：
<input type = "password" name = "p1" size = "10">
重复密码：
<input type = "password" name = "p2" size = "10"></p>
<p>证件类型：
<select name = "papertype">
<option value = "shenfen" selected>身份证</option>
<option value = "officer">军官证</option>
<option value = "soldier">士兵证</option>
<option value = "gongzuo">工作证</option>
<option value = "student">学生证</option>
</select>
证件号码：
<input type = "text" name = "papernum" size = "20" maxlength = "20"></p>
<p>出生日期：
<input type = "text" name = "birthday" size = "20">
性别：
<input type = "radio" name = "sex" checked>男
<input type = "radio" name = "sex">女</p>
<p>你所喜欢的教程：
<input type = "checkbox" name = "like1" checked>HTML教程
<input type = "checkbox" name = "like2">CSS教程
<input type = "checkbox" name = "like3">JavaScript教程
<input type = "checkbox" name = "like4">Java教程
</p>
<p>
<input type = "submit" name = "submit" value = "发送给我">
<input type = "reset" name = "reset" value = "清除重写">
</p>
</form>
</font>
</body>
</html>
上一篇：10.5 下拉菜单和列表 下一篇：10.7 图像域、隐藏域和文件域
|
