فارم کسطرح خوبصورت بنائیں؟

آپ نے میرے بلاگ پر آراء کے خانے میں کچھ نئی چیزیں دیکھی ہونگی۔ مثلاً ہر خانے میں فیلڈ کی مناسبت سے آئیکن۔ اپنے بلاگ یا کسی بھی دوسری قسم کی سائٹ میں فارم خوبصورت بنانا نہایت آسان ہے۔ ضروری نہیں کہ صرف آئیکن لگا کر فارم کو خوبصورت بنایا جائے۔ متناسب چوڑائی لمبائی، رنگوں، ماؤس اوور کے ایفیکٹ وغیرہ سے بھی فارمز کو پُرکشش بنایا جاسکتاہے۔ سرِدست میں آپکو فارم کے خانوں میں آئیکن (دراصل پس منظر تصاویر Background Images) لگانے کا طریقہ بتاتا ہوں۔

اس عمل کو سرانجام دینے کیلیے ہمیں ایچ ٹی ایم ایل(یا ایکس ایچ ٹی ایم ایل) اور سی ایس ایس سے تھوڑی بہت چھیڑخانی کرنی ہوگی۔ سب سے پہلے تو آپ یہاں سے مفت میں ویب آئیکنز ڈاؤن لوڈ کرلیں۔ اب اپنی مطلوبہ ایچ ٹی ایم ایل فائل کھولیں۔(ورڈپریس کی صورت میں اپنی تھیم کی  پی ایچ پی فائلComments.php فائل کھولیں۔)۔ کوشش کریں کہpng کی بجائے gif استعمال کریں، کیونکہ شفاف png کو ہینڈل کرنے میں انٹرنیٹ ایکسپلورر7 سے نیچے کے تمام ورژن ماٹھے واقع ہوئے ہیں۔

یہاں آراء کے فارم پر آئیں۔ یہاں ہم یہ دیکھیں گے کہ نام، ای میل، ویب کا پتہ اور رائے کے خانے پر پہلے سے کوئی سی ایس ایس کی کلاس یا Div تو اپلائی نہیں کیا گیا۔اگر پہلے سے کوئی اپلائیڈ ہو تو ہمیں صرف اسمیں سی ایس ایس میں جا کر تبدیلیاں کرنی ہونگی، دوسری صورت میں ہمیں خود یہ کلاسز بنانی ہونگی۔ سادہ صورت میں(بغیر کسی کلاس، جاواسکرپٹ اور دوسری الابَلا کے) ان خانوں کو کوڈ کچھ اس طرح ہوگا: (نام کے خانے کا کوڈ)

<input type="text" name="author"  id="author" value="<?php echo $comment_author; ?>" tabindex="1" />

یہاں ہم نے اطمینان کر لیا کہ کوئی کلاس اس خانے پر اپلائی نہیں ہو رہی۔ سو ہم سی ایس ایس میں جا کر نام کے خانے کا سٹائل کنٹرول کرنے کیلیے کوڈ لکھیں گے۔ یہاں آپ اس خانے کی ID ضرور نوٹ کرلیں۔
سی ایس ایس میں آکر ہم نام کے خانے کیلیے کچھ اسطرح کوڈ لکھیں گے:
input#author { }

لیجیے اب ہم نام کے خانے کی سٹائلنگ کیلیے تیار ہیں۔یہاں یہ خیال رکھیں کہ اگر آپ نے صرف input لکھ کر سٹائلنگ شروع کی تو تمام صفحہ پر جہاں جہاں input کے خانے ہیں مثلاً تلاش کا خانہ، Submit کا بٹن، ای میل، ویب پیج کے خانے سب پر ایک ہی قسم کی فارمیٹنگ اپلائی ہو جائیگی۔ اسی لئے ہم نے input کے ساتھ ساتھ خانے کی آئی ڈی یعنی author بھی دی، تاکہ صرف ہمارے مطلوبہ خانےکی فارمیٹنگ ہو۔
اب آتے ہیں اس خانے میں آئیکن لگانے کیطرف۔ کوڈ کچھ اسطرح ہوگا:

input#author { background: url('images/user.gif') no-repeat
center right; padding-right: 20px; }

ہوتا یہ ہے کہ Background کی پراپرٹی میں ہم مطلوبہ آئیکن(یعنی تصویر) اور اسکی پوزیشن بتاتے ہیں۔ جبکہ Padding کے ذریعہ ہم خانے میں لکھے جانے والے ٹیکسٹ سے آئیکن کو فاصلہ دیتے ہیں تاکہ وہ اسکے اوپر نہ آئے۔ چونکہ میری تھیم اردو میں ہے اسلئے میں نے بیک گراؤنڈ تصویر کی پوزیشن Right رکھی اور پیڈنگ بھی تصویر کے دائیں رکھی ہے۔ Background کے بارے میں مزید آپ یہاں اور Padding کے بارے میں یہاں جان سکتے ہیں۔ ہمارے اس کام کا نتیجہ کچھ یوں ہوگا:

گو میں نے یہ ٹیوٹوریل زیادہ تفصیل سے نہیں لکھا لیکن سی ایس ایس کی تھوڑی شدبد رکھنے والے افراد باآسانی اسے استعمال کر سکتے ہیں۔ اگر آپ بالکل نئے ہیں سی ایس ایس کی دنیا میں، تو یہ سائٹ آپ کے لئے مفید رہیگی۔ سائٹ یہ بھی بُری نہیں۔