表单设计与滑动的标签(Labels),基于MooTools or jQuery
对于表单的可用性设计,一直是Web设计人员研究的课题,如果你想了解更多关于Form Design的知识,我建议你看一下Yahoo的Luke Wroblewski 写的书《Web Form Design》,
人家是这方面的大牛,有许多的专题论文。
我们的设计灵感来自 Apple 重新设计的商品结帐表单。
我们实现的效果就是: input 的labels 水平滑动。这个想法是有利用户体验的:简洁的 , 实用的, 不唐突的,只需要很少的jQuery代码就可以实现。幸运的是此效果也不需要太多的MooTools代码也可以实现。
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–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 & 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); } } }); }); }); |
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'); } }); }); }); |
实例来源:
非常感谢CSSKarma 提供的灵感,才会有如此好的Web表单设计。
很不错的表单
效果很赞!