Ajax:CSS:HTML: İletişim Formu

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>

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir