你正在查看: 首页 > 技术文章>html > 用好表单的按钮(一)

用好表单的按钮(一)

按钮 对于一个交互式表单,按钮是必不可少的。按钮一般分为两类,一类本身就具有特定的功能,叫做特殊按钮,如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代码中颜色,以使按钮的颜色与所在网页的颜色协调。



客服 反馈