关注前端开发
关注用户体验

DIV+CSS表单布局的五个小技巧

1、表单文本输入的移动选择:

在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入 onMouseOver=”this.focus()” onFocus=”this.select()” 代码到 <textarea> 中,一切就会变得简单多了,如:

[html]<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver=”this.focus()” onFocus=”this.select()”>大前端 www.daqianduan.com</textarea>[/html]

类似的,可以加入代码到<input>

2、表单输入单元点击删除:

本列同上则作用类似,只是使用鼠标上略有变化,需要点击而不像上则的只要鼠标覆盖。如:

[html]<input type=text name=”address” size=19 value=”大前端www.daqianduan.com” onFocus=”this.value=””>[/html]

点击输入单元后,提示信息会删除,是不是很方便

3、表单输入单元的边框设置:

更改传统的表单单元边框,会让你的主页生色不少。如:

[html]<input type=radio name=action value=subscribe checked style=”BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8″>[/html]

其中”style=***”为左右上下和背景色设置,适用于其它单元,请读者亲自试试。

4、表单输入单元的文字设置:

表单中单元的字体是可以修改的,如:

[html]<input type=text name=”address” size=19 value=”大前端www.daqianduan.com” style=“font-size:10px”>[/html]

其中”style=***”为字体和字大小设置。

5、修改表单属性为弹出窗口:

大多数表单激活后,会在当前页面中打开,影响正常浏览。不如修改一下,如

[html]<form method=POST action=url target=_blank>[/html]

其中”target=_blank”为控制在弹出窗口打开。

赞(0)
未经允许不得转载:大前端 » DIV+CSS表单布局的五个小技巧
分享到: 更多 (0)

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #2

    Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is great, as well as the content!

    Sandy Tsuda1周前 (03-11)回复
  2. #1

    我测试了一下,貌似不行。

    Damon4年前 (2015-01-19)回复

themebetter 国内更好的WordPress主题服务商

立即前往