▲

ویب فارم کو فیلڈ سیٹ ایلی منٹ کی مدد سے منظم بنائیں

ایسا ویب فارم جس میں مختلف نوعیت کی معلومات کو مختلف گروپس میں تقسیم کرنا مقصود ہو تو اس کے لیے fieldset ایلی منٹ استعمال کیا جا سکتا ہے۔ یہ ایلی منٹ ایک باکس بنا دیتا ہے، جبکہ اس کے اندر legend ایلیمنٹ کی مدد سے اس باکس کا ٹائٹل مقرر کیا جاتا ہے۔ ویب فارم کو اس طریقے سے صحیح معنوں میں منظم اور خوبصورت بنانے کے لیے CSS کا استعمال ضروری ہے۔ اسٹائل رولز کی مدد سے fieldset بلاک کے بارڈر کی موٹائی و گولائی، بیک گراؤنڈ کا رنگ، اور اس کی پوزیشن وغیرہ مقرر کی جا سکتی ہے۔ اسی طرح legend ایلیمنٹ کو بھی اسٹائل رولز کی مدد سے بہتر انداز میں دکھایا جا سکتا ہے۔


درج ذیل اسکرین شاٹ میں دیکھا جا سکتا ہے کہ fieldset ایلیمنٹ نے فارم کی فیلڈز کے گرد ایک باکس بنا دیا ہے۔ جبکہ اس کے شروع میں موجود legend ایلیمنٹ کی عبارت اس باکس کے ٹائٹل کے طور پر نظر آرہی ہے۔

ایچ ٹی ایم ایل فیلڈ سیٹ ایلیمنٹ کا استعمال


آپ fieldset ایلیمنٹ اور legend ایلیمنٹ پر CSS اسٹائل رولز استعمال کر کے ویب فارم کو مزید خوبصورت اور منظم بنا سکتے ہیں، جیسا کہ درج ذیل اسکرین شاٹ میں دیکھا جا سکتا ہے۔

سی ایس ایس اسٹائل رولز کے ساتھ فیلڈ سیٹ ایلیمنٹ کی فارمیٹنگ


درج بالا ویب فارم کے لیے کوڈ درج ذیل ہے۔ ویب پیج کے head سیکشن میں style ایلی منٹ کے اندر:

  1. fieldset ایلیمنٹ کے لیے اسٹائل رولز لکھے گئے ہیں۔ اس میں float اسٹائل رول کی مدد سے ان بلاکس کو ساتھ ساتھ دکھایا گیا ہے، margin اسٹائل رول کی مدد سے باکس کے باہر دائیں اور نیچے 20 پکسلز فاصلہ مقرر کیا گیا ہے، padding رول کی مدد سے باکس کے بارڈر کے اندر 25 پکسلز فاصلہ سیٹ کیا گیا ہے، border-radius کی مدد سے باکس کے بارڈر کی گولائی بتائی گئی ہے۔
  2. پھر legend ایلیمنٹ کے لیے اسٹائل رولز بتائے گئے ہیں۔ اس میں لکھائی کا رنگ سفید جبکہ بیک گراؤنڈ کا رنگ گہرا رکھا گیا ہے۔ 

<!DOCTYPE html>
<html>
<head>
	<style>
		body {
			font-family:Arial;
			font-size:12px;
		}
		fieldset {
			float:left;
			margin:0 20px 20px 0;
			padding:25px;
			background-color:#DDD;
			border:1px solid #888;
			border-radius:15px;
		}
		legend {
			padding:0 10px 3px 10px;
			color:#FFF;
			background-color:#555;
			border-radius:5px;
		}
	</style>
</head>
 
<body>
	<br>
	<form>
		<fieldset>
			<legend>Personal Details</legend>
			Name<br>
			<input name="name" type="text"><br>
			<br>
			Email<br>
			<input name="email" type="text"><br>
			<br>
			Phone<br>
			<input name="phone" type="text"><br>
		</fieldset>
 
		<fieldset>
			<legend>Delivery Address</legend>
			Address<br>
			<input name="address" type="text"><br>
			<br>
			City<br>
			<input name="city" type="text"><br>
			<br>
			Province<br>
			<input name="province" type="text"><br>
			<br>
			Postal code<br>
			<input name="post_code" type="text"><br>
			<br>
			Country<br>
			<input name="country" type="text"><br>
		</fieldset>
		<fieldset>
			<legend>Credit Card Details</legend>
			<input name="credit_card" value="visa" type="radio"> Visa 
			<input name="credit_card" value="amex" type="radio"> AmEx 
			<input name="credit_card" value="mastercard" type="radio"> Mastercard<br>
			<br>
			Card number<br>
			<input name="card_number" type="text"><br>
			<br>
			Security code<br>
			<input name="security_code" type="text"><br>
			<br>
			Name on card<br>
			<input name="name_on_card" type="text"><br>
		</fieldset>
	</form>
</body>
</html>

Categories: 
HTML
Web Development
Created: Mon, 02/02/2015 - 18:01
Modified: Thu, 02/05/2015 - 15:27