FORM DESIGNING KYA HOTA HAI – फॉर्म डिजाइनिंग कैसे करते है ?

हेल्लो दोस्तों आज के इस पोस्ट में हम आपको सिंपल html और css के द्वारा फॉर्म को डिजाईन करना बताया जायेगा की किस प्रकार से हम एक फॉर्म को बनाया जा सकता है और उसकी डिजाइनिंग भी की जा सकती है तो चाहिए शुरू करते है

form designing

फॉर्म को डिजाईन करने के लिए आप आपको css की जानकारी तो हो ही चाहिए अगर css आपको न पता हो की क्या होता है कैसे इसे प्रयोग करते है तो आप निचे दिए गए link पर क्लिक करके वहा से आप पढ़ सकते है यहाँ हम चाहते है की आप केवल प्रोजेक्ट पर ही काम करे

हम आपको एक html और css का कोड दिया जा रहा  है जिसमे हम html के कोड को एक तरह और css के कोड को एक तरफ रखा गया है

html कोड –

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="20oct.css">
</head>
<body>
<div id="outer">
	<div id="inner">
		<h1>ENQUIRY <b >FORM..</b></h1>
		<div id="enquiry">
			Name<br/><input class="t" type="text" name="" placeholder="Enter Your Name" /><br/>
			Email<br><input class="t" type="email" name="" placeholder="Enter Your Email" /><br/>
			Mobile<br><input class="t" type="number" name="" placeholder="Number"/><br/>
			Message<br/><textarea class="ta" placeholder="message"></textarea><br/>
			<input type="button" class="btn" name="" value="submit" />

		</div>
	</div>
</div>
</body>
</html>

css कोड –

<style>
		#outer
		{
			height:750px;
			background: url(121.jpg);
			background-repeat: no-repeat;
			background-size: cover;
			/*background-attachment: fixed;*/
		}
		#inner
		{
			height: 750px;
			background: rgba(255, 255, 255, .4);
			color: black;
			padding-top: 90px;
			width: 100%;
		}
		#inner h1
		{
			text-align: center;
			font-family: cooper;
		}
		#enquiry
		{
			min-height: 300px;
			background: white;
			width: 500px;
			margin: 25px auto;
			box-shadow: 0px 0px 10px black;
			border-radius: 5px;
			color: black;
			padding: 30px;
			box-sizing: border-box;
			transition:al linear 1s;

		}
		.t
		{
			height: 35px;
			width: 100%;
			margin-bottom: 15px;
			padding: 0px 10px;
			box-sizing: border-box;
			background: transparent;

		}
		.ta
		{
			height: 70px;
			width: 100%;
			margin-bottom: 15px;
			background: transparent;
		}
		::placeholder
		{
			color: black;
			font-size: 14px;
		}
		.btn:hover
		{
			background: orange;
			transition: all ease-in 4s;
		}
		.btn
		{
			height: 40px;
			width: 100%;
			border: none;
			background: #aeea00;
		}
		#enquiry:hover
		{
			transform: scale(1.1);
			background:radial-gradient(circle at top,rgba(216,27,96,1),rgba(255,255,255,1));
			color: white;
			transition: all ease 1s;
		}
	</style>

इन दोनों के कोड को आप दो फाइल बनाये एक फाइल का extension .css होगा और एक फाइल का नाम आपका .html होगा इन दोनों फाइल को आप एक साथ ही रखे और html में डिफाइन link tag के अंदर आप जो भी css के फाइल का नाम आप डिफाइन करते है उसे आप html के link tag के अंदर डिफाइन किया जायेया

हम आपको एक उदहारण के द्वारा भी समझा देते है

मान लीजिये की मेरे css के फाइल का name अगर demo.css दिया गया है तो हम html के कोड में link tag के अंदर इस प्रकार से link करेंगे

<link href=”demo.css” type=”stylesheet” />

यह आपको होगा,

अब हम अपने html के कोड को रन कराये ब्राउज़र पर अगर आपका html के कोड में अप्लाई हुआ है या नहीं इसे चेक करने के लिए आप ctrl+u बटन का प्रयोग जरुर करे जिससे एक और tabs ओपन होगा और दिखायेगा की link है या नहीं आप उस link पर क्लिक करके भी चेक कर ले की css का कोड उसमे है या नहीं

Leave a Reply

Your email address will not be published.