表单设计与滑动的标签（Labels），基于MooTools or jQuery

By Rainbow on // Demos & Downloads // 5890 Views+ // (2) Comments

对于表单的可用性设计，一直是Web设计人员研究的课题，如果你想了解更多关于Form Design的知识，我建议你看一下Yahoo的Luke Wroblewski 写的书《Web Form Design》,
人家是这方面的大牛，有许多的专题论文。

我们的设计灵感来自 Apple 重新设计的商品结帐表单。

apple_checkout_labels

我们实现的效果就是: input 的labels 水平滑动。这个想法是有利用户体验的：简洁的 , 实用的, 不唐突的,只需要很少的jQuery代码就可以实现。幸运的是此效果也不需要太多的MooTools代码也可以实现。

banner_slidinglabel

查看Demo

The HTNL Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<form action="" method="post" id="info"> 
	<h2>Contact Information</h2> 
    <div id="name-wrap" class="slider"> 
        <label for="name">Name</label> 
        <input type="text" id="name" name="name"> 
    </div><!--/#name-wrap--> 
 
    <div id="email-wrap"  class="slider"> 
        <label for="email">E&ndash;mail</label> 
        <input type="text" id="email" name="email"> 
    </div><!--/#email-wrap--> 
 
    <div id="street-wrap"  class="slider"> 
        <label for="st">Street</label> 
        <input type="text" id="st" name="st"> 
    </div><!--/#street-wrap--> 
 
    <div id="city-wrap"  class="slider"> 
        <label for="city">City &amp; State</label> 
        <input type="text" id="city" name="city"> 
    </div><!--/#city-wrap--> 
 
    <div id="zip-wrap"  class="slider"> 
        <label for="zip">Zip code</label> 
        <input type="text" id="zip" name="zip"> 
    </div><!--/#zip-wrap--> 
 
    <input type="submit" id="btn" name="btn" value="submit"> 
</form>

这是一个简单的表单，用DIV来包装 input 和 label,也要你会想起更多富有语义的表单设计，我们这里不做讨论。

1
2
3
4
5
6
7
8
9
10
11
12

/*The most important CSS snippet is the ensuring the spacing and position value for the slider DIV*/
div.slider { clear:both; position:relative; margin:0 0 10px; }
label { cursor:pointer; display:block; }
/*input*/
input[type="text"] { width:300px; border:1px solid #999; padding:5px; -moz-border-radius:4px; }
input[type="text"]:focus { border-color:#777; }
input[name="zip"] { width:150px; }
/* submit button */
input[type="submit"] { cursor:pointer; border:1px solid #999; padding:5px; -moz-border-radius:4px; background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus { border-color:#333; background:#ddd; }
input[type="submit"]:active{ margin-top:1px; }

The MooTools JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

//when the dom is ready...
window.addEvent('domready',function() {
	//a few settings
	var labelColor = '#999', restingPosition = 5;
	//for every form field
	$$('form#info .slider label').each(function(label){
		//set the label enhancements into place
		label.setStyles({
			color: labelColor,
			position: 'absolute',
			top: 6,
			left: restingPosition,
			display: 'inline',
			'z-index': 99
		});
		//get input value
		var input = label.getNext('input');
		//grab label width, add resting position value
		var width = label.getSize().x;
		var move = width + restingPosition;
		//onload, check if a field is filled out, if so, move the label out of the way
		if(input.get('value') !== '') {
			label.tween('left',0 - move);
		}
		// if the input is empty on focus move the label to the left
		// if it's empty on blur, move it back
		input.addEvents({
			focus: function() {
				if(input.get('value') == '') {
					label.tween('left',0 - move);
				}
				else {
					label.setStyle('left',0 - move);
				}
			},
			blur: function() {
				if(input.get('value') == ''){
					label.tween('left',restingPosition);
				}
			}
		});
	});
});

查看Demo

The jQuery Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

$(function(){
	$('form#info .slider label').each(function(){
		var labelColor = '#999';
		var restingPosition = '5px';
		// style the label with JS for progressive enhancement
		$(this).css({
				'color' : labelColor,
				 	'position' : 'absolute',
			 		'top' : '6px',
					'left' : restingPosition,
					'display' : 'inline',
		    	'z-index' : '99'
		});
 
		// grab the input value
		var inputval = $(this).next('input').val();
 
		// grab the label width, then add 5 pixels to it
		var labelwidth = $(this).width();
		var labelmove = labelwidth + 5;
 
		//onload, check if a field is filled out, if so, move the label out of the way
		if(inputval !== ''){
				$(this).stop().animate({ 'left':'-'+labelmove }, 1);
		}    	
 
		// if the input is empty on focus move the label to the left
		// if it's empty on blur, move it back
		$('input').focus(function(){
				var label = $(this).prev('label');
				var width = $(label).width();
				var adjust = width + 5;
				var value = $(this).val();
 
				if(value == ''){
					label.stop().animate({ 'left':'-'+adjust }, 'fast');
				} else {
					label.css({ 'left':'-'+adjust });
				}
		}).blur(function(){
				var label = $(this).prev('label');
				var value = $(this).val();
 
				if(value == ''){
					label.stop().animate({ 'left':restingPosition }, 'fast');
				}	
 
			});	    	
		});
});

查看Demo

实例来源：

非常感谢CSSKarma 提供的灵感，才会有如此好的Web表单设计。

原文来源一：Form Design with Sliding Labels

原文来源二：Sliding Labels Using MooTools

分享到： 更多

文章评论 已经有 2 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计