CSS设计符合Web标准的网页表单的几个技巧

windycool111

windycool111

2016-02-19 23:19

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享CSS设计符合Web标准的网页表单的几个技巧,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

本文总结了用div css进行网页表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意。

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

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

textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()"Input English../textarea

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

input type=text name="address" size=19 value="Enter,e-mail..."onFocus="this.value=''"

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

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

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

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"

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

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

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

input type=text name="address" size=19 value="Enter,e-mail..." style=font-family:"verdana";font-size:10px

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

form method=POST action=url target=_blank

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

展开更多 50%)
分享

猜你喜欢

CSS设计符合Web标准的网页表单的几个技巧

Web开发
CSS设计符合Web标准的网页表单的几个技巧

DIV+CSS建立的符合web标准网页的好处

Web开发
DIV+CSS建立的符合web标准网页的好处

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

论web标准的网页制作和符合web标准的网站UI

Web开发
论web标准的网页制作和符合web标准的网站UI

WEB标准的CSS网页布局技巧5则

Web开发
WEB标准的CSS网页布局技巧5则

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

符合WEB标准的网页图像的代码精简

Web开发
符合WEB标准的网页图像的代码精简

符合Web标准!CSS同比例缩小图片

Web开发
符合Web标准!CSS同比例缩小图片

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何扫描图像并将其插入 Word 2010 文档

如何扫描图像并将其插入 Word 2010 文档

多个CSS样式表争夺特定选择符的控制权

多个CSS样式表争夺特定选择符的控制权
下拉加载更多内容 ↓