DHTML实例解析:用HTC统一定制表单样式

转载 2006年06月13日 16:11:00
在制作表单的时候,我们往往用CSS来重新定义表单元素(如输入框、按钮等)的样式,以便看起来更加美观。而表单中的很多不同元素(如输入框、提交按钮、单选框)使用的是一个标记--Input,这就意味着,我们在CSS中无法通过只定义Input标记来达到我们分别定义样式的目的。一般的做法是定义几种Class,在写表单的时候,不同的元素使用不同的Class。但是在表单较多的时候,这仍显得不是很方便。

  那么,有没有更省力的办法呢?答案是肯定的,一个简单的HTC就可以解决这个问题。

实例如下:

  htc代码:

<script language=javascript>
switch(type)
{
  case 'text':
  case 'password': //文本输入框和密码输入框的样式
   style.border="1px solid #000000";
   style.backgroundColor="#FFFFFF";
   style.height="18px";
   style.font="normal 12px 宋体";
   style.color="#000000";
   break;

  case 'submit':
  case 'reset':
  case 'button': //按钮类的样式(不包括图片按钮)
   style.border="1px solid #000000";
   style.backgroundColor="#CCCCCC";
   style.height="18px";
   style.font="normal 12px 宋体";
   style.color="#000000";
   break;

  default: ; //对于象单选框多选框等上面没有出现过的元素,我们使用默认样式。
}
</script>

  把上面这段代码保存成一个HTC文件,比如保存成input.htc。

  简单分析一下代码:事实上这仅仅是一段JS,通过判断type(Input是通过type属性判断是哪种表单域的,注意这里switch语句的使用)来决定使用什么样式。是不是很简单?

  HTC文件写好之后,接下来我们要用CSS的行为(behavior)来调用这个HTC文件,调用的CSS语句如下:

  input { behavior:url('input.htc') } /*这里假设input.htc与网页在同一目录下*/

  我们看到,现在我们是定义了整个Input标记的样式,而具体什么表单元素使用什么样式,则是通过JS在HTC文件中判断并定义的。

  这里,笔者做了一个例子供大家下载并学习使用:点此下载实例

  怎么样,我们是不是已经通过这样一个简单的实例初步领略到了HTC的魅力呢?

HTC VIVE开发教程(四)

从这一节起我开始介绍一些vive的交互实现方式,比如手柄发出的射线,凝视,瞬移等等。SteamVR插件内都有这三种交互的辅助类。 Extras文件夹里面的SteamVR_GazeTracke...
  • tyuiof
  • tyuiof
  • 2016年10月11日 16:38
  • 6682

HTCVive VR开发场景事件交互指南

与场景互动Vive手柄介绍除了视野和位置的控制是由头盔完成,Vive的主要输入方式是通过手柄。手柄在输入方面一是提供手的定位和定向,使得玩家的双手的位置、手柄的方向、手心的朝向都可以体现在VR中;二是...
  • u012519228
  • u012519228
  • 2017年02月17日 20:13
  • 1591

html+jsp(表单示例)

1:html       表单实例                     用户注册                     用户ID:      ...
  • pangqiandou
  • pangqiandou
  • 2016年10月21日 19:04
  • 1561

Yii2 定制表单输入字段的标签和样式

Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, 要生成一个具有label、input、error提示这样通用格式的登录框,可编写如下代码: ...
  • chunxiaqiudong5
  • chunxiaqiudong5
  • 2016年11月23日 11:10
  • 352

HTC范例 统一页面样式控件风格

  • 2007年08月23日 09:41
  • 1KB
  • 下载

HTML5:定制表单

HTML5中存在多种不同的输入框和按钮,通过设置input元素的type属性来实现,除此之外,HTML5中还支持选择列表、多行输入框等,这些元素都有自己的用途和属性,下面一一介绍。单行文本输入框typ...
  • liuy_98_1001
  • liuy_98_1001
  • 2016年02月16日 14:45
  • 3064

DHTML技术---前端用户提交信息验证和表单提交控制+完整表单验证代码实例

前端用户提交信息验证 前端和用户交互,对于用户提交的信息,一定是需要验证的。比如一个注册页面,要验证用户名是否非法、用户两次输入密码是否一致等。而且我们在验证的时候,最好是当用户输入完用户名就直接提...
  • weixin_37720904
  • weixin_37720904
  • 2017年05月16日 12:32
  • 186

DHTML-----表格的创建和样式

一、表格的创建、删除 给定表格的行列,实现创建,修改和,删除功能 DHTML技术演示 table{ border-collapse:collapse; c...
  • wangjian_an
  • wangjian_an
  • 2016年06月17日 12:06
  • 371

Excel制表实例操作

  • 2012年11月21日 08:49
  • 11.44MB
  • 下载

跟着实例学Visual C++6.0访问数据库、绘图、制表.pdf

  • 2011年01月04日 16:45
  • 12.67MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DHTML实例解析:用HTC统一定制表单样式
举报原因:
原因补充:

(最多只允许输入30个字)