CSS फॉर्म
5 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
फॉर्म वह तरीका है जिससे visitor वेबसाइट को जानकारी भेजता है — नाम, email पता, course की पसंद, संदेश। सादा HTML फॉर्म काम तो करता है, लेकिन वह फीका और तंग दिखता है: पतले grey box, छोटे अक्षर, और एक button जो 1990 के दशक का लगता है। CSS उसी फॉर्म को साफ, आरामदायक और भरने में आसान बना देता है।
फॉर्म को सजाना ज़्यादातर तीन बातों के बारे में है: जगह (हर field के अंदर padding ताकि अक्षर साँस ले सकें), किनारा (साफ border ताकि visitor देख सके कि कहाँ टाइप करना है), और प्रतिक्रिया (field में click करते ही वह बदल जाता है, ताकि हमेशा पता रहे कि आप कहाँ हैं)।
Input field को style करना
हर text field, email field और text area को किसी भी box की तरह style किया जा सकता है। सबसे काम की properties हैं width, padding, border, border-radius और font-size। width: 100% लगाने से field अपने container को भरकर फैल जाता है, जो ज़्यादातर असली फॉर्म करते हैं। थोड़ा सा border-radius कोने गोल कर देता है और फॉर्म तुरंत आधुनिक लगने लगता है।
Syntax — एक सजा हुआ text field
input[type="text"] {
width: 100%;
padding: 12px;
border: 2px solid #ccc;
border-radius: 6px;
font-size: 16px;
}
Selector input[type="text"] सिर्फ text fields को चुनता है, इसलिए checkbox या submit button पर इसका असर नहीं पड़ता। आप input[type="email"], select और textarea के लिए ऐसे ही नियम लिख सकते हैं — या commas से उन्हें एक ही नियम में जोड़ सकते हैं।
Focus state — दिखाएँ कि आप कहाँ टाइप कर रहे हैं
जब visitor किसी field में click करता है, तो browser उसे focus देता है। :focus स्यूडो-क्लास से आप उस पल को style कर सकते हैं। एक आम तरकीब है border का रंग बदलना और box-shadow से हल्की चमक जोड़ना। इसमें CSS की सिर्फ दो लाइन लगती हैं और फॉर्म ज़िंदा लगने लगता है।
input[type="text"]:focus {
border-color: #04aa6d;
outline: none;
box-shadow: 0 0 5px #04aa6d;
}
outline हटाते हैं, तो उसकी जगह हमेशा कुछ दिखने वाला रखें, जैसे रंगीन border या चमक। Keyboard से चलने वाले लोग उसी highlight से समझते हैं कि वे किस field पर हैं — बिना किसी focus निशान वाला फॉर्म उनके लिए इस्तेमाल करना मुश्किल हो जाता है।Placeholder text — खाली field का संकेत
placeholder attribute खाली field के अंदर हल्का सा संकेत दिखाता है, जैसे "Your full name"। आप उस संकेत को ::placeholder स्यूडो-एलिमेंट से style कर सकते हैं — आमतौर पर हल्का grey रंग, ताकि वह असली टाइप किए हुए text से साफ अलग दिखे।
::placeholder {
color: #999;
}
Label और Button
label अपने field के ऊपर, bold में होना चाहिए, ताकि visitor फॉर्म को जल्दी से देखकर समझ सके। Submit button पर सबसे ज़्यादा ध्यान दें: उसे मज़बूत background रंग, सफेद text, भरपूर padding और cursor: pointer दें, ताकि hover पर हाथ वाला cursor दिखे। Hover पर रंग बदलना visitor को बताता है कि button click करने के लिए तैयार है।
box-sizing: border-box जोड़ें। इसके बिना width: 100% और padding मिलकर field को container से चौड़ा कर देते हैं और वह बाहर निकल जाता है। इसके साथ padding चौड़ाई के अंदर गिनी जाती है और सब कुछ साफ-सुथरा बैठ जाता है।आम गलतियाँ
box-sizing: border-boxभूल जाना —width: 100%और padding वाले fields फॉर्म से बाहर निकल जाते हैं।:focusपरoutlineहटाना और उसकी जगह कुछ न देना — keyboard से चलने वाले लोग देख ही नहीं पाते कि वे कहाँ हैं।- Placeholder को ही एकमात्र label मान लेना — visitor के टाइप करते ही संकेत गायब हो जाता है और वह भूल जाता है कि field किस लिए था।
- Button को बहुत छोटा या background के ही रंग का बनाना — visitor को submit button एक नज़र में दिखना चाहिए।
- Inputs पर बहुत छोटा
font-sizeरखना — phone पर 16px से छोटा font होने पर field पर tap करते ही browser zoom कर देता है।
याद रखें
- Inputs को
width,padding,borderऔरborder-radiusसे style करें। - जिस field में visitor टाइप कर रहा है, उसे highlight करने के लिए
:focusइस्तेमाल करें। - Placeholder के संकेतों को
::placeholderसे हल्के grey रंग में style करें। - हर field के ऊपर label दिखता रहे — placeholder एक संकेत है, label नहीं।
box-sizing: border-boxpadding वाले fields को container के अंदर रखता है।
याद रखने की तरकीब: जगह, किनारा, इशारा — padding अंदर, border साफ़, focus पर चमक।
उदाहरण समझिए
box-sizing: border-boxहर element पर — padding और border हर element की चौड़ाई के अंदर गिने जाते हैं, इसलिए form के fields कभी अपने box से बाहर नहीं निकलते।input[type="text"], input[type="email"], select, textarea— एक ही जोड़ा हुआ नियम हर field को एक जैसा style करता है: पूरी चौड़ाई, 12px padding, हल्का grey border और गोल कोने।input:focus, select:focus, textarea:focus— visitor के किसी field में click करते ही उसका border हरा हो जाता है और हल्की चमक दिखती है, ताकि साफ पता चले कि वे कहाँ टाइप कर रहे हैं।::placeholder— खाली fields के अंदर grey संकेत वाला text, जैसे "Your full name", असली टाइप किए हुए text से हल्के रंग में दिखता है।input[type="submit"]— button सफेद text के साथ हरा है और उसमें चौड़ी padding है;:hoverपर वह और गहरा हरा हो जाता है, ताकि visitor समझे कि उस पर click किया जा सकता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Admission Form</title>
<style>
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 20px; }
form { background-color: white; max-width: 500px; margin: auto; padding: 25px; border-radius: 10px; }
h2 { color: #04aa6d; text-align: center; }
label { display: block; font-weight: bold; margin-top: 15px; margin-bottom: 5px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
width: 100%;
padding: 12px;
border: 2px solid #ccc;
border-radius: 6px;
font-size: 16px;
}
input:focus, select:focus, textarea:focus {
border-color: #04aa6d;
outline: none;
box-shadow: 0 0 5px #04aa6d;
}
::placeholder { color: #999; }
textarea { height: 100px; }
input[type="submit"] {
width: 100%;
background-color: #04aa6d;
color: white;
padding: 14px;
margin-top: 20px;
border: none;
border-radius: 6px;
font-size: 18px;
cursor: pointer;
}
input[type="submit"]:hover { background-color: #038857; }
</style>
</head>
<body>
<form>
<h2>Join KAMALDNP Summer Training</h2>
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Your full name">
<label for="email">Email</label>
<input type="email" id="email" placeholder="you@example.com">
<label for="phone">Mobile Number</label>
<input type="tel" id="phone" placeholder="10-digit mobile number">
<label for="course">Choose a Course</label>
<select id="course">
<option>HTML and CSS</option>
<option>Python</option>
<option>Java</option>
<option>Web Development</option>
</select>
<label for="msg">Why do you want to join?</label>
<textarea id="msg" placeholder="Write two lines about your goal"></textarea>
<input type="submit" value="Submit Application">
</form>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 30 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
