jQuery ile İletişim Formunuza Esneklik Katın

closeBu yazı 1 ay 16 gün önce yayınlanmış olduğundan güncelliğini yitirmiş veya içeriğindeki bilgilerin geçerliliği kaybolmuş olabilir. Herhangi bir yanlış anlaşılmadan bu blog sorumlu değildir.

Bu tür ipucu yazıları serisine bir haylı sardım bu aralar. Hem kendim öğreniyorum hem de doğru düzgün içerik girmiş oluyorum bloga. Neyse, bu yazıda ufak bir jQuery betiği ile iletişim formlarınıza oldukça güzel görünüm katacak bir kaydırma efektinden bahsedeceğim.

Öncelikle, sırasıyla HTML, CSS ve jQuery kodlarını vereceğim ve son olarak da bir demo sayfası hazırladım, daha doğrusu hazır olan demo sayfasını da türkçeleştirdim, dilerseniz kodlara oradan da ulaşabilirsiniz.

İlk önce HTML kısmını hazırlayalım, yani iletişim formu için istediğimiz bilgileri girelim:

<form action="" method="post" id="info">
	<h2>İletişim Bilgileri</h2>
    <div id="name-wrap" class="slider">
        <label for="name">İsim</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">Konu</label>
 
        <input type="text" id="st" name="st">
    </div><!--/#street-wrap-->
 
    <div id="city-wrap"  class="slider">
        <label for="city">Telefon</label>
        <input type="text" id="city" name="city">
    </div><!--/#city-wrap-->
 
    <input type="submit" id="btn" name="btn" value="Gönder">

Daha sonra da HTML sayfamızın içerisine Stil (CSS) özelliklerini girelim:

<style type="text/css">
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; }
</style>

For artık şekillendi, geriye jQuery ile onu süslemek kalıyor. Aşağıdaki jQuery betiğini de .js uzantılı bir dosya şeklinde kaydedip HTML sayfamızda etiketinin içerisine ekleyince işlem tamamlanıyor.

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

Artık formumuzdaki kaydırma efekti aktif oldu. Son olarak da aşağıdaki kodu HTML sayfamızın etiketinin içerisine ilave ederek jQuery efektini kullanabilir hale geliyoruz, ki efektin çalışması için kesinlikle gereklidir.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="slidinglabels.js"></script>

Anlatım karışık geldiyse diye bir de demo sayfasını Türkçeleştirdim. Dilerseniz kaynak kodlarını da birebir alabilir ve değiştirebilirsiniz.

(k: CSSKarma)

NOT: Yazı FriendFeed’e düştükten sonra, Eren Emre Kanal’ın uyarısına göre, bu efekt “textbox” dışındaki form elementlerinde sorunluymuş. Yani efekti kullanırken form elementini textbox olarak kullanın. (Textbox)

Yazıyı Paylaşın:  

Bu yazıya, 2 yorum yapılmış:

yavuz - 07 Mart 2010

Çok güzel olmuş eline sağlık. Fakat text modu multi line olunca çalışmıyor.

Müjdat Korkmaz - 07 Mart 2010

@yavuz; Yazının sonunda da belirttiğim gibi bu efekt “textbox” dışındaki form elementlerinde sorunluymuş. Bilseydim yazıyı yazmazdım aslında. Denemeden yayınladım. Sonra da Eren Emre’nin uyarısını dikkate alarak not ekledim yazıya. (:

Siz de yorum yapın: