Űrlap design sliding labelekkel

Form Design with Sliding Labels

A héten egy nagyon tetszetős megoldásra találtam a CSSKarma oldalán. A JQuery javascript függvénytár és a CSS kombinációjával az űrlapok címeit egyszerűen csúsztathatjuk az input mezőben. Lássuk hogy is történik ez.

Majdnem minden weboldalon használunk formokat. Az elérhetőségnél üzenetküldéshez, belépéshez a weboldalra, de például egy webáruháznál elengedhetetlen a regisztrációs vagy megrendelési oldalakon. Nézzük ezt a megoldást, amikor a label az input mezőbe van írva, de kattintásra kicsúszik a mezőn kívülre.

1. Első lépésben hozzunk létre egy egyszerű űrlapot néhány input mezővel és elküld gombbal:

Contact Information

2. Csináljuk meg a formázást CSS segítségével:

body {
font:12px/1.3 Arial, Sans-serif;
}
form {
width:380px;
padding:0 90px 20px;
margin:auto;
background:#f7f7f7;
border:1px solid #ddd;
}
div {
clear:both;
position:relative;
margin:0 0 10px;
}
label {
cursor:pointer;
display:block;
}
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;
}

3. Végül következzen a JQuery, ami életre kelti az űrlapunkat:

$(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');
		}
	});
})
});

Az eredeti cikket megtalálhatjátok a CSSKarma honlapján a következő címen: Sliding labels

Egy hozzászólás Űrlap design sliding labelekkel

  • codee47  írta:

    Köszi a tippet!

    Nemrég én is találkoztam vele és örülök, hogy most magyarul is olvashatok róla.

Szólj hozzá!

A következő html tagek használata engedélyezett: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>