用好表单的按钮(一)

按钮

对于一个交互式表单,按钮是必不可少的。按钮一般分为两类,一类本身就具有特定的功能,叫做特殊按钮,如Submit(提交按钮)——用于传输用户所填写的信息至服务器、Reset(复原按钮)——清除所填写的信息以利重新填写;另一类本身不具特殊功能的,叫作普通按钮。特殊按钮只能用于表单才能发挥特殊的功能。而普通按钮除可在表单中应用外,在网页的其它地方使用也很方便。
  一、制作常规按钮


  制作按钮非常简单,在<input>标记中把type参数设置为:type="submit"就获得一个提交按钮,如本例的“提交”按钮;在<input> 标记中把type参数设置为:type="reset"就获得一个复原按钮,如本例的“重写”按钮;在<input>标记中把type参数设置为:type="button"就获得一个普通按钮。本例的按钮源代码如下:
<input type="submit" name="Submit" value="提 交">
<input type="reset" name="Reset" value="重 写">
<input type="button" name="butto11" value="点我试试" >
  按钮的制虽简单,但在制作按钮时要注意两点:
  1、对于特殊按钮,一般不需另加动作,当按下按钮时就有动作发生;而对于普通按钮,必须加上指定的动作并用相就的事件来触发,才会在事件发生时激发动作,否则按下普通按钮,什么也不发生。在本例的普通按钮上加了一个弹出提示窗口的动作:alert('谢谢您点击!'),并用onclick事件来触发,所以当你在那个按钮上点击时会弹出一个窗口,并显示“谢谢您点击!”这句话。
  2、按钮上的文字是通过设置value参数来实现的,其默认值是英文名。

  二、改变按钮的外观
  HTML对文本提供了丰富的颜色设置,唯独对表单按钮默认的则是Windows系统的颜色,显得有点死板,而且也没有提供按钮的颜色设置参数,因此,要改变表单按钮的外观,只能借助于CSS了。请看下面的示例:


  你看!这个按钮是不是变了样,新鲜多了吧?我们来看看它的源代码作了那些改变。按钮源代码: <input type="submit" name="Submit" value="提 交" style=" font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF">
  从源代码中可以看出,按钮的基本参数设置没变,只是加了一段CSS代码,正是这段CSS代码改变了按钮的外观风格。在这段CSS代码中,不仅重新设置了表单按钮的背景色和字号大小,而且还对按钮的边框线进行了设置,把上边框线、左边框线设置浅一点的颜色,而把下边框线、右边框线设置深一点的颜色,其目的是使表单按钮产生立体效果。当然,你可以任意改变CSS代码中颜色,以使按钮的颜色与所在网页的颜色协调。

时间: 2024-09-28 19:41:19

用好表单的按钮(一)的相关文章

HTML进阶应用技巧(十)用好表单的按钮

按钮|技巧 对于一个交互式表单,按钮是必不可少的.按钮一般分为两类,一类本身就具有特定的功能,叫做特殊按钮,如Submit(提交按钮)--用于传输用户所填写的信息至服务器.Reset(复原按钮)--清除所填写的信息以利重新填写:另一类本身不具特殊功能的,叫作普通按钮.特殊按钮只能用于表单才能发挥特殊的功能.而普通按钮除可在表单中应用外,在网页的其它地方使用也很方便. 一.制作常规按钮 制作按钮非常简单,在<input>标记中把type参数设置为:type="submit"就

php实现表单多按钮提交action的处理方法_php技巧

表单内有两个提交按钮,要实现当点击不同的提交按钮时,分别进行两个不同的处理过程,在这里有实现表单多按钮提交action的处理方法分享给大家. 用PHP判断,一个表单两个按钮,按钮的name属性设为相同,但值设为不同,表单提交后,只需要判断提交上来的值就可以转到不同的处理过程去,这个方法比较合理,适合多个按钮在一个表单里. PHP方法,代码如下: <?php echo "$sub<br>\n"; if ("s1"==$sub) { ... } els

js实现表单多按钮提交action的处理方法_javascript技巧

之前一篇文章介绍了php实现表单多按钮提交action的处理方法,今天再介绍一种js实现表单多按钮提交action的处理方法,希望能够帮助到大家. 用JS实现一个表单多个按钮的方法,两个onclick事件处理,代码如下: <html> <head> <script> function submitit1() //交由程序1处理 { document.myForm.action = "http://www.site.com/cgi1.php" docu

阻止表单提交按钮多次提交的完美解决方法_javascript技巧

如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型. 另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行多次点击重复提交. onclick事件里面执行 $(this).attr('disabled','disabled'); 在点击一次后立马将按钮设置为不可使用. 或者向如下方法另行定义一个jQuery函数来进行控制: $("form").submi

点击表单提交按钮后,显示出空白的页面(项目已经做好了,使用zf框架做的)。

问题描述 点击表单提交按钮后,显示出空白的页面(项目已经做好了,使用zf框架做的). 序号 时间 角色id 角色名 类型 物品id 已恢复时间 datas as $data):?> > hfsort[$data['nOperatorType']];?> ? 点击表单提交按钮后,显示出空白的页面(项目已经做好了,使用zf框架做的).在控制器相应的方法体中的第一行echo一串数字后测试任然是空白的,但是把action的值复制到浏览器的地址栏中直接访问时却可以看到echo出来的那串数字.有哪位

用好表单的按钮(二)

按钮 若想使表单按钮一改那死板板的老面孔,能象网页中其它导航菜单那样具有动态变换样式的效果且仍具其特殊地表单按钮功能,使它更具吸引人的魅力,采用本文介绍的制作方法是个不错的主意.请看下面的示例子. 一.动态变换文本按钮鼠标不在按钮上鼠标在按钮上 你看!这个按钮的效果不错吧?!制作这种效果的思路是这样的,利用CSS属性可以动态改变的特点,先给按钮定义两种外观样式,再在<input>标记中加上两个事件,即onmuseover(鼠标在按钮上)和onmuseout (鼠标离开按钮),我们用这两个事件分

Bootstrap导航栏各元素操作方法(表单、按钮、文本)_javascript技巧

本文主要包括三大方面,大家仔细学习. 1.导航栏中的表单导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用 .navbar-form class.这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为.使用对齐方式选项(这将在组件对齐方式部分进行详细讲解)来决定导航栏中的内容放置在哪里. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认

jQuery实现form表单reset按钮重置清空表单功能_jquery

有时候可能需要实现这样的效果:使用ajax提交表单,成功提交表单之后清空表单,如下代码: 复制代码 代码如下: <form> <input name="name1" /><br/> <input name="name1" /><br/> <textarea name="content"></textarea> <a href="javascript

网页制作基础: 表单按钮的使用

按钮|网页 对于一个交互式表单,按钮是必不可少的.按钮一般分为两类,一类本身就具有特定的功能,叫做特殊按钮,如Submit(提交按钮)--用于传输用户所填写的信息至服务器.Reset(复原按钮)--清除所填写的信息以利重新填写:另一类本身不具特殊功能的,叫作普通按钮.特殊按钮只能用于表单才能发挥特殊的功能.而普通按钮除可在表单中应用外,在网页的其它地方使用也很方便. 一.制作常规按钮 制作按钮非常简单,在<input>标记中把type参数设置为:type="submit"就