Forms Styling & UX Polish

8. Practice Problems

Every problem has a Show Answer button. Try to solve it yourself first, then compare.

1. Write CSS that gives every text input a consistent padding, border, and border-radius.
   এমন CSS লিখুন যা প্রতিটি text input-কে একটি ধারাবাহিক padding, border, ও border-radius দেয়।
   ✨ Show Answer (উত্তর দেখুন)

   ans1.html

   <input type="text" placeholder="Your name">

   style.css

   input[type="text"] {
     padding: 0.6rem 0.8rem;
     border: 1px solid #d1d5db;
     border-radius: 8px;
     font-size: 0.95rem;
   }

   Run Copy
2. Add a :focus style to that same input that shows a green border and a soft glow, without removing the outline entirely.
   সেই একই input-এ একটি :focus স্টাইল যোগ করুন, যা একটি সবুজ border ও একটি হালকা glow দেখাবে, outline সম্পূর্ণ না সরিয়ে।
   ✨ Show Answer (উত্তর দেখুন)

   ans2.html

   <input type="text" placeholder="Click me and tab away">

   style.css

   input[type="text"] {
     padding: 0.6rem 0.8rem;
     border: 1px solid #d1d5db;
     border-radius: 8px;
   }
   input[type="text"]:focus {
     outline: none;
     border-color: #39b549;
     box-shadow: 0 0 0 3px rgba(57,181,73,0.2);
   }

   Run Copy
3. Explain why outline: none should never be used on a focus style without a replacement.
   ব্যাখ্যা করুন কেন outline: none কখনো একটি প্রতিস্থাপন ছাড়া focus স্টাইলে ব্যবহার করা উচিত নয়।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: The focus outline is the only visual signal keyboard users get to know which element is currently active. Removing it without a visible replacement (like a border or box-shadow) makes the page unusable for anyone navigating with Tab instead of a mouse.

   focus outline-ই একমাত্র ভিজ্যুয়াল সংকেত, যা কীবোর্ড ব্যবহারকারীদের জানায় কোন এলিমেন্ট বর্তমানে সক্রিয়। কোনো দৃশ্যমান প্রতিস্থাপন (যেমন border বা box-shadow) ছাড়া এটি সরিয়ে ফেললে, মাউসের বদলে Tab দিয়ে নেভিগেট করা যেকোনো ব্যবহারকারীর জন্য পেজটি ব্যবহারের অযোগ্য হয়ে যায়।

4. Build a runnable label + input pair using Flexbox column layout, matching the pattern from the contact-form demo.
   contact-form ডেমোর প্যাটার্ন অনুসরণ করে Flexbox column লেআউট ব্যবহার করে একটি চালু-করার-যোগ্য label + input জোড়া বানান।
   ✨ Show Answer (উত্তর দেখুন)

   ans4.html

   <div class="form-field">
     <label for="phone">Phone Number</label>
     <input type="text" id="phone" name="phone">
   </div>

   style.css

   .form-field {
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
   }
   .form-field label { font-weight: 600; }
   .form-field input {
     padding: 0.6rem 0.8rem;
     border: 1px solid #d1d5db;
     border-radius: 8px;
   }

   Run Copy
5. Explain the recommended approach for styling a checkbox without breaking keyboard accessibility.
   কীবোর্ড অ্যাক্সেসিবিলিটি না ভেঙে একটি checkbox স্টাইল করার প্রস্তাবিত পদ্ধতি ব্যাখ্যা করুন।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: Keep the real <input type="checkbox"> in the markup, hide it visually with opacity: 0 (never display: none), and style a sibling element or the label's ::before to show the checked/unchecked appearance.

   markup-এ আসল <input type="checkbox"> রেখে দিন, opacity: 0 দিয়ে এটি ভিজ্যুয়ালি লুকান (কখনো display: none নয়), এবং একটি sibling এলিমেন্ট বা label-এর ::before স্টাইল করে checked/unchecked চেহারা দেখান।

6. Write a short, specific error message for an email field that received "not-an-email" as input.
   একটি email ফিল্ডের জন্য একটি সংক্ষিপ্ত, নির্দিষ্ট error message লিখুন, যেখানে "not-an-email" ইনপুট দেওয়া হয়েছে।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: "Please enter a valid email address, like name@example.com" — specific, names the field, and shows the expected format, rather than a generic "Invalid input."

   "অনুগ্রহ করে একটি বৈধ ইমেইল ঠিকানা দিন, যেমন name@example.com" — নির্দিষ্ট, ফিল্ডের নাম বলে, এবং প্রত্যাশিত ফরম্যাট দেখায়, নিছক "Invalid input"-এর বদলে।

7. Why should error messages rely on more than just red color to communicate a problem?
   error message কেন শুধু লাল রঙের ওপর নির্ভর না করে সমস্যা জানানো উচিত?
   ✨ Show Answer (উত্তর দেখুন)

   Answer: Colorblind users may not reliably distinguish red from other colors. Pairing color with text and/or an icon ensures the message is understood by everyone, not just users with typical color vision.

   রঙ-অন্ধ ব্যবহারকারীরা লালকে অন্য রঙ থেকে নির্ভরযোগ্যভাবে আলাদা করতে নাও পারেন। রঙের সাথে টেক্সট এবং/অথবা আইকন যুক্ত করলে বার্তাটি সবাই বুঝতে পারে, শুধু সাধারণ রঙ-দৃষ্টিসম্পন্ন ব্যবহারকারীরাই নয়।

8. Build a runnable two-column form row (first name, last name) using CSS Grid that collapses to one column under 480px.
   CSS Grid ব্যবহার করে একটি চালু-করার-যোগ্য দুই-কলাম form row (first name, last name) বানান, যা 480px-এর নিচে এক কলামে পরিণত হবে।
   ✨ Show Answer (উত্তর দেখুন)

   ans7.html

   <div class="form-row">
     <input type="text" placeholder="First name">
     <input type="text" placeholder="Last name">
   </div>

   style.css

   .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
   .form-row input {
     padding: 0.6rem 0.8rem;
     border: 1px solid #d1d5db;
     border-radius: 8px;
   }
   @media (max-width: 480px) {
     .form-row { grid-template-columns: 1fr; }
   }

   Run Copy
9. A teammate set font-size: 12px only on inputs but left the rest of the site at 16px. Explain why this looks inconsistent and how to fix it.
   একজন সহকর্মী শুধু input-এ font-size: 12px সেট করেছেন, বাকি সাইট 16px-এই রয়ে গেছে। এটি কেন অসামঞ্জস্যপূর্ণ দেখায় এবং কীভাবে ঠিক করবেন তা ব্যাখ্যা করুন।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: Text typed into a noticeably smaller input than the surrounding paragraph text looks like a rendering error rather than a design choice. Fix it by setting the input's font-size to match the body text, e.g. font-size: 1rem; or the same value used for p.

   চারপাশের প্যারাগ্রাফ টেক্সটের চেয়ে লক্ষণীয়ভাবে ছোট একটি input-এ টাইপ করা টেক্সট ডিজাইনের সিদ্ধান্তের বদলে রেন্ডারিং ত্রুটির মতো দেখায়। input-এর font-size-কে body টেক্সটের সাথে মিলিয়ে দিন, যেমন font-size: 1rem; বা p-তে ব্যবহৃত একই ভ্যালু।

10. Explain in one or two sentences why a success message should be calmer (e.g. green, brief) than an error message.
    এক বা দুই বাক্যে ব্যাখ্যা করুন কেন একটি success message একটি error message-এর তুলনায় শান্ত হওয়া উচিত (যেমন সবুজ, সংক্ষিপ্ত)।
    ✨ Show Answer (উত্তর দেখুন)

    Answer: A success message confirms something went right, so it should reassure without demanding urgent attention — a loud, alarming style would feel mismatched to good news and could even make users second-guess whether something actually worked.

    একটি success message নিশ্চিত করে যে কিছু ঠিকভাবে হয়েছে, তাই এটি জরুরি মনোযোগ না দাবি করে আশ্বস্ত করা উচিত — একটি জোরালো, সতর্কতাসূচক স্টাইল ভালো খবরের সাথে বেমানান লাগবে এবং ব্যবহারকারীদের সন্দেহে ফেলতে পারে সত্যিই কিছু কাজ করেছে কিনা।

11. List three CSS properties this lesson recommends normalizing across all form controls for a consistent look.
    এই লেসন অনুযায়ী, সব form control জুড়ে সামঞ্জস্যপূর্ণ চেহারার জন্য কোন তিনটি CSS প্রপার্টি স্বাভাবিক করার পরামর্শ দেওয়া হয়েছে, তা তালিকা করুন।
    ✨ Show Answer (উত্তর দেখুন)

    Answer: Any three of: padding, border/border-radius, font-family/font-size, and appearance (to remove native OS styling from selects/checkboxes).

    যেকোনো তিনটি: padding, border/border-radius, font-family/font-size, এবং appearance (select/checkbox থেকে native OS স্টাইলিং সরাতে)।

12. Explain why using CSS Grid for a two-field row (like first/last name) is a good fit, while a full multi-section page layout might need Flexbox or Grid combined with more planning.
    first/last name-এর মতো দুই-ফিল্ডের row-এর জন্য কেন CSS Grid একটি ভালো পছন্দ, অথচ একটি সম্পূর্ণ multi-section পেজ লেআউটের জন্য Flexbox বা Grid-এর সাথে আরও পরিকল্পনার প্রয়োজন হতে পারে তা ব্যাখ্যা করুন।
    ✨ Show Answer (উত্তর দেখুন)

    Answer: A two-field row is a simple, fixed two-dimensional problem — exactly what Grid's column tracks solve cleanly with one media query. A whole page has many independent sections (header, hero, form, footer) that each may need different internal layouts, so it typically combines Flexbox for simple one-directional pieces and Grid for two-dimensional sections, planned section by section.

    দুই-ফিল্ডের row একটি সহজ, নির্দিষ্ট দ্বি-মাত্রিক সমস্যা — ঠিক যা Grid-এর column track একটি মিডিয়া কোয়েরি দিয়ে পরিষ্কারভাবে সমাধান করে। একটি সম্পূর্ণ পেজে অনেকগুলো স্বাধীন সেকশন থাকে (header, hero, form, footer), যাদের প্রতিটির ভিন্ন অভ্যন্তরীণ লেআউট প্রয়োজন হতে পারে, তাই সাধারণত সহজ এক-দিকের অংশের জন্য Flexbox এবং দ্বি-মাত্রিক সেকশনের জন্য Grid একসাথে ব্যবহৃত হয়, সেকশন অনুযায়ী পরিকল্পনা করে।