CSS Forms

किसी bank teller counter तक चलकर जाने की कल्पना करें। अगर वहाँ कोई pens, साफ़ dividers, या designated spaces नहीं हैं, तो counter cluttered दिखेगा। आप चाहते हैं साफ़-सुथरे clipboards designated boxes, labels, और highlighted action zones के साथ ताकि आप अपने tasks साफ़ तरीके से पूरे कर सकें। CSS forms वही prioritized clipboards हैं। ये raw, clunky browser inputs को friendly, visually engaging, और accessible fields में style करते हैं जो data submit करना आसान बना देते हैं।

In this page:

Text Input Boxes को Style करना
Accessible Active Focus Indicators
Checkbox और Radio Alignments
select Dropdown Boxes को Customize करना
Form Action Submit Buttons को Style करना

Syntax

css

input, select, textarea {
  width: 100%;
  padding: length;
  border: width style color;
}
input:focus {
  outline: none;
}

Text Input Boxes को Style करना

Default रूप से, browsers form inputs को rigid, outdated borders के साथ render करते हैं। आप इन inputs को CSS properties इस्तेमाल करके आसानी से customize कर सकते हैं ताकि उनकी borders, inner padding, background colors, और typography styles adjust हो सकें।

Note: text enter करना comfortable और readable बनाने के लिए अपने input fields में generous internal padding जोड़ें।

Warning: अपने text input fields पर explicit widths set न करना उन्हें छोटे screen sizes पर overflow करा सकता है।

उदाहरण: Styling Text Input Boxes

css

<style>
input[type="text"] {
  border: 1px solid #ccc;
  padding: 8px;
  font-family: sans-serif;
}
</style>
<input type="text" placeholder="Your name">

Accessible Active Focus Indicators

जब users आपके form में tab करते हैं या किसी input को click करते हैं, तो element एक 'active focus' state में चला जाता है। आप :focus pseudo-class इस्तेमाल करके इस state की styling customize कर सकते हैं ताकि active inputs साफ़ तरीके से उभरें।

Note: अपने focus indicators को साफ़ तरीके से style करने के लिए एक subtle border-color transition और एक soft box-shadow glow इस्तेमाल करें।

Warning: browser focus outlines को custom focus styles से replace किए बिना उन्हें hide करने के लिए कभी भी CSS outline: none इस्तेमाल न करें।

उदाहरण: Accessible Active Focus Indicators

css

<style>
input:focus {
  border-color: blue;
  box-shadow: 0 0 4px blue;
}
</style>
<input type="text">

Checkbox और Radio Alignments

Default रूप से, browsers checkboxes और radio buttons को उनके text labels से थोड़ा misaligned render करते हैं। आप उन्हें perfectly align करने के लिए उनके parent wrappers पर Flexbox alignment properties इस्तेमाल कर सकते हैं।

Note: selectors और text labels को साफ़ तरीके से साथ-साथ align करने के लिए vertical-align: middle या display: flex इस्तेमाल करें।

Warning: native checkboxes पर सीधे complex custom padding set करने से बचें, क्योंकि browsers इसे नज़रअंदाज़ करते हैं।

उदाहरण: Checkbox and Radio Alignments

css

<style>
label {
  display: flex;
  align-items: center;
  gap: 6px;
}
</style>
<label><input type="checkbox"> Subscribe</label>

select Dropdown Boxes को Customize करना

Native select dropdown menus अलग-अलग devices में blocky और inconsistent दिख सकते हैं। आप browser default designs हटाने के लिए CSS properties (जैसे appearance: none) इस्तेमाल करके उन्हें customize कर सकते हैं, अपनी खुद की custom borders, padding, और arrow icons जोड़ते हुए।

Note: अपने dropdowns में एक साफ़, custom disclosure arrow icon जोड़ने के लिए background-image properties इस्तेमाल करें।

Warning: सुनिश्चित करें कि आपके custom dropdown arrows safely positioned हैं ताकि वे आपके text के साथ overlap न हों।

उदाहरण: Customizing select Dropdown Boxes

css

<style>
select {
  appearance: none;
  border: 1px solid #ccc;
  padding: 8px;
}
</style>
<select><option>Choice A</option></select>

Form Action Submit Buttons को Style करना

form submit button आपके page पर final call-to-action है। इसे high-contrast colors, custom borders, और smooth hover animations से style करके, आप data submit करना intuitive और visually engaging बना सकते हैं।

Note: buttons को pressed या clicked दिखाने के लिए active pseudo-class इस्तेमाल करें।

Warning: सुनिश्चित करें कि आपके submit buttons पर hover करने पर एक defined mouse cursor pointer style हो।

उदाहरण: Styling Form Action Submit Buttons

css

<style>
button[type="submit"] {
  background: royalblue;
  color: white;
  border: none;
  padding: 10px 20px;
}
button[type="submit"]:active {
  background: darkblue;
}
</style>
<button type="submit">Submit</button>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Attribute Selectors Next Lesson → CSS Counters