所在的位置: html >> html市场 >> HTML表单按钮

HTML表单按钮

北京中科忽悠 http://www.t52mall.com/bdfcs/bdfcsjj/1398.html

表单按钮一般分为三类,分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方使用。

从本质上讲,表单按钮也是表单控件,之所以把它分离出来,单独介绍,是因为它的功能比较特别。提交按钮用于把表单数据发送到服务器,重置按钮用于重置整个表单的数据,普通按钮则需要开发者赋予它功能。

当用户点击提交按钮和重置按钮时,就有动作发生,一般不需要添加动作;而普通按钮,必须加上指定的动作,并通过相应的事件来触发,才会在事件发生时激发动作,否则点击普通按钮,什么也不发生。

1.1.1提交按钮

用户在表单中填写信息后,只有点击提交按钮,这些信息才会被发送到服务器。把input元素的type属性设置为“submit”,来创建提交按钮。

在创建提交按钮时,input元素的value属性值,为按钮上显示的文本。如果没有提供value属性,则按钮上默认显示“提交”。如:

inputtype="submit"value="立即购买"

上述按钮的运行结果如图所示:

图文本按钮

如果不提供name属性,则提交按钮的名/值对就不会发送给服务器。由于通常不需要这些信息,因此,这种做法是有益的。但是,如果表单上有多个提交按钮,就需要为每个按钮提供name属性,以便能够知道哪个按钮被点击。

默认的按钮非常丑陋,并且不同浏览器下的外观又不尽相同。因此,可以创建一幅漂亮的图像,再把input元素的type属性设置为“image”,把src属性设置为图像的URL,就可以使用该图像作为提交按钮。使用图像按钮时,input元素没有value属性。如:

inputtype="image"src="submit.png"alt="提交"

当用户将鼠标悬停在图像按钮上时,浏览器会将箭头替换为手形图标。运行结果如图所示:

图图像按钮

在功能上,图像按钮跟type=submit的按钮没任何区别,只是用图像取代input元素的value属性而已。当然,完全可以通过CSS来美化提交按钮的外观,达到图像一样的效果。这样,在实现了相同效果的同时,又不必向服务器请求图像,可以减少服务器的负担。

说明:

HTML5对type="email"和type="url"的input元素添加了自动验证功能,对提交按钮使用formnovalidate属性可以关闭该功能,如inputtype="submit"formnovalidate/。

1.1.2重置按钮

有时候,用户填完表单信息后,发现填写错误,希望将表单数据还原为页面加载时的状态。为此,可以在表单上创建一个重置按钮。

把input元素的type属性设置为“reset”,来创建重置按钮。value属性的值,为按钮上显示的文本。如果没有提供value属性,则按钮上默认显示“重置”。如:

inputtype="reset"value="取消"

上述按钮的运行结果如图所示:

图重置按钮

当用户点击重置按钮时,就会清除用户填写的数据,将表单中的所有控件重新设置为它们的初始值。在用户提交表单时,重置按钮的name和value不会提交给服务器。

1.1.3普通按钮

把input元素的type属性设置为“button”,可以创建普通按钮。按钮上显示的文本是value属性的值,如果没有提供value属性,则只创建一个空按钮。如:

inputtype="button"value="立即购买"

上述按钮的运行结果如图所示:

图普通按钮

默认情况下,在普通按钮上点击,是没有任何反应的。因此,需要为普通按钮注册事件,并手动编写相应的处理函数。假如希望单击上述按钮时,提交表单,则要为按钮注册onClick事件。如:

formname="buy"action="form.html"method="post"

buttononClick="submitForm(buy)"立即购买/button

/form

现在点击按钮,就会触发onClick事件,并调用事件处理函数submitForm(buy),参数buy为待处理表单name属性的值。如果希望点击按钮后提交表单,就可以在事件处理函数中调用form对象的submit()方法:

functionsubmitForm(f){

f.submit();

}




转载请注明:http://www.aierlanlan.com/rzdk/7727.html