css3用户体验注册表单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3用户体验注册表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
  <head>
    <title>css3用户体验注册表单</title>
    <meta charset="utf-8" />
	<style>

		body { 
			background: #eee; 
		}

		/*------------------------------*/

		#signup {
			width: 550px;
			height: 330px;
			margin: 100px auto 50px auto;
			padding: 20px;
			position: relative;
			background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAMAAAB883U1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF7+/v7u7u////REBVnAAAAAN0Uk5T//8A18oNQQAAABZJREFUeNpiYGJiYmBiYgRiBhAGCDAAALsAFJhiJ+UAAAAASUVORK5CYII=);
			border: 1px solid #ccc;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px; 
			border-radius: 3px;  
		}

		#signup::before, 
		#signup::after {
			content: "";
			position: absolute;
			bottom: -3px;
			left: 2px;
			right: 2px;
			top: 0;
			z-index: -1;
			background: #fff;
			border: 1px solid #ccc;			
		}

		#signup::after {
			left: 4px;
			right: 4px;
			bottom: -5px;
			z-index: -2;
			-moz-box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
			-webkit-box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
			box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
		}

		/*------------------------------*/

		#signup h1 {
			position: relative;
			font: italic 1em/3.5em 'trebuchet MS',Arial, Helvetica;
			color: #999;
			text-align: center;
			margin: 0 0 20px;
		}

		#signup h1::before,
		#signup h1::after{
			content:'';
			position: absolute;
			border: 1px solid rgba(0,0,0,.15);
			top: 10px;
			bottom: 10px;
			left: 0;
			right: 0;
		}

		#signup h1::after{
			top: 0;
			bottom: 0;
			left: 10px;
			right: 10px;
		}

		/*------------------------------*/

        ::-webkit-input-placeholder {
           color: #bbb;
        }
        
        :-moz-placeholder {
           color: #bbb;
        } 				    	

		.placeholder{
			color: #bbb; /* polyfill */
		}		

		#signup input{
			margin: 5px 0;
			padding: 15px;
			width: 100%;
			*width: 518px;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			border: 1px solid #ccc;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;	
		}

		#signup input:focus{
			outline: 0;
			border-color: #aaa;
			-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
			-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
			box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
		}		

		#signup button{
			margin: 20px 0 0 0;
			padding: 15px 8px;			
			width: 100%;
			cursor: pointer;
			border: 1px solid #2493FF;
			overflow: visible;
			display: inline-block;
			color: #fff;
			font: bold 1.4em arial, helvetica;
			text-shadow: 0 -1px 0 rgba(0,0,0,.4);		  
			background-color: #2493ff;
			background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
			background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
			background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
			background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
			background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
			background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
			-webkit-transition: background-color .2s ease-out;
			-moz-transition: background-color .2s ease-out;
			-ms-transition: background-color .2s ease-out; 
			-o-transition: background-color .2s ease-out;  
			transition: background-color .2s ease-out;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
			-moz-box-shadow:  0 2px 1px rgba(0, 0, 0, .3),
							  0 1px 0 rgba(255, 255, 255, .5) inset;
			-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
								0 1px 0 rgba(255, 255, 255, .5) inset;
			box-shadow: 0 2px 1px rgba(0, 0, 0, .3),
						0 1px 0 rgba(255, 255, 255, .5) inset;			  						  
		}

		#signup button:hover{
		  	background-color: #7cbfff;
            border-color: #7cbfff;
		}

		#signup button:active{
			position: relative;
			top: 3px;
			text-shadow: none;
			-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
			-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
			box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
		}

		/* ------------------------------------------------- */

		#about{
		    color: #999;
		    text-align: center;
		    font: 0.9em Arial, Helvetica;
		}

		#about a{
		    color: #777;
		}		
	</style>    
  </head>

  <body>

  	<form id="signup">
		<h1>Start doing cool stuff in seconds.</h1>
		<input type="email" placeholder="john.doe@email.com" required="">
		<input type="password" placeholder="Choose your password" required="">
		<input type="password" placeholder="Confirm password" required="">					
		<button type="submit">Sign up for free!</button>	
	</form>
	<script src="jquery/jquery.js"></script>
	<script src="jquery/jquery.placeholder.js"></script>
	<script>
		$(function() {
		 $('input').placeholder();
		});	
	</script>
  </body>
</html>

JS代码(jquery.placeholder.js):

/*! http://mths.be/placeholder v2.0.4 by @mathias */
;
	(function(window,document,$){
	var isInputSupported = 'placeholder' in document.createElement('input'),isTextareaSupported = 'placeholder' in document.createElement('textarea'),prototype = $.fn,valHooks = $.valHooks,hooks,placeholder;
	if (isInputSupported && isTextareaSupported){
	placeholder = prototype.placeholder = function(){
	return this;
}
;
	placeholder.input = placeholder.textarea = true;
}
else{
	placeholder = prototype.placeholder = function(){
	return this.filter((isInputSupported ? 'textarea':':input') + '[placeholder]').not('.placeholder').bind({
	'focus.placeholder':clearPlaceholder,'blur.placeholder':setPlaceholder}
).data('placeholder-enabled',true).trigger('blur.placeholder').end();
}
;
	placeholder.input = isInputSupported;
	placeholder.textarea = isTextareaSupported;
	hooks ={
	'get':function(element){
	var $element = $(element);
	return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '':element.value;
}
,'set':function(element,value){
	var $element = $(element);
	if (!$element.data('placeholder-enabled')){
	return element.value = value;
}
if (value == ''){
	element.value = value;
	// Issue #56:Setting the placeholder causes problems if the element continues to have focus.if (element != document.activeElement){
	// We can鈥檛 use `triggerHandler` here because of dummy text/password inputs:(setPlaceholder.call(element);
}
}
else if ($element.hasClass('placeholder')){
	clearPlaceholder.call(element,true,value) || (element.value = value);
}
else{
	element.value = value;
}
// `set` can not return `undefined`;
	see http://jsapi.info/jquery/1.7.1/val#L2363return $element;
}
}
;
	isInputSupported || (valHooks.input = hooks);
	isTextareaSupported || (valHooks.textarea = hooks);
	$(function(){
	// Look for forms$(document).delegate('form','submit.placeholder',function(){
	// Clear the placeholder values so they don鈥檛 get submittedvar $inputs = $('.placeholder',this).each(clearPlaceholder);
	setTimeout(function(){
	$inputs.each(setPlaceholder);
}
,10);
}
);
}
);
	// Clear placeholder values upon page reload$(window).bind('beforeunload.placeholder',function(){
	$('.placeholder').each(function(){
	this.value = '';
}
);
}
);
}
function args(elem){
	// Return an object of element attributesvar newAttrs ={
}
,rinlinejQuery = /^jQuery\d+$/;
	$.each(elem.attributes,function(i,attr){
	if (attr.specified && !rinlinejQuery.test(attr.name)){
	newAttrs[attr.name] = attr.value;
}
}
);
	return newAttrs;
}
function clearPlaceholder(event,value){
	var input = this,$input = $(input);
	if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')){
	if ($input.data('placeholder-password')){
	$input = $input.hide().next().show().attr('id',$input.removeAttr('id').data('placeholder-id'));
	// If `clearPlaceholder` was called from `$.valHooks.input.set`if (event === true){
	return $input[0].value = value;
}
$input.focus();
}
else{
	input.value = '';
	$input.removeClass('placeholder');
}
}
}
function setPlaceholder(){
	var $replacement,input = this,$input = $(input),$origInput = $input,id = this.id;
	if (input.value == ''){
	if (input.type == 'password'){
	if (!$input.data('placeholder-textinput')){
	try{
	$replacement = $input.clone().attr({
	'type':'text'}
);
}
catch(e){
	$replacement = $('<input>').attr($.extend(args(this),{
	'type':'text'}
));
}
$replacement.removeAttr('name').data({
	'placeholder-password':true,'placeholder-id':id}
).bind('focus.placeholder',clearPlaceholder);
	$input.data({
	'placeholder-textinput':$replacement,'placeholder-id':id}
).before($replacement);
}
$input = $input.removeAttr('id').hide().prev().attr('id',id).show();
	// Note:`$input[0] != input` now!}
$input.addClass('placeholder');
	$input[0].value = $input.attr('placeholder');
}
else{
	$input.removeClass('placeholder');
}
}
}
(this,document,jQuery));

附件:下载该文件资源,减少时间成本(增值服务)