Űrlap design sliding labelekkel

Űrlap design sliding labelekkel

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:

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

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, illetve a demot ezen a címen: demo

Címkék: , , , , ,

Egy hozzászólás “Űrlap design sliding labelekkel” bejegyzésre

  1. codee47 codee47 szerint:

    Köszi a tippet!

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

Itt lehet hozzászólni !