今天我们要来分享一款非常精美的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. Python生成一个不含回文字符串的字符串

    [本文出自天外归云的博客园] 回文字符串介绍 回文字符串就是对称的字符串,例如: “ABA” “ABBA” “ABCBA” 题目 给定一个字符串,请发明一种方法,让字符串中不包含回文字符串. 我的解法 ...

  2. WideCharToMultiByte和MultiByteToWideChar函数的用法(转)

    转自:http://www.cnblogs.com/gakusei/articles/1585211.html 为了支持Unicode编码,需要多字节与宽字节之间的相互转换.这两个系统函数在使用时需要 ...

  3. web开发经验

    图片显示不全 网站进行了迁移,更换了新框架,结果出现了图片显示不全的问题,后来发现是nginx权限问题 curl 无报错,无返回 有可能是url错误,而无服务器对错误的url返回空,没返回错误

  4. Linux定时任务Crontab命令详解_转

    转自:Linux定时任务Crontab命令详解 (部分修改) linux 定时系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个系统服 ...

  5. Redis初步认识

    官网:redis.io Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的 ...

  6. 处理异常json串的jar包JsonSerde

    参考下面文章: https://blog.csdn.net/SunnyYoona/article/details/70170173

  7. 115道Java经典面试题(面中率最高、最全)

    115道Java经典面试题(面中率最高.最全) Java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可 ...

  8. Hbuilder开发app实战-识岁03-文件上传

    前言 做app不得不谈的问题就是文件上传.用hbuilder开发app让上传变的非常easy. Uploader Uploader模块管理网络上传任务,用于从本地上传各种文件到server,并支持跨域 ...

  9. git 服务器新建仓库 远程仓库

    Git 服务器搭建 上一章节中我们远程仓库使用了 Github,Github 公开的项目是免费的,但是如果你不想让其他人看到你的项目就需要收费. 这时我们就需要自己搭建一台Git服务器作为私有仓库使用 ...

  10. Spring Cloud Eureka 服务关闭但是未从注册中心删除 自我保护机制

    自我保护背景 首先对Eureka注册中心需要了解的是Eureka各个节点都是平等的,没有ZK中角色的概念, 即使N-1个节点挂掉也不会影响其他节点的正常运行. 默认情况下,如果Eureka Serve ...