网页输入框的样式触发的效果

【 tulaoshi.com - Web开发 】

这个例子主要学习两个参数onblur和onFocus.因为这两个参数以前很少遇到,baidu一下明白了，onblur是控件在失去焦点的时候触发的事件,而onFocus就是成为输入焦点的时候触发的事件,这两个参数都可以和className结合直接调用样式表类名
　　
　　!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
　　
　　"http://www.w3.org/TR/html4/loose.dtd"
　　
　　html
　　
　　head
　　
　　metahttp-equiv="Content-Type"content="text/html;charset=gb2312"
　　
　　title/title
　　
　　/head
　　
　　body
　　
　　styletype="text/css"
　　
　　.input1{
　　
　　font-family:verdana;background-color:#EEEEEE;border-bottom:#FFFFFF1pxsolid;border-left:#CCCCCC1pxsolid;border-right:#FFFFFF1pxsolid;border-top:#CCCCCC1pxsolid;font-size:12px;
　　
　　}
　　
　　.input1-bor{
　　
　　font-family:verdana;background-color:#F0F8FF;font-size:12px;
　　
　　border:1pxsolid#333333;}
　　
　　/style
　　
　　tablecellspacing=2cellpadding=0width=300border=0
　　
　　tr
　　
　　tdfontclass="en1"姓名:/font/td
　　
　　tdinputsize=40name=nameclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"
　　
　　/td
　　
　　/tr
　　
　　tr
　　
　　tdfontclass="en1"邮箱:/font/td
　　
　　tdinputsize=40name=emailclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"/td
　　
　　/tr
　　
　　tr
　　
　　tdfontclass="en1"网址:/font/td
　　
　　tdinputsize=40name=urlclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"
　　
　　/td
　　
　　/tr
　　
　　tr
　　
　　tdfontclass="en1"主题:/font/td
　　
　　tdinputsize=40name=subjectclass="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"
　　
　　/td
　　
　　/tr
　　
　　tr
　　
　　tdfontclass="en1"内容:/font/td
　　
　　tdtextareaname=messagerows=5cols=35class="input1"onblur="this.className='input1'"onfocus="this.className='input1-bor'"/textarea/td/tr/table
　　
　　/body
　　
　　/html