用HTC统一定制表单样式

htc

  在制作表单的时候,我们往往用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的魅力呢?

时间: 2024-08-03 21:24:10

用HTC统一定制表单样式的相关文章

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

在制作表单的时候,我们往往用CSS来重新定义表单元素(如输入框.按钮等)的样式,以便看起来更加美观.而表单中的很多不同元素(如输入框.提交按钮.单选框)使用的是一个标记--Input,这就意味着,我们在CSS中无法通过只定义Input标记来达到我们分别定义样式的目的.一般的做法是定义几种Class,在写表单的时候,不同的元素使用不同的Class.但是在表单较多的时候,这仍显得不是很方便. 那么,有没有更省力的办法呢?答案是肯定的,一个简单的HTC就可以解决这个问题. 实例如下: htc代码: <

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

Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField, 要生成一个具有label.input.error提示这样通用格式的登录框,可编写如下代码: <?php $form = ActiveForm::begin([ 'id' => 'login-form', 'options' => ['class' => 'form-horizontal'], 'fieldConfig' => [ 'template' => "{label}\n

CSS教程:用伪元素控制网页表单样式

文章简介:然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎.以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表.在我写这篇文章的同时,发布了一些webkit的伪元素,所以现在 当开发web应用程序时,表单样式是个头疼的问题.以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式.然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示. 然而,所有这些伪元素都

全面解析Bootstrap表单样式的使用_javascript技巧

本文主要给大家介绍了bootstrap表单样式的使用知识,非常不错,一起看看吧! 表单 <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱:</label> <input type="email" class="form-control" id=&q

yii2 form表单样式怎么设置?或者说在哪里写样式?

问题描述 yii2 form表单样式怎么设置?或者说在哪里写样式? <?= $form->field($model, 'email') ?> 像这种,样式怎么设置? 解决方案 http://blog.csdn.net/iefreer/article/details/42651521 解决方案二: 学习中!大神指点 http://blog.csdn.net/iefreer/article/details/42651521 解决方案三: form表单中的各种样式

全面解析Bootstrap表单使用方法(表单样式)_javascript技巧

一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> <input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <la

css3常用伪类选择改变表单样式

改变input输入框中placeholder的字体样式: :-moz-placeholder { /* Mozilla Firefox 4 to 18 */    color: #f00;  }::-moz-placeholder { /* Mozilla Firefox 19+ */    color: #f00;}input:-ms-input-placeholder,textarea:-ms-input-placeholder {    color: #f00;}input::-webki

jquery+正则实现统一的表单验证_jquery

表单验证一直很繁琐,特别是大点的表单,如果每个input都去单独写验证简直要写死人,最近写了一小段js统一的验证表单内容是否正确. 使用这段代码就不再需要对每个input写格式判断,只需要将正确格式的正则表达式写在datatype里就可以了,提交表单按钮也只需要绑定checkForm函数就可以了. 大家有什么建议可以评论一下 <input type="text" datatype="正则"/> //表单验证 //点击下一步事件 function chec

jquery实现简洁文件上传表单样式_jquery

文章开始先告诉大家制作jquery实现简洁文件上传表单样式的简易教程. 效果图: 页面结构: <div class="uploader white"> <input type="text" class="filename" readonly="readonly"/> <input type="button" name="file" class="b