AJAX-CSS FORM

Posted Şubat 6th, 2010. Filed under Ajax CSS Uygulamalar

Ajax
Web sitelerimizde yer alan kullanıcı kayıt, login veya adres gibi formlarımızın tasarımları , efektleri, sitemiz ile uyumu, kullanış açısından rahatlığı bizimbir artımızdır. Bu örneğimizde css ve jquery ile derlenmiş bir form tasarımı örneği yapacağız.

CSS Kodlarımız;

<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>

HTML form kodlarımız

<form action="" method="post" id="info">
 <h2>İletişim Formu</h2>
 <div id="name-wrap">
 <label for="name">İsim</label>
 <input type="text" id="name" name="name">
 </div><!--/#name-wrap-->
	
 <div id="email-wrap" >
 <label for="email">E-Posta</label>
 <input type="text" id="email" name="email">
 </div><!--/#email-wrap-->
	
 <div id="street-wrap" >
 <label for="st">Adres</label>
 <input type="text" id="st" name="st">
 </div><!--/#street-wrap-->
	
 <div id="city-wrap" >
 <label for="city">Şehir - Semt</label>
 <input type="text" id="city" name="city">
 </div><!--/#city-wrap-->
	
 <div id="zip-wrap" >
 <label for="zip">Posta Kodu</label>
 <input type="text" id="zip" name="zip">
 </div><!--/#zip-wrap-->
	
 <input type="submit" id="btn" name="btn" value="Gönder">
</form>

En son olarakda formda yer alan inputlar aktif edildiğinde (tıklanıldığında) hangi harekette bulunacaklarını sağlayan kodumuza geçiyoruz. İlk olarak jquery kütüpanemizi sayfamıza dahil ediyoruz ve ardından javascript kodlarımız yazıyoruz.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(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');
 }
 });
})
});
</script>

Formumuzun yer aldıgı html sayfa kodlarımız

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Gumusluoglu.com CSS From Örneği</title>
<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>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(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');
 }
 });
})
});
</script>
</head>
<body>
<form action="" method="post" id="info">
 <h2>İletişim Formu</h2>
 <div id="name-wrap">
 <label for="name">İsim</label>
 <input type="text" id="name" name="name">
 </div><!--/#name-wrap-->
	
 <div id="email-wrap" >
 <label for="email">E-Posta</label>
 <input type="text" id="email" name="email">
 </div><!--/#email-wrap-->
	
 <div id="street-wrap" >
 <label for="st">Adres</label>
 <input type="text" id="st" name="st">
 </div><!--/#street-wrap-->
	
 <div id="city-wrap" >
 <label for="city">Şehir - Semt</label>
 <input type="text" id="city" name="city">
 </div><!--/#city-wrap-->
	
 <div id="zip-wrap" >
 <label for="zip">Posta Kodu</label>
 <input type="text" id="zip" name="zip">
 </div><!--/#zip-wrap-->
	
 <input type="submit" id="btn" name="btn" value="Gönder">
</form>
</body>
</html>

Etiketler:

CSS, css form, Css From Örneği, dhtml, form, html form, jQuery