用CSS设计高体验的表单显示效果示例

css|设计|示例|显示

<style type="text/css">
.input1{
font-family: verdana;background-color: #EEEEEE;border-bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-size: 12px;
}
.input1-bor {
font-family:verdana;background-color:#F0F8FF;font-size: 12px;
border: 1px solid #333333;}
</style>
<table cellspacing=2 cellpadding=0 width=300 border=0>
<tr>
<td><font class="en1">姓名:</font> </td>
<td><input size=40 name=name class="input1" onblur="this.className='input1'" >
</td>
</tr>
<tr>
<td><font class="en1">邮箱:</font></td>
<td><input size=40 name=email class="input1" onblur="this.className='input1'" ></td>
</tr>
<tr>
<td><font class="en1">网址:</font> </td>
<td><input size=40 name=url class="input1" onblur="this.className='input1'" >
</td>
</tr>
<tr>
<td><font class="en1">主题:</font> </td>
<td><input size=40 name=subject class="input1" onblur="this.className='input1'" >
</td>
</tr>
<tr>
<td><font class="en1">内容: </font> </td>
<td><textarea name=message rows=5 cols=35 class="input1" onblur="this.className='input1'" ></textarea></td></tr></table>

时间: 2024-09-12 00:27:17

用CSS设计高体验的表单显示效果示例的相关文章

利用label标签和CSS美化文件上传表单

文件上传类型表单<input type="file" />是一个让很多前端开发者纠结过的表单类型,因为它是一个无法单纯用CSS给它定义兼容的样式.上周的工作中有个批量上传图片的页面,又遇到了这个问题,于是,今天把我的解决方案奉献给大家:利用label标签与CSS共同打造一个样式可控的并兼容IE6之外主流浏览器的上传表单. 实现思路通俗易懂: 首先,我们要新增一个与file相册大小的button按钮,然后利用label为初始的file类型表单定义标注(关于label的解释与用

js禁止回车提交表单的示例代码

 本篇文章主要是对js禁止回车提交表单的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示;  代码如下: function ifenter(){    if(event.keyCode==13){   return   false;   }else if(event.srcElement.type=="submit"){    form1.submit();    }   }    document.onkeydown=ifenter;    

非常不错的表单显示效果

提示:您可以先修改部分代码再运行 非常不错的表单显示效果 姓名: 邮箱: 网址: 主题: 内容: 提示:您可以先修改部分代码再运行

注册表单设计:修改密码的表单设计及整体体验

文章描述:修改密码的表单设计及整体体验. 2011年岁末先后爆出CSDN.天涯等站点的用户明文密码泄漏,大家纷纷忙着修改密码,不少网站也通过在网页醒目位置发布公告或发送邮件提醒告知用户及时修改自己的密码以确保账户安全.对网站而言,希望用户能够定期主动去修改密码并保证一定的复杂度:但对用户来说,一般不到万不得已,通常不会经常修改密码.同样是表单,注册表单的产品设计大家常讨论,那么修改密码的表单设计及整体体验又是如何? 一.大型门户 1. 网易通行证 表单中的每个输入框均会给出有效性反馈,新密码的复

CSS网页设计实例:网页登陆表单实例

文章简介:网页登陆表单实例. W3cplus从今天刚开推出藤藤练习的CSS3系列.出这个系列主要是为了让同样有着CSS3兴趣的同学更有动力,在这个系列中都是由W3cplus美女成员藤藤每天根据国外搜集的有关psd设计图,然后将设计图通过css3的代码转换成DEMO案例.一是为了自己提高,二是与其他有同样爱好的同学一起分享.如果你喜欢,那就持续关注w3cplus的有关更新. 这个案例主要制作的是一个登录表单,在这个案例中使用了box-shadow.gradient,transform和transi

用CSS制作具有亲和力的表单

css 对于表单,很常用.但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过.我现在要介绍一个用< fieldset></label>标签制作漂亮而且具体亲和力的表单的方法. 基本的xhtml<h3>已注册用户登录</h3>  <form action="" method="post" name="apLogin" id="

使用validwhen设计复杂的Struts表单验证

表单验证|设计 通过Struts 1.2提供的validwhen 验证器可以轻松的创建更加复杂灵活的表单验证. 比如说,我们要验证用户两次输入的密码是否相同,或是只有当用户填写表单项"姓氏"时,表单项"名字"才是必须的. validwhen 需要声明一个叫test的var字段,这个变量的值是一个布尔型的表达式,比如:     <var-name>test</var-name>    <var-value>((orderLines[

CSS中下拉菜单和表单以及弹出层的简单笔记

  下拉菜单 display:block,盒子会由收缩包围元素变为扩展填充父元素 position:absolute是相对于父元素的绝对位置,其坐标都是相对于父元素的,比如对齐下拉菜单 CSS Code复制内容到剪贴板 .mene li ul{ display:block; position:absolute; left:0; top:100%; } 表单 input的type: text:基本的单行文本框. password:文本显示为掩码. checkbox:复选框. radio:单选按钮.

.Net语言Smobiler开发利用Gridview控件设计较复杂的表单_实用技巧

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便. 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的"Smobiler Components"拖动一个GridView控件到窗体界面上 2.修改GridView控件的属性 a.load事件代码  VB: Private Sub TestGridView3_Load(senderAs Object, e As EventArgs)Handles MyBa