IT技术江湖   操作系统   安全技术   平面设计   Web开发   数据库   互联网   搜索引擎   网络广告   
引擎技术江湖  BLOG  合作联系
本站
Google
IT技术江湖
首页>Web开发>DIV+CSS重构> CSS设计符合Web标准的网页表单的几个技巧
  • IT技术江湖
  • CSS设计符合Web标准的网页表单的几个技巧
    http://www.hack1st.com 来源: 2008-03-20 阅读: 评论

      本文总结了用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、表单输入单元点击删除:

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

      <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、修改表单属性为弹出窗口:

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

      <form method=POST action=url target=_blank>

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

    上一篇:HTML网页中无刷新的更换CSS样式  
    下一篇:纯CSS制作的新闻网站中的文章列表

    ·网友互动--用户名: (新注册) 密码: 匿名评论 [所有评论]
    评论内容:(用户发表意见仅代表其个人意见,评论内容与本站立场无关,请自觉遵守互联网相关政策法规)
    关注此文读者还看过
    • ·从四个方面谈谈Web标准的价值所在
      ·CSS编写中灵活运行注释的意义
      ·用CSS制作的很不错的简洁的网页导航下拉菜
      ·一个用纯CSS制作的网页下拉菜单
      ·Div + CSS高度自适应解决方案
      ·简单了解学习CSS的伪类
      ·CSS 中的行为 —— expression
      ·网页制作基础知识:为什么我的设置的div最
      ·CSS样式表技巧总结
      ·DIV和CSS排版中制作细线条的几种方法
    最新更新
    • ·从四个方面谈谈Web标准的价值所在
      ·CSS编写中灵活运行注释的意义
      ·用CSS制作的很不错的简洁的网页导航下拉菜
      ·一个用纯CSS制作的网页下拉菜单
      ·Div + CSS高度自适应解决方案
      ·简单了解学习CSS的伪类
      ·CSS 中的行为 —— expression
      ·CSS样式表技巧总结
      ·DIV和CSS排版中制作细线条的几种方法
      ·运用 CSS 的 absolute 与 relative 制作的
    文章关注度排行
    ·Div + CSS高度自适应解决方案
    ·一个用纯CSS制作的网页下拉菜单
    ·用CSS制作的很不错的简洁的网页导航下拉菜
    ·DIV和CSS排版中制作细线条的几种方法
    ·控制网页文件大小通过精简CSS实现
    ·CSS的学习应该注意学习方法
    ·CSS让网页更容易设计与维护
    ·CSS实战:利用CSS相对定位进行多行多列布局
    热点推荐
    频道推荐
    • ·CSS的学习应该注意学习方法
    • ·CSS让网页更容易设计与维护
    • ·CSS设计符合Web标准的网页表单的几个技巧
    • ·巧妙运用CSS样式表立刻改变鼠标的样式
    • ·纯CSS制作的新闻网站中的文章列表
    • ·CSS布局实例:上中下三行,中间自适应
    • ·Web 的内容(Content)、结构(Structure)
    本站精华
    • ·巧妙运用CSS样式表立刻改变鼠
    • ·Web 的内容(Content)、结构
    • ·CSS让网页更容易设计与维护
    • ·CSS的学习应该注意学习方法
    • ·CSS布局实例:上中下三行,中间
    • ·纯CSS制作的新闻网站中的文章
    • | 网站导航 | 联系QQ | 编辑邮箱 | RSS订阅 | 友情链接 | 官方blog
    • 版权所有:IT技术江湖 @2007-2008
    • powered by www.hack1st.com online services. all rights reserved.京ICP备07005766号