[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t5-s04-forms-styling":3,"course:taropood":56},{"meta":4,"prev":11,"next":15,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,4,"t5-s04-forms-styling","book",5,"فصل ۰۴ — استایل فرم",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},3,"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":9,"slug":16,"source":8,"term":9,"title_fa":17},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",[19,23,26,31,34,37,40,43,46,49,53],{"kind":20,"heading":21,"html":22},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فرم‌ها را در ترم ۱ ساختی، ولی هیچ‌وقت استایلشان ندادی — و فرم‌های خام و پیش‌فرض، زشت و ناهماهنگ‌اند. آخر این فصل یک فرمِ تماسِ تر و تمیز داری: کادرهای متن و منوی کشویی و جعبهٔ پیام همه یک شکل و یک فونت‌اند، ردیفی که داری تویش تایپ می‌کنی روشن می‌شود تا بدانی کجایی، فیلدِ غیرفعال خاموش دیده می‌شود، و حتی رنگِ checkbox هم به رنگِ سایت درآمده.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-styled-form.fcf5da1736.160.webp 160w, \u002F_img\u002F01-image-styled-form.fcf5da1736.320.webp 320w, \u002F_img\u002F01-image-styled-form.fcf5da1736.640.webp 640w, \u002F_img\u002F01-image-styled-form.fcf5da1736.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-styled-form.fcf5da1736.1280.jpg\" srcset=\"\u002F_img\u002F01-image-styled-form.fcf5da1736.160.jpg 160w, \u002F_img\u002F01-image-styled-form.fcf5da1736.320.jpg 320w, \u002F_img\u002F01-image-styled-form.fcf5da1736.640.jpg 640w, \u002F_img\u002F01-image-styled-form.fcf5da1736.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک فرمِ تماسِ استایل‌خورده با چند کادرِ ورودیِ هم‌شکل، یک منوی کشویی، یک جعبهٔ پیامِ بزرگ‌تر، یک checkbox رنگی و یک دکمهٔ ارسال؛ یکی از ردیف‌ها با یک هالهٔ ملایم روشن شده تا نشان دهد الان focus داخلش است\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode><input>\u003C\u002Fcode>، \u003Ccode><select>\u003C\u002Fcode>، \u003Ccode><textarea>\u003C\u002Fcode> و \u003Ccode><button>\u003C\u002Fcode> را یک‌دست استایل بدهی\u003C\u002Fli>\n\u003Cli>با selector صفتی مثلِ \u003Ccode>[type="email"]\u003C\u002Fcode> و \u003Ccode>[disabled]\u003C\u002Fcode> عنصرها را با صفتشان هدف بگیری\u003C\u002Fli>\n\u003Cli>با \u003Ccode>:focus-within\u003C\u002Fcode> کلِ ردیفِ فعال را روشن کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>accent-color\u003C\u002Fcode> رنگِ یک checkbox را عوض کنی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":20,"heading":24,"html":25},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از ترم ۱:\u003C\u002Fstrong> \u003Ccode><form>\u003C\u002Fcode>، \u003Ccode><input>\u003C\u002Fcode>، \u003Ccode><label>\u003C\u002Fcode>، \u003Ccode><select>\u003C\u002Fcode>، \u003Ccode><textarea>\u003C\u002Fcode> و \u003Ccode><button>\u003C\u002Fcode> — همه را از قبل بلدی؛ اینجا فقط استایلشان می‌دهیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از این ترم (فصل ۱):\u003C\u002Fstrong> \u003Ccode>:hover\u003C\u002Fcode> و \u003Ccode>:focus-visible\u003C\u002Fcode> — روی دکمهٔ ارسال دوباره به کارمان می‌آیند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲:\u003C\u002Fstrong> \u003Ccode>border\u003C\u002Fcode>، \u003Ccode>border-radius\u003C\u002Fcode>، \u003Ccode>background-color\u003C\u002Fcode> و specificity.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":27,"heading":28,"html":29,"embed":30},"lab","","— یک فرمِ تماسِ کاملاً خام و پیش‌فرض می‌بینی. کارِ این فصل این است که خط‌به‌خط استایلش بدهی و هر تغییر را همان‌جا ببینی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-5-interaction\u002Fsession-04-forms-styling",{"kind":20,"heading":32,"html":33},"۱. یک‌دست‌کردنِ کنترل‌های متنی","\u003Ch2 id=\"۱-یک‌دست‌کردنِ-کنترل‌های-متنی\">۱. یک‌دست‌کردنِ کنترل‌های متنی\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%DB%8C%DA%A9%E2%80%8C%D8%AF%D8%B3%D8%AA%E2%80%8C%DA%A9%D8%B1%D8%AF%D9%86%D9%90-%DA%A9%D9%86%D8%AA%D8%B1%D9%84%E2%80%8C%D9%87%D8%A7%DB%8C-%D9%85%D8%AA%D9%86%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول سه کنترلِ اصلی — کادرِ متن، منوی کشویی و جعبهٔ پیام — را یک‌شکل کن. یک نکتهٔ مهم اینجاست: کنترل‌های فرم فونتِ صفحه را \u003Cstrong>به ارث نمی‌برند\u003C\u002Fstrong>؛ هرکدام فونتِ پیش‌فرضِ خودشان را دارند، برای همین متنِ داخلِ \u003Ccode><textarea>\u003C\u002Fcode> اغلب با بقیهٔ صفحه فرق دارد. با \u003Ccode>font: inherit\u003C\u002Fcode> مجبورشان کن فونتِ صفحه را بگیرند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.field input,\n.field select,\n.field textarea {\n  font: inherit;\n  width: 100%;\n  padding: 10px;\n  border: 1px solid #d8ccae;\n  border-radius: 8px;\n  background-color: #ffffff;\n  color: #2c2114;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> هر سه کنترل حالا یک قابِ نرم، یک اندازه و \u003Cstrong>یک فونت\u003C\u002Fstrong> دارند. خطِ \u003Ccode>font: inherit\u003C\u002Fcode> را یک لحظه پاک کن و به جعبهٔ پیام نگاه کن — فونتش می‌پرد به یک فونتِ دیگر. همین یک خط، ناهماهنگیِ رایجِ فرم‌ها را حل می‌کند.\u003C\u002Fp>\n",{"kind":20,"heading":35,"html":36},"۲. selector صفتی: انتخاب با [...]","\u003Ch2 id=\"۲-selector-صفتی-انتخاب-با-\">۲. selector صفتی: انتخاب با \u003Ccode>[...]\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B2-selector-%D8%B5%D9%81%D8%AA%DB%8C-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%D8%A8%D8%A7-\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا با نوع، class و id انتخاب می‌کردی. یک راهِ دیگر هم هست: انتخاب بر اساسِ \u003Cstrong>صفتِ\u003C\u002Fstrong> (attribute) عنصر، با کروشه. \u003Ccode>input[type="email"]\u003C\u002Fcode> یعنی «هر \u003Ccode><input>\u003C\u002Fcode> که صفتِ \u003Ccode>type\u003C\u002Fcode> اش \u003Ccode>email\u003C\u002Fcode> است». این برای فرم‌ها عالی است، چون فیلدها اغلب فقط با \u003Ccode>type\u003C\u002Fcode> از هم فرق دارند. بیا فیلدِ ایمیل را با یک قابِ آبی متمایز کنیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.contact input[type="email"] {\n  border-color: #2a6b93;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> فقط کادرِ ایمیل قابِ آبی گرفت؛ بقیه دست‌نخورده ماندند. صفت لازم نیست مقدار داشته باشد — \u003Ccode>[disabled]\u003C\u002Fcode> تنها به وجودِ صفت نگاه می‌کند. فیلدِ «تلفن» در HTML صفتِ \u003Ccode>disabled\u003C\u002Fcode> دارد؛ بیا همهٔ کنترل‌های غیرفعال را خاموش نشان بدهیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.contact [disabled] {\n  background-color: #efe6d0;\n  color: #a89b7d;\n  cursor: not-allowed;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کادرِ «تلفن» کم‌رنگ و خاموش شد و نشانگرِ ماوس رویش «ممنوع» می‌شود. \u003Ccode>[disabled]\u003C\u002Fcode> هر عنصری با آن صفت را می‌گیرد، فرقی نمی‌کند \u003Ccode><input>\u003C\u002Fcode> باشد یا \u003Ccode><button>\u003C\u002Fcode>.\u003C\u002Fp>\n",{"kind":20,"heading":38,"html":39},"۳. :focus-within: روشن‌کردنِ کلِ ردیف","\u003Ch2 id=\"۳-focus-within-روشن‌کردنِ-کلِ-ردیف\">۳. \u003Ccode>:focus-within\u003C\u002Fcode>: روشن‌کردنِ کلِ ردیف\u003Ca class=\"head-anchor\" href=\"#%DB%B3-focus-within-%D8%B1%D9%88%D8%B4%D9%86%E2%80%8C%DA%A9%D8%B1%D8%AF%D9%86%D9%90-%DA%A9%D9%84%D9%90-%D8%B1%D8%AF%DB%8C%D9%81\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>وقتی داخلِ یک کادر تایپ می‌کنی، خودِ کادر یک قابِ focus می‌گیرد (کارِ مرورگر). ولی خوب است کلِ ردیف — برچسب و کادر با هم — هم روشن شود تا چشم راحت بفهمد کجاست. برای این کار pseudo-class تازه‌ای داریم: \u003Ccode>:focus-within\u003C\u002Fcode>، یعنی «وقتی focus \u003Cstrong>داخلِ\u003C\u002Fstrong> این عنصر یا یکی از فرزندانش است». روی خودِ ردیف بگذارش:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.field:focus-within {\n  background-color: #f0e7d2;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> داخلِ یک کادر کلیک کن یا با Tab بهش برس — کلِ آن ردیف یک پس‌زمینهٔ ملایم می‌گیرد، و تا focus بیرون برود پاک می‌شود. دقت کن که رنگ روی خودِ \u003Ccode><input>\u003C\u002Fcode> ننشست، بلکه روی \u003Ccode><p class="field">\u003C\u002Fcode> که دورش است؛ \u003Ccode>:focus-within\u003C\u002Fcode> والد را وقتی چیزی درونش فعال است هدف می‌گیرد. این همان چیزی است که با فقط \u003Ccode>:focus\u003C\u002Fcode> روی خودِ کادر نمی‌شد.\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. accent-color: رنگِ کنترل‌های بومی","\u003Ch2 id=\"۴-accent-color-رنگِ-کنترل‌های-بومی\">۴. \u003Ccode>accent-color\u003C\u002Fcode>: رنگِ کنترل‌های بومی\u003Ca class=\"head-anchor\" href=\"#%DB%B4-accent-color-%D8%B1%D9%86%DA%AF%D9%90-%DA%A9%D9%86%D8%AA%D8%B1%D9%84%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%A8%D9%88%D9%85%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا سراغِ checkbox می‌رویم، و اینجا به یک دیوار می‌خوریم. checkbox پیش‌فرض خاکستری است و می‌خواهی آبی‌اش کنی. کاری که برای هر جعبهٔ دیگری جواب می‌داد را امتحان کن — \u003Ccode>background-color\u003C\u002Fcode> و \u003Ccode>border\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.check input {\n  background-color: #2a6b93;\n  border: 2px solid #2a6b93;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>به checkbox نگاه کن: \u003Cstrong>هیچ فرقی نکرد.\u003C\u002Fstrong> هنوز همان مربعِ خاکستریِ پیش‌فرض است. انگار CSS ات را نادیده گرفت.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> درست دیدی — و این یک خطای تایپی نیست. بعضی کنترل‌های فرم مثلِ checkbox و radio را خودِ سیستم‌عامل می‌کشد، و بیشترِ property های جعبه (\u003Ccode>background-color\u003C\u002Fcode>، \u003Ccode>border\u003C\u002Fcode>) را نادیده می‌گیرند. یک property مخصوص برای همین ساخته شده: \u003Ccode>accent-color\u003C\u002Fcode>. آن قاعدهٔ بی‌اثر را پاک کن و به‌جایش این را بگذار:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.check {\n  accent-color: #2a6b93;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا checkbox را تیک بزن — تیک و مربعش آبیِ سایت شد. \u003Ccode>accent-color\u003C\u002Fcode> همان یک property درست برای رنگ‌کردنِ کنترل‌های بومی است، و چون به ارث می‌رسد، گذاشتنش روی یک والد کافی است تا همهٔ checkbox و radio های داخلش رنگ بگیرند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> درسِ بزرگ‌ترِ این بخش این است: کنترل‌های فرم مثلِ جعبه‌های معمولی نیستند. بعضی چیزها (قاب، فاصله، فونت، رنگِ متن) را می‌پذیرند، بعضی چیزها (شکلِ داخلیِ checkbox) را نه. قبل از جنگیدن با یک کنترلِ لجباز، اول ببین آیا یک property مخصوص مثلِ \u003Ccode>accent-color\u003C\u002Fcode> برایش هست.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":44,"html":45},"کد کاملِ این فصل","\u003Ch2 id=\"کد-کاملِ-این-فصل\">کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>استایل فرم<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="page">\n      <h1>فرم تماس<\u002Fh1>\n      <form class="contact">\n        <p class="field">\n          <label for="name">نام<\u002Flabel>\n          <input id="name" type="text" name="name">\n        <\u002Fp>\n        <p class="field">\n          <label for="email">ایمیل<\u002Flabel>\n          <input id="email" type="email" name="email">\n        <\u002Fp>\n        <p class="field">\n          <label for="topic">موضوع<\u002Flabel>\n          <select id="topic" name="topic">\n            <option>پرسش<\u002Foption>\n            <option>پیشنهاد<\u002Foption>\n            <option>گزارش مشکل<\u002Foption>\n          <\u002Fselect>\n        <\u002Fp>\n        <p class="field">\n          <label for="message">پیام<\u002Flabel>\n          <textarea id="message" name="message" rows="4"><\u002Ftextarea>\n        <\u002Fp>\n        <p class="field">\n          <label for="phone">تلفن (فعلاً غیرفعال)<\u002Flabel>\n          <input id="phone" type="text" name="phone" disabled>\n        <\u002Fp>\n        <p class="check">\n          <label><input type="checkbox" name="accept"> قوانین را می‌پذیرم<\u002Flabel>\n        <\u002Fp>\n        <button type="submit" class="submit">ارسال<\u002Fbutton>\n      <\u002Fform>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: #f6edda;\n  color: #2c2114;\n  line-height: 1.8;\n}\n\n.page {\n  padding: 24px;\n}\n\n.contact {\n  max-width: 420px;\n}\n\n.field {\n  margin-block: 0 16px;\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.field label {\n  display: block;\n  margin-block-end: 4px;\n  font-weight: 700;\n}\n\n\u002F* input\u002Fselect\u002Ftextarea font-e khodeshan ra darand va be ers nemibarand *\u002F\n.field input,\n.field select,\n.field textarea {\n  font: inherit;\n  width: 100%;\n  padding: 10px;\n  border: 1px solid #d8ccae;\n  border-radius: 8px;\n  background-color: #ffffff;\n  color: #2c2114;\n}\n\n\u002F* selector-e sefati: faghat field-e email *\u002F\n.contact input[type="email"] {\n  border-color: #2a6b93;\n}\n\n\u002F* selector-e sefati: har control ke disabled ast *\u002F\n.contact [disabled] {\n  background-color: #efe6d0;\n  color: #a89b7d;\n  cursor: not-allowed;\n}\n\n\u002F* vaghti focus dakhel-e field ast, kol-e radif roshan mishavad *\u002F\n.field:focus-within {\n  background-color: #f0e7d2;\n}\n\n\u002F* accent-color rang-e native-e checkbox ra avaz mikonad *\u002F\n.check {\n  accent-color: #2a6b93;\n}\n\n.submit {\n  font: inherit;\n  padding: 12px 24px;\n  border: none;\n  border-radius: 8px;\n  background-color: #2a6b93;\n  color: #ffffff;\n  cursor: pointer;\n}\n\n.submit:hover {\n  background-color: #1f4f6e;\n}\n\n.submit:focus-visible {\n  outline: 3px solid #a36207;\n  outline-offset: 2px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-accent-focus-within.e3b0061fdf.160.webp 160w, \u002F_img\u002F02-image-accent-focus-within.e3b0061fdf.320.webp 320w, \u002F_img\u002F02-image-accent-focus-within.e3b0061fdf.640.webp 640w, \u002F_img\u002F02-image-accent-focus-within.e3b0061fdf.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-accent-focus-within.e3b0061fdf.1280.jpg\" srcset=\"\u002F_img\u002F02-image-accent-focus-within.e3b0061fdf.160.jpg 160w, \u002F_img\u002F02-image-accent-focus-within.e3b0061fdf.320.jpg 320w, \u002F_img\u002F02-image-accent-focus-within.e3b0061fdf.640.jpg 640w, \u002F_img\u002F02-image-accent-focus-within.e3b0061fdf.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک checkbox پیش‌فرضِ خاکستری در برابر همان checkbox که با accent-color تیک‌خورده و آبی شده است؛ کنارشان یک ردیفِ فرم که با focus-within یک هالهٔ ملایم گرفته\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیارِ AI ات بپرس «چرا \u003Ccode>background-color\u003C\u002Fcode> روی یک checkbox کار نمی‌کند و راهِ درستش چیست؟». جوابش را با چیزی که همین فصل با چشمت دیدی بسنج: کنترل‌های بومی بیشترِ استایلِ جعبه را نمی‌پذیرند و رنگشان با \u003Ccode>accent-color\u003C\u002Fcode> عوض می‌شود. اگر AI پیشنهادِ یک ترفندِ پیچیده داد (مثلاً پنهان‌کردنِ checkbox و کشیدنِ یکیِ تقلبی)، همان‌جا در آزمایشگاه امتحانش کن و ببین آیا با صفحه‌کلید هم هنوز کار می‌کند — راهِ ساده‌تر معمولاً درست‌تر است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":47,"html":48},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>selector صفتی\u003C\u002Ftd>\n\u003Ctd>سِلِکتورِ صفتی\u003C\u002Ftd>\n\u003Ctd>انتخاب با کروشه بر اساسِ صفت، مثلِ \u003Ccode>[type="email"]\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>[disabled]\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>دیس‌ایبلد\u003C\u002Ftd>\n\u003Ctd>هر عنصری که صفتِ \u003Ccode>disabled\u003C\u002Fcode> دارد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:focus-within\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>فوکِس-ویدین\u003C\u002Ftd>\n\u003Ctd>وقتی focus داخلِ عنصر یا یکی از فرزندانش است\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>accent-color\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اکسنت-کالر\u003C\u002Ftd>\n\u003Ctd>رنگِ کنترل‌های بومی مثلِ checkbox و radio\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>font: inherit\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>فونت اینهریت\u003C\u002Ftd>\n\u003Ctd>کنترلِ فرم را وادار می‌کند فونتِ صفحه را بگیرد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":50,"heading":51,"html":52},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا \u003Ccode>background-color\u003C\u002Fcode> روی یک checkbox اثر نکرد ولی روی \u003Ccode><input type="text">\u003C\u002Fcode> اثر می‌کند؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به فرم یک فیلدِ \u003Ccode><input type="password">\u003C\u002Fcode> اضافه کن و با selector صفتی (\u003Ccode>[type="password"]\u003C\u002Fcode>) قابش را یک رنگِ متفاوت بده. بعد مطمئن شو که با Tab که در فرم حرکت می‌کنی، هر ردیف به‌ترتیب با \u003Ccode>:focus-within\u003C\u002Fcode> روشن می‌شود.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> دو تا radio button به فرم اضافه کن (\u003Ccode><input type="radio">\u003C\u002Fcode> با یک \u003Ccode>name\u003C\u002Fcode> مشترک) و ببین \u003Ccode>accent-color\u003C\u002Fcode> روی آن‌ها هم کار می‌کند. بعد امتحان کن: آیا \u003Ccode>border-radius\u003C\u002Fcode> شکلِ گِردِ radio را عوض می‌کند؟ با یک جمله بنویس چه دیدی و چرا به بخشِ «کنترل‌های بومی همه‌چیز را نمی‌پذیرند» ربط دارد.\u003C\u002Fp>\n",{"kind":20,"heading":54,"html":55},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی یک فرم را زیبا و یک‌دست کنی. ولی یک فرمِ خوب فقط زیبا نیست — به کاربر می‌گوید کدام فیلد اجباری است و کِی چیزی را اشتباه پر کرده. فصل بعد سراغِ همین می‌رویم: با \u003Ccode>:required\u003C\u002Fcode>، \u003Ccode>:valid\u003C\u002Fcode> و \u003Ccode>:invalid\u003C\u002Fcode> از اعتبارسنجیِ بومیِ خودِ مرورگر استفاده می‌کنی تا فرم بدونِ یک خط JavaScript به کاربر بازخوردِ درست و غلط بدهد.\u003C\u002Fp>\n",{"course":57,"entitled":65,"lessons":66,"payments_enabled":65,"terms":252,"live":5},{"active_window":58,"effective_price_toman":59,"free":5,"lesson_count":60,"price_toman":61,"slug":62,"summary_fa":63,"title_fa":64},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[67,71,75,78,81,84,88,92,96,100,104,107,110,113,116,119,122,125,128,131,134,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,202,203,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249],{"free_preview":5,"order":68,"slug":69,"source":8,"term":68,"title_fa":70},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":72,"slug":73,"source":8,"term":68,"title_fa":74},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":12,"slug":76,"source":8,"term":68,"title_fa":77},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":6,"slug":79,"source":8,"term":68,"title_fa":80},"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":9,"slug":82,"source":8,"term":68,"title_fa":83},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":85,"slug":86,"source":8,"term":68,"title_fa":87},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":89,"slug":90,"source":8,"term":68,"title_fa":91},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":93,"slug":94,"source":8,"term":68,"title_fa":95},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":97,"slug":98,"source":8,"term":68,"title_fa":99},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":101,"slug":102,"source":8,"term":68,"title_fa":103},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":68,"slug":105,"source":8,"term":72,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":72,"slug":108,"source":8,"term":72,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":12,"slug":111,"source":8,"term":72,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":6,"slug":114,"source":8,"term":72,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":9,"slug":117,"source":8,"term":72,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":85,"slug":120,"source":8,"term":72,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":89,"slug":123,"source":8,"term":72,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":93,"slug":126,"source":8,"term":72,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":129,"source":8,"term":72,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":132,"source":8,"term":72,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":72,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":68,"slug":139,"source":8,"term":12,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":72,"slug":142,"source":8,"term":12,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":12,"slug":145,"source":8,"term":12,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":6,"slug":148,"source":8,"term":12,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":9,"slug":151,"source":8,"term":12,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":85,"slug":154,"source":8,"term":12,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":89,"slug":157,"source":8,"term":12,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":93,"slug":160,"source":8,"term":12,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":163,"source":8,"term":12,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":166,"source":8,"term":12,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":12,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":68,"slug":172,"source":8,"term":6,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":72,"slug":175,"source":8,"term":6,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":12,"slug":178,"source":8,"term":6,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":6,"slug":181,"source":8,"term":6,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":9,"slug":184,"source":8,"term":6,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":85,"slug":187,"source":8,"term":6,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":89,"slug":190,"source":8,"term":6,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":93,"slug":193,"source":8,"term":6,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":68,"slug":196,"source":8,"term":9,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":72,"slug":199,"source":8,"term":9,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":9,"slug":16,"source":8,"term":9,"title_fa":17},{"free_preview":5,"order":85,"slug":205,"source":8,"term":9,"title_fa":206},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":89,"slug":208,"source":8,"term":9,"title_fa":209},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":93,"slug":211,"source":8,"term":9,"title_fa":212},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":97,"slug":214,"source":8,"term":9,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":101,"slug":217,"source":8,"term":9,"title_fa":218},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":68,"slug":220,"source":8,"term":85,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":72,"slug":223,"source":8,"term":85,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":12,"slug":226,"source":8,"term":85,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":6,"slug":229,"source":8,"term":85,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":9,"slug":232,"source":8,"term":85,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":85,"slug":235,"source":8,"term":85,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":89,"slug":238,"source":8,"term":85,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":93,"slug":241,"source":8,"term":85,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":97,"slug":244,"source":8,"term":85,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":101,"slug":247,"source":8,"term":85,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":250,"source":8,"term":85,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105306]