今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽。另外,这款表单应用还采用了3种不同的风格主题,你可以在演示页的菜单栏中选择一种样式。需要高版本的浏览器才能支持。

你也可以在这里在线演示

下面我们来简单分析一下这款表单的源代码,源代码由HTML代码、CSS代码及Javascript代码组成。一共3组样式,我们只对其中一组作解说。

HTML代码:

<ul data-for="prefix">
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li> <li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
<li> <input type="text" placeholder="Type here..." /> </li>
</ul>

很简单,用一组input实现基本的输入表单。这里利用了HTML5的placeholder属性实现输入框空白时默认的提示文字。

接下来是CSS代码,将渲染这些输入表单的样式。

CSS代码:

.postfix {
vertical-align: top;
display: inline-block;
width: 20px;
height: 20px;
padding: 8px 10px;
background: #f2f2f2;
border: 1px solid #cccdcf;
border-left:;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
} .prefix,
.postfix {
font-family: FontAwesome;
line-height: 1.5em;
font-size: 16px;
color: #737373;
}

其中表单前面的小图标是这样实现的:

.prefix.orange,
.postfix.orange {
background: #ffb700;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjcwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjhjMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffb700 0%, #ff8c00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb700), color-stop(100%,#ff8c00));
background: -webkit-linear-gradient(top, #ffb700 0%,#ff8c00 100%);
background: -o-linear-gradient(top, #ffb700 0%,#ff8c00 100%);
background: -ms-linear-gradient(top, #ffb700 0%,#ff8c00 100%);
background: linear-gradient(to bottom, #ffb700 0%,#ff8c00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
border: 1px solid #e59500;
color: #fff;
}

data:image是CSS3专有的属性,可以用编码的二进制流来生成图片。

Javascript代码:

$(document).ready(function() {

    /* Force placeholder support */
if(!Modernizr.input.placeholder){
$("input").each( function(){ thisPlaceholder = $(this).attr("placeholder"); if(thisPlaceholder!=""){ $(this).val(thisPlaceholder);
$(this).focus(function(){ if($(this).val() == thisPlaceholder) $(this).val(""); });
$(this).blur(function(){ if($(this).val()=="") $(this).val(thisPlaceholder); });
}
});
} /* Prefix */
$('.ppfix.pre').each(function() { var className, preElem; className = $(this).attr('class').replace('pre', '').replace('ppfix', '').trim();
preElem = '<span> </span>'; $(this).before(preElem);
}); /* Postfix */
$('.ppfix.post').each(function() { var className, preElem; className = $(this).attr('class').replace('post', '').replace('ppfix', '').trim();
preElem = '<span> </span>'; $(this).after(preElem);
}); });

以上代码只是一些最核心的代码,全部代码大家可以下载源码来研究。源码下载>>

精美的HTML5/CSS3表单 带小图标的更多相关文章

  1. 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

    这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

  2. 8款最新CSS3表单 环形表单很酷

    当我们在网站上注册登录还是提交评论,都需要用到表单,今天我们来分享8款最新CSS3表单,有几个效果很酷很特别,有些也非常实用,一起来看看. 1.CSS3环形特色表单 转圈切换表单焦点 这款CSS3表单 ...

  3. JQ表单选择器和CSS3表单选择器

    JQ表单选择器和CSS3表单选择器 JQ表单选择器 为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...

  4. hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  5. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  6. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  7. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  8. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

  9. HTML5的表单input元素的新属性

    知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...

随机推荐

  1. js中取小数整数部分函数;取小数部分

    1.丢弃小数部分,保留整数部分 parseInt(23.56); 结果:23 2.向上取整,有小数就整数部分加1 Math.ceil(23.56) 结果:24 3,四舍五入. Math.round(2 ...

  2. eclipse Maven 使用记录 ------ 建立 webapp项目

    maven 建立 webapp 项目 有2种方式 ,  1.在原先app上转换为webapp项目  2.建立maven项目的时候  filter 选择webapp 该选项把webapp文件目录建好,其 ...

  3. (转载)跟我一起学习VIM - The Life Changing Editor

    原文: http://ju.outofmemory.cn/entry/79671 前两天同事让我在小组内部分享一下VIM,于是我花了一点时间写了个简短的教程.虽然准备有限,但分享过程中大家大多带着一种 ...

  4. win8中的gridview和listview控件微软链接

    快速入门:添加 ListView 和 GridView 控件 http://msdn.microsoft.com/zh-cn/library/windows/apps/hh780650.aspx XA ...

  5. [转]Commons IO 官方文档

    原文地址:http://ifeve.com/commons-io/ 本文翻译自 Commons IO 官方文档 译者:MagicWolf Common IO 是一个工具库,用来帮助开发IO功能 它包括 ...

  6. RPC框架与分布式服务框架的区别

    第一:RPC框架是点对点的通信方式,即服务消费者与服务提供者是点对点通信 第二:分布式服务框架,不近具有RPC框架的特性,同时,还包括以下特性: 1.提供多台服务器提供服务,具有负载均衡策略 2.服务 ...

  7. java时间操作:获取当天剩余时间

    mport org.apache.commons.lang.time.DateUtils; import org.joda.time.DateTime; import org.joda.time.Du ...

  8. [转].Net连接池超时注意事项

    http://blog.csdn.net/jxqvip/article/details/6738551 超时时间已到.超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并 ...

  9. Hulu面试题

    1.给定一个N位数,例如12345,从里面去掉k个数字,得到一个N-k位的数,例如去掉2,4,得到135,去掉1,5,得到234.设计算法,求出所有得到的N-k位数里面最小的那一个? 解决方案一:(1 ...

  10. const_cast的应用

    对于const变量,我们不能修改它的值,这是这个限定符最直接的表现.但是我们就是想违背它的限定希望修改其内容怎么办呢?于是我们可以使用const_cast转换符是用来移除变量的const限定符.con ...