[{"data":1,"prerenderedAt":259},["ShallowReactive",2],{"lesson:t1-s08-forms":3,"course:taropood":63},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,8,"t1-s08-forms","book",1,"فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",[20,24,27,32,35,38,41,45,48,51,54,57,60],{"kind":21,"heading":22,"html":23},"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>تا حالا صفحه‌هایی ساختی که فقط \u003Cstrong>چیزی نشان می‌دهند\u003C\u002Fstrong>: متن، تصویر، فهرست. این فصل اولین باری است که صفحه‌ات از کاربر \u003Cstrong>چیزی می‌گیرد\u003C\u002Fstrong>: یک صفحهٔ عضویت که در آن اسمت را تایپ می‌کنی، ایمیل و رمز می‌نویسی، یکی از چند گزینه را انتخاب می‌کنی، یک تیک می‌زنی، در یک کادر بزرگ‌تر برای خودت می‌نویسی، از یک فهرست بازشو یکی را برمی‌داری، و آخرش یک دکمه هست.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-form.78960acb9b.160.webp 160w, \u002F_img\u002F01-image-form.78960acb9b.320.webp 320w, \u002F_img\u002F01-image-form.78960acb9b.640.webp 640w, \u002F_img\u002F01-image-form.78960acb9b.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-form.78960acb9b.1280.jpg\" srcset=\"\u002F_img\u002F01-image-form.78960acb9b.160.jpg 160w, \u002F_img\u002F01-image-form.78960acb9b.320.jpg 320w, \u002F_img\u002F01-image-form.78960acb9b.640.jpg 640w, \u002F_img\u002F01-image-form.78960acb9b.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک فرم عضویت ساده باز شده در مرورگر: چند کادر متن، یک گروه گزینه، یک فهرست بازشو و یک دکمه\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>یک نکتهٔ مهم از همین اول: در این فصل فرم را \u003Cstrong>می‌سازیم\u003C\u002Fstrong>، نه اینکه \u003Cstrong>بفرستیم\u003C\u002Fstrong>. فعلاً فقط شکل فرم را می‌سازیم؛ فرستادن اطلاعات کار بعدهاست و به یک دنیای دیگر (سمت سرور) مربوط است. پس تمام تمرکزمان روی این است که فرم چه \u003Cstrong>شکلی\u003C\u002Fstrong> دارد و کاربر با آن چه \u003Cstrong>کارهایی\u003C\u002Fstrong> می‌تواند بکند.\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>بگویی \u003Ccode><form>\u003C\u002Fcode> چیست و چرا همهٔ ورودی‌ها داخلش می‌روند\u003C\u002Fli>\n\u003Cli>برای هر نوع ورودی، \u003Ccode><input>\u003C\u002Fcode> را با \u003Ccode>type\u003C\u002Fcode> درست انتخاب کنی\u003C\u002Fli>\n\u003Cli>هر ورودی را با یک \u003Ccode><label>\u003C\u002Fcode> جفت کنی و بگویی چرا این جفت‌شدن اجباری است\u003C\u002Fli>\n\u003Cli>بین \u003Ccode>checkbox\u003C\u002Fcode> و \u003Ccode>radio\u003C\u002Fcode> درست انتخاب کنی\u003C\u002Fli>\n\u003Cli>یک \u003Ccode><textarea>\u003C\u002Fcode>، یک \u003Ccode><select>\u003C\u002Fcode> و یک \u003Ccode><button>\u003C\u002Fcode> بسازی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\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><!DOCTYPE html>\u003C\u002Fcode> تا \u003Ccode><body>\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲:\u003C\u002Fstrong> تیتر و پاراگراف — برای مرتب‌کردن فرم از \u003Ccode><p>\u003C\u002Fcode> استفاده می‌کنیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۵:\u003C\u002Fstrong> فهرست — فقط برای اینکه \u003Ccode><select>\u003C\u002Fcode> را با آن مقایسه کنیم.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم است. مثل همیشه، همه‌چیز را در آزمایشگاه می‌سازی و همان‌جا می‌بینی.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","و بگذار باز بماند. هر تکه‌ای که می‌سازیم همان‌جا بنویس، در کادرها تایپ کن، روی برچسب‌ها کلیک کن و رفتارشان را ببین. آزمایشگاه عمداً جلوی فرستادن فرم را می‌گیرد؛ پس اگر دکمه را زدی و هیچ اتفاقی نیفتاد، خراب نیست — قرار هم نبود چیزی بفرستد","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-1-html-structure\u002Fsession-08-forms",{"kind":21,"heading":33,"html":34},"۱. <form>: ظرفِ همهٔ ورودی‌ها","\u003Ch2 id=\"۱-form-ظرفِ-همهٔ-ورودی‌ها\">۱. \u003Ccode><form>\u003C\u002Fcode>: ظرفِ همهٔ ورودی‌ها\u003Ca class=\"head-anchor\" href=\"#%DB%B1-form-%D8%B8%D8%B1%D9%81%D9%90-%D9%87%D9%85%D9%87%D9%94-%D9%88%D8%B1%D9%88%D8%AF%DB%8C%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>هر جا از کاربر چیزی می‌گیری، همه‌اش داخل یک \u003Ccode><form>\u003C\u002Fcode> می‌رود. \u003Ccode><form>\u003C\u002Fcode> خودش چیزی نشان نمی‌دهد؛ فقط یک ظرف است که می‌گوید «این تکه از صفحه یک فرم است و این ورودی‌ها به هم مربوط‌اند». وقتی روزی بخواهی فرم را واقعاً بفرستی، همین \u003Ccode><form>\u003C\u002Fcode> است که می‌داند چه چیزهایی را با هم بفرستد.\u003C\u002Fp>\n\u003Cp>کوچک‌ترین ورودی ممکن یک کادر متن است. بیا یک کادر برای گرفتن اسم بسازیم. در آزمایشگاه این را بنویس:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><form>\n <label for="name">نام تو<\u002Flabel>\n <input type="text" id="name" name="name">\n<\u002Fform>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>خط به خط:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Ccode><input>\u003C\u002Fcode> همان کادری است که کاربر داخلش تایپ می‌کند. دقت کن \u003Ccode><input>\u003C\u002Fcode> تگ بسته ندارد — تنهاست، مثل \u003Ccode><img>\u003C\u002Fcode> در فصل ۴.\u003C\u002Fli>\n\u003Cli>\u003Ccode>type="text"\u003C\u002Fcode> می‌گوید این یک کادر متنِ یک‌خطی است.\u003C\u002Fli>\n\u003Cli>\u003Ccode>id="name"\u003C\u002Fcode> یک اسم یکتا به این کادر می‌دهد. (یکتا یعنی در کل صفحه فقط یکی \u003Ccode>id="name"\u003C\u002Fcode> داشته باشد.)\u003C\u002Fli>\n\u003Cli>\u003Ccode>name="name"\u003C\u002Fcode> اسمی است که موقع فرستادن به این ورودی می‌دهیم. چون فعلاً نمی‌فرستیم زیاد مهم نیست — ولی جلوتر برای \u003Ccode>radio\u003C\u002Fcode> نقش کلیدی پیدا می‌کند.\u003C\u002Fli>\n\u003Cli>\u003Ccode><label>\u003C\u002Fcode> متنی است که به کاربر می‌گوید این کادر برای چیست. \u003Ccode>for="name"\u003C\u002Fcode> این برچسب را به کادری وصل می‌کند که \u003Ccode>id\u003C\u002Fcode> اش \u003Ccode>name\u003C\u002Fcode> است.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> باید یک خط متن و کنارش یک کادر ببینی که می‌توانی داخلش کلیک کنی و تایپ کنی.\u003C\u002Fp>\n\u003Cp>حالا مهم‌ترین کار این فصل: به‌جای کلیک داخل کادر، روی \u003Cstrong>خودِ کلمهٔ\u003C\u002Fstrong> «نام تو» کلیک کن. می‌بینی که نشانگر (cursor) می‌پرد داخل کادر و آماده تایپ می‌شود. این همان پیوند \u003Ccode>for\u003C\u002Fcode> و \u003Ccode>id\u003C\u002Fcode> است که کار می‌کند.\u003C\u002Fp>\n\u003Cp>این دقیقاً دلیل وجود \u003Ccode><label>\u003C\u002Fcode> است، و دو فایده دارد:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>هدف کلیک بزرگ‌تر:\u003C\u002Fstrong> کاربر لازم نیست دقیقاً داخل کادرِ کوچک را بزند؛ کلیک روی متن هم کافی است. برای \u003Ccode>checkbox\u003C\u002Fcode> و \u003Ccode>radio\u003C\u002Fcode> که کادرشان ریز است، این خیلی مهم می‌شود.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>screen reader:\u003C\u002Fstrong> کسی که صفحه را نمی‌بیند و با screen reader کار می‌کند، وقتی به کادر می‌رسد باید بشنود «نام تو». بدون \u003Ccode><label>\u003C\u002Fcode> فقط می‌شنود «کادر متن» و نمی‌داند چه باید بنویسد.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> \u003Ccode>for\u003C\u002Fcode> و \u003Ccode>id\u003C\u002Fcode> باید \u003Cstrong>دقیقاً\u003C\u002Fstrong> مثل هم باشند — حتی یک حرف یا یک نقطه فرق کند، پیوند برقرار نمی‌شود. و هر \u003Ccode>id\u003C\u002Fcode> در صفحه باید یکتا باشد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":36,"html":37},"۲. type قلبِ <input> است","\u003Ch2 id=\"۲-type-قلبِ-input-است\">۲. \u003Ccode>type\u003C\u002Fcode> قلبِ \u003Ccode><input>\u003C\u002Fcode> است\u003Ca class=\"head-anchor\" href=\"#%DB%B2-type-%D9%82%D9%84%D8%A8%D9%90-input-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک \u003Ccode><input>\u003C\u002Fcode> داریم، ولی همان یک تگ می‌تواند ده‌ها کادرِ مختلف بسازد — فقط \u003Ccode>type\u003C\u002Fcode> را عوض می‌کنی. بیا سه \u003Ccode>type\u003C\u002Fcode> پرکاربرد دیگر را ببینیم: \u003Ccode>email\u003C\u002Fcode>، \u003Ccode>password\u003C\u002Fcode> و \u003Ccode>number\u003C\u002Fcode>. زیر کادر اسم، این‌ها را اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><label for="email">ایمیل<\u002Flabel>\n<input type="email" id="email" name="email">\n\n<label for="password">رمز عبور<\u002Flabel>\n<input type="password" id="password" name="password">\n\n<label for="age">سن<\u002Flabel>\n<input type="number" id="age" name="age">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>هر کدام کمی فرق دارند و فرقشان را می‌توانی ببینی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>password\u003C\u002Fcode>: داخلش تایپ کن. به‌جای حروف، نقطه یا ستاره می‌بینی. مرورگر رمز را از چشمِ کسی که کنارت نشسته پنهان می‌کند.\u003C\u002Fli>\n\u003Cli>\u003Ccode>number\u003C\u002Fcode>: خیلی از مرورگرها کنارش دو فلش کوچک بالا\u002Fپایین می‌گذارند و اجازه نمی‌دهند حرف تایپ کنی — فقط عدد.\u003C\u002Fli>\n\u003Cli>\u003Ccode>email\u003C\u002Fcode>: روی کامپیوتر شبیه کادر متن معمولی است، ولی روی موبایل صفحه‌کلیدی باز می‌شود که علامت \u003Ccode>@\u003C\u002Fcode> رویش راحت در دسترس است. به مرورگر گفته‌ای «اینجا قرار است ایمیل بیاید».\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> در کادر \u003Ccode>password\u003C\u002Fcode> تایپ کن و نقطه‌ها را ببین؛ در کادر \u003Ccode>number\u003C\u002Fcode> سعی کن حرف تایپ کنی و ببین که قبول نمی‌کند.\u003C\u002Fp>\n\u003Cp>انتخاب \u003Ccode>type\u003C\u002Fcode> درست فقط ظاهر را عوض نمی‌کند؛ به مرورگر و به کاربر می‌گوید چه‌جور داده‌ای اینجا انتظار می‌رود. همان فلسفهٔ همیشگی: \u003Cstrong>HTML می‌گوید چیزی چه هست.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بپرس «برای گرفتن شمارهٔ تلفن و برای گرفتن تاریخ تولد، چه \u003Ccode>type\u003C\u002Fcode> ای برای \u003Ccode><input>\u003C\u002Fcode> مناسب است؟». احتمالاً چند \u003Ccode>type\u003C\u002Fcode> نام می‌برد که ما هنوز رسمی معرفی‌شان نکرده‌ایم. همین‌جا قانون همیشگی را تمرین کن: هر کدام را در آزمایشگاه بنویس و ببین مرورگر چطور رفتار می‌کند — صفحه‌کلید موبایل عوض می‌شود؟ فقط عدد قبول می‌کند؟ اگر چیزی که با چشم دیدی با حرف AI نخواند، چیزی که دیدی معتبرتر است. \u003Cstrong>اول خودت امتحان کن، بعد AI؛ و یادت باشد AI هم اشتباه می‌کند.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. یکی از چند تا با radio، چند تا از چند تا با checkbox","\u003Ch2 id=\"۳-یکی-از-چند-تا-با-radio-چند-تا-از-چند-تا-با-checkbox\">۳. یکی از چند تا با \u003Ccode>radio\u003C\u002Fcode>، چند تا از چند تا با \u003Ccode>checkbox\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%DB%8C%DA%A9%DB%8C-%D8%A7%D8%B2-%DA%86%D9%86%D8%AF-%D8%AA%D8%A7-%D8%A8%D8%A7-radio-%DA%86%D9%86%D8%AF-%D8%AA%D8%A7-%D8%A7%D8%B2-%DA%86%D9%86%D8%AF-%D8%AA%D8%A7-%D8%A8%D8%A7-checkbox\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>گاهی می‌خواهی کاربر از بین چند گزینه \u003Cstrong>فقط یکی\u003C\u002Fstrong> را انتخاب کند. برای این کار \u003Ccode>radio\u003C\u002Fcode> است. جادویش در \u003Ccode>name\u003C\u002Fcode> است: همهٔ \u003Ccode>radio\u003C\u002Fcode> هایی که \u003Ccode>name\u003C\u002Fcode> \u003Cstrong>یکسان\u003C\u002Fstrong> دارند یک گروه‌اند، و از یک گروه فقط یکی می‌تواند انتخاب شود.\u003C\u002Fp>\n\u003Cp>بیا از کاربر بپرسیم سطح تجربه‌اش چیست:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><p>سطح تجربه‌ات چیست؟<\u002Fp>\n<p>\n <input type="radio" id="level-beginner" name="level" value="beginner">\n <label for="level-beginner">تازه‌کارم<\u002Flabel>\n<\u002Fp>\n<p>\n <input type="radio" id="level-pro" name="level" value="pro">\n <label for="level-pro">حرفه‌ای‌ام<\u002Flabel>\n<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>دو نکته: اولاً برای \u003Ccode>radio\u003C\u002Fcode> (و \u003Ccode>checkbox\u003C\u002Fcode>) برچسب را معمولاً \u003Cstrong>بعد\u003C\u002Fstrong> از کادر می‌گذاریم، چون کادر ریز است و متن کنارش می‌آید — ولی پیوند \u003Ccode>for\u003C\u002Fcode> و \u003Ccode>id\u003C\u002Fcode> همچنان همان است. دوماً \u003Ccode>value\u003C\u002Fcode> مقدار درونی هر گزینه است که موقع فرستادن به کار می‌آید؛ چون فعلاً نمی‌فرستیم، فقط بگذار باشد.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی «تازه‌کارم» کلیک کن، بعد روی «حرفه‌ای‌ام». می‌بینی اولی خودش خالی می‌شود — هر لحظه فقط یکی انتخاب است. تو یک خط کد برای این رفتار ننوشتی؛ همان \u003Ccode>name="level"\u003C\u002Fcode> مشترک این کار را کرد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> اگر به این دو \u003Ccode>radio\u003C\u002Fcode> اسم‌های \u003Ccode>name\u003C\u002Fcode> \u003Cstrong>متفاوت\u003C\u002Fstrong> بدهی، مرورگر فکر می‌کند دو گروهِ جدا هستند و آن‌وقت \u003Cstrong>هر دو\u003C\u002Fstrong> می‌توانند هم‌زمان انتخاب شوند — که برای «فقط یکی را انتخاب کن» غلط است. قانون را نگه دار: \u003Ccode>name\u003C\u002Fcode> یکسان یعنی یک انتخاب.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>حالا حالتِ دیگر: وقتی کاربر می‌تواند \u003Cstrong>چند تا\u003C\u002Fstrong> را با هم انتخاب کند و هر کدام مستقل است. این \u003Ccode>checkbox\u003C\u002Fcode> است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><p>\n <input type="checkbox" id="newsletter" name="newsletter">\n <label for="newsletter">خبرنامه برایم بیاید<\u002Flabel>\n<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی برچسب کلیک کن تا تیک بخورد، دوباره کلیک کن تا برداشته شود. \u003Ccode>checkbox\u003C\u002Fcode> مستقل است؛ روشن و خاموش‌شدنش به هیچ چیز دیگری کار ندارد.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-radio-checkbox.9bbd3d2463.160.webp 160w, \u002F_img\u002F02-image-radio-checkbox.9bbd3d2463.320.webp 320w, \u002F_img\u002F02-image-radio-checkbox.9bbd3d2463.640.webp 640w, \u002F_img\u002F02-image-radio-checkbox.9bbd3d2463.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-radio-checkbox.9bbd3d2463.1280.jpg\" srcset=\"\u002F_img\u002F02-image-radio-checkbox.9bbd3d2463.160.jpg 160w, \u002F_img\u002F02-image-radio-checkbox.9bbd3d2463.320.jpg 320w, \u002F_img\u002F02-image-radio-checkbox.9bbd3d2463.640.jpg 640w, \u002F_img\u002F02-image-radio-checkbox.9bbd3d2463.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"کنار هم: گروه radio که فقط یکی از آن انتخاب شده، در مقابل چند checkbox که هرچندتایشان تیک خورده‌اند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":42,"heading":43,"html":44},"checkpoint","چالش: radio یا checkbox؟","\u003Ch2 id=\"چالش-radio-یا-checkbox\">چالش: \u003Ccode>radio\u003C\u002Fcode> یا \u003Ccode>checkbox\u003C\u002Fcode>؟\u003Ca class=\"head-anchor\" href=\"#%DA%86%D8%A7%D9%84%D8%B4-radio-%DB%8C%D8%A7-checkbox\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>دو تا سؤال. برای هرکدام بگو \u003Ccode>radio\u003C\u002Fcode> درست است یا \u003Ccode>checkbox\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>«رنگ مورد علاقه‌ات را انتخاب کن — فقط یکی.»\u003C\u002Fli>\n\u003Cli>«کدام‌ها را بلدی؟ HTML، CSS، JavaScript — هر چند تا که بلدی.»\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>اول جواب بده، بعد ادامه بده.\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> اولی \u003Ccode>radio\u003C\u002Fcode> است، چون فقط یکی مجاز است — و یادت باشد هر سه گزینهٔ رنگ باید \u003Ccode>name\u003C\u002Fcode> یکسان بگیرند تا یک گروه شوند. دومی \u003Ccode>checkbox\u003C\u002Fcode> است، چون چند تا با هم و مستقل. قانون ساده: \u003Cstrong>یکی از چند تا → \u003Ccode>radio\u003C\u002Fcode> با \u003Ccode>name\u003C\u002Fcode> مشترک؛ چند تای مستقل → \u003Ccode>checkbox\u003C\u002Fcode>.\u003C\u002Fstrong>\u003C\u002Fp>\n",{"kind":21,"heading":46,"html":47},"۴. <textarea> برای متن بلند، <select> برای فهرست بازشو","\u003Ch2 id=\"۴-textarea-برای-متن-بلند-select-برای-فهرست-بازشو\">۴. \u003Ccode><textarea>\u003C\u002Fcode> برای متن بلند، \u003Ccode><select>\u003C\u002Fcode> برای فهرست بازشو\u003Ca class=\"head-anchor\" href=\"#%DB%B4-textarea-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%85%D8%AA%D9%86-%D8%A8%D9%84%D9%86%D8%AF-select-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%81%D9%87%D8%B1%D8%B3%D8%AA-%D8%A8%D8%A7%D8%B2%D8%B4%D9%88\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode><input type="text">\u003C\u002Fcode> فقط یک خط جا دارد. برای یک پیام چندخطی — مثلاً «دربارهٔ خودت بنویس» — کادری می‌خواهی که چند خط بگیرد. این \u003Ccode><textarea>\u003C\u002Fcode> است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><label for="message">دربارهٔ خودت بنویس<\u002Flabel>\n<textarea id="message" name="message"><\u002Ftextarea>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>برخلاف \u003Ccode><input>\u003C\u002Fcode>، این یکی تگ بسته دارد: \u003Ccode><\u002Ftextarea>\u003C\u002Fcode>. هرچه بین تگ باز و بسته بگذاری، متنِ \u003Cstrong>شروع\u003C\u002Fstrong> کادر می‌شود؛ معمولاً خالی نگهش می‌داریم تا کادر خالی شروع شود.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> یک کادر بزرگ‌تر می‌بینی. داخلش تایپ کن و Enter بزن تا به خط بعد بروی — کاری که کادر متن یک‌خطی نمی‌تواند. اگر گوشهٔ کادر را بگیری و بکشی، می‌توانی اندازه‌اش را عوض کنی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> \u003Ccode><\u002Ftextarea>\u003C\u002Fcode> را فراموش نکن. چون تگ بسته دارد، اگر جا بیندازی هرچه بعدش نوشته‌ای ممکن است داخل کادر بیفتد و صفحه به‌هم بریزد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>حالا \u003Ccode><select>\u003C\u002Fcode>: یک فهرست بازشو که کاربر از داخلش یکی را برمی‌دارد. هر گزینه یک \u003Ccode><option>\u003C\u002Fcode> است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><label for="topic">موضوع مورد علاقه<\u002Flabel>\n<select id="topic" name="topic">\n <option value="html">HTML<\u002Foption>\n <option value="css">CSS<\u002Foption>\n <option value="js">JavaScript<\u002Foption>\n<\u002Fselect>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>متنی که بین \u003Ccode><option>\u003C\u002Fcode> و \u003Ccode><\u002Foption>\u003C\u002Fcode> می‌نویسی همان چیزی است که کاربر می‌بیند. \u003Ccode>value\u003C\u002Fcode> باز هم مقدار درونی است برای وقتِ فرستادن.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی \u003Ccode><select>\u003C\u002Fcode> کلیک کن؛ فهرست باز می‌شود. یکی را انتخاب کن؛ فهرست بسته می‌شود و انتخابت را نشان می‌دهد. \u003Ccode><select>\u003C\u002Fcode> فقط یک انتخاب می‌گیرد و جای کمی می‌برد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> \u003Ccode><select>\u003C\u002Fcode> و گروه \u003Ccode>radio\u003C\u002Fcode> هر دو «یکی را انتخاب کن» هستند. برای چند گزینهٔ کم، \u003Ccode>radio\u003C\u002Fcode> روشن‌تر است چون همه هم‌زمان جلوی چشم‌اند. برای گزینه‌های زیاد (مثل فهرست کشورها) \u003Ccode><select>\u003C\u002Fcode> مرتب‌تر است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":49,"html":50},"۵. <button> و کنار هم چیدنِ کل فرم","\u003Ch2 id=\"۵-button-و-کنار-هم-چیدنِ-کل-فرم\">۵. \u003Ccode><button>\u003C\u002Fcode> و کنار هم چیدنِ کل فرم\u003Ca class=\"head-anchor\" href=\"#%DB%B5-button-%D9%88-%DA%A9%D9%86%D8%A7%D8%B1-%D9%87%D9%85-%DA%86%DB%8C%D8%AF%D9%86%D9%90-%DA%A9%D9%84-%D9%81%D8%B1%D9%85\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>هر فرم آخرش یک دکمه می‌خواهد تا کاربر بگوید «تمام شد». این \u003Ccode><button>\u003C\u002Fcode> است، و \u003Ccode>type="submit"\u003C\u002Fcode> یعنی دکمه‌ای که (به‌طور معمول) فرم را می‌فرستد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><button type="submit">عضو شو<\u002Fbutton>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>متنِ بین تگ باز و بسته، همان چیزی است که روی دکمه نوشته می‌شود.\u003C\u002Fp>\n\u003Cp>حالا همه‌چیز را کنار هم بگذار. من هر ورودی را داخل یک \u003Ccode><p>\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 <title>فرم عضویت<\u002Ftitle>\n <\u002Fhead>\n <body>\n <h1>عضویت در باشگاه کدنویسی<\u002Fh1>\n\n <form>\n <p>\n <label for="name">نام تو<\u002Flabel>\n <input type="text" id="name" name="name">\n <\u002Fp>\n\n <p>\n <label for="email">ایمیل<\u002Flabel>\n <input type="email" id="email" name="email">\n <\u002Fp>\n\n <p>\n <label for="age">سن<\u002Flabel>\n <input type="number" id="age" name="age">\n <\u002Fp>\n\n <p>\n <label for="password">رمز عبور<\u002Flabel>\n <input type="password" id="password" name="password">\n <\u002Fp>\n\n <p>سطح تجربه‌ات چیست؟<\u002Fp>\n <p>\n <input type="radio" id="level-beginner" name="level" value="beginner">\n <label for="level-beginner">تازه‌کارم<\u002Flabel>\n <\u002Fp>\n <p>\n <input type="radio" id="level-pro" name="level" value="pro">\n <label for="level-pro">حرفه‌ای‌ام<\u002Flabel>\n <\u002Fp>\n\n <p>\n <label for="topic">موضوع مورد علاقه<\u002Flabel>\n <select id="topic" name="topic">\n <option value="html">HTML<\u002Foption>\n <option value="css">CSS<\u002Foption>\n <option value="js">JavaScript<\u002Foption>\n <\u002Fselect>\n <\u002Fp>\n\n <p>\n <label for="message">دربارهٔ خودت بنویس<\u002Flabel>\n <textarea id="message" name="message"><\u002Ftextarea>\n <\u002Fp>\n\n <p>\n <input type="checkbox" id="newsletter" name="newsletter">\n <label for="newsletter">خبرنامه برایم بیاید<\u002Flabel>\n <\u002Fp>\n\n <p>\n <button type="submit">عضو شو<\u002Fbutton>\n <\u002Fp>\n <\u002Fform>\n <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کل فرم را می‌بینی — کادرهای اسم و ایمیل و سن و رمز، یک گروه «یکی را انتخاب کن»، یک فهرست بازشو، یک کادر بزرگ پیام، یک \u003Ccode>checkbox\u003C\u002Fcode> و یک دکمه. روی کلمهٔ هر برچسب کلیک کن و ببین نشانگر توی همان کادرِ درست می‌پرد. دکمه را هم بزن — هیچ اتفاقی نمی‌افتد، و این درست است: فعلاً فقط شکل فرم را می‌سازیم؛ فرستادن اطلاعات کار بعدهاست.\u003C\u002Fp>\n",{"kind":21,"heading":52,"html":53},"۶. حالا عمداً خرابش کن: پیوند <label> را بشکن","\u003Ch2 id=\"۶-حالا-عمداً-خرابش-کن-پیوند-label-را-بشکن\">۶. حالا عمداً خرابش کن: پیوند \u003Ccode><label>\u003C\u002Fcode> را بشکن\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%D8%AD%D8%A7%D9%84%D8%A7-%D8%B9%D9%85%D8%AF%D8%A7%D9%8B-%D8%AE%D8%B1%D8%A7%D8%A8%D8%B4-%DA%A9%D9%86-%D9%BE%DB%8C%D9%88%D9%86%D8%AF-label-%D8%B1%D8%A7-%D8%A8%D8%B4%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>مهم‌ترین پیوند این فصل، پیوندِ \u003Ccode>for\u003C\u002Fcode> و \u003Ccode>id\u003C\u002Fcode> است. برای اینکه واقعاً حسش کنی، بیا بشکنیمش. در همان کادر اسم، \u003Ccode>for="name"\u003C\u002Fcode> را عوض کن به \u003Ccode>for="fullname"\u003C\u002Fcode> — حالا دیگر با \u003Ccode>id="name"\u003C\u002Fcode> جور نیست:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><label for="fullname">نام تو<\u002Flabel>\n<input type="text" id="name" name="name">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا روی \u003Cstrong>کلمهٔ\u003C\u002Fstrong> «نام تو» کلیک کن. قبلاً نشانگر می‌پرید داخل کادر؛ الان هیچ اتفاقی نمی‌افتد. برچسب تبدیل شده به یک متنِ ساده که به هیچ کادری وصل نیست. کادر هنوز کار می‌کند اگر مستقیم داخلش کلیک کنی — ولی پیوند رفته، و کاربرِ screen reader که \u003Cstrong>کاملاً\u003C\u002Fstrong> به همین پیوند تکیه دارد، دیگر نمی‌داند این کادر برای چیست.\u003C\u002Fp>\n\u003Cp>باز هم دقت کن: مرورگر خطا نداد. درست مثل فصل‌های قبل، فقط بی‌سروصدا کار نکرد. این همان رفتار موذی HTML است.\u003C\u002Fp>\n\u003Cp>حالا درستش کن: \u003Ccode>for\u003C\u002Fcode> را برگردان به \u003Ccode>name\u003C\u002Fcode> تا دوباره با \u003Ccode>id\u003C\u002Fcode> یکی شود. روی کلمه کلیک کن و ببین نشانگر دوباره داخل کادر می‌پرد.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> بعد از اصلاح، کلیک روی کلمهٔ برچسب دوباره کادر را فعال می‌کند. هر \u003Ccode><input>\u003C\u002Fcode> در فرمت باید دقیقاً همین جفتِ سالم را داشته باشد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> قانونِ کلِ این فصل در یک جمله: \u003Cstrong>هر ورودی یک \u003Ccode><label>\u003C\u002Fcode> می‌خواهد، \u003Ccode>for\u003C\u002Fcode> باید دقیقاً برابر \u003Ccode>id\u003C\u002Fcode> باشد، و هر \u003Ccode>id\u003C\u002Fcode> یکتا.\u003C\u002Fstrong> اگر این را رعایت کنی، نصفِ کارِ دسترس‌پذیریِ فرم را همین‌جا انجام داده‌ای.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":55,"html":56},"واژه‌های تازهٔ این فصل","\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>form\u003C\u002Ftd>\n\u003Ctd>فُرم\u003C\u002Ftd>\n\u003Ctd>ظرفی که همهٔ ورودی‌های به‌هم‌مربوط داخلش می‌روند (\u003Ccode><form>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>input\u003C\u002Ftd>\n\u003Ctd>اینپوت\u003C\u002Ftd>\n\u003Ctd>کادری که کاربر داخلش چیزی وارد می‌کند (\u003Ccode><input>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>type\u003C\u002Ftd>\n\u003Ctd>تایپ\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>attribute\u003C\u002Fcode> ای که می‌گوید \u003Ccode><input>\u003C\u002Fcode> چه‌جور کادری باشد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>label\u003C\u002Ftd>\n\u003Ctd>لِیبل\u003C\u002Ftd>\n\u003Ctd>متنی که می‌گوید یک ورودی برای چیست (\u003Ccode><label>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>radio\u003C\u002Ftd>\n\u003Ctd>رِیدیو\u003C\u002Ftd>\n\u003Ctd>دکمهٔ «فقط یکی از چند تا»؛ با \u003Ccode>name\u003C\u002Fcode> مشترک یک گروه می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>checkbox\u003C\u002Ftd>\n\u003Ctd>چِک‌باکس\u003C\u002Ftd>\n\u003Ctd>تیکِ مستقلِ روشن\u002Fخاموش\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>textarea\u003C\u002Ftd>\n\u003Ctd>تِکست‌اِریا\u003C\u002Ftd>\n\u003Ctd>کادر متنِ چندخطی (\u003Ccode><textarea>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>select\u003C\u002Ftd>\n\u003Ctd>سِلِکت\u003C\u002Ftd>\n\u003Ctd>فهرست بازشو برای انتخاب یکی (\u003Ccode><select>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>option\u003C\u002Ftd>\n\u003Ctd>آپشِن\u003C\u002Ftd>\n\u003Ctd>یک گزینه داخل \u003Ccode><select>\u003C\u002Fcode> (\u003Ccode><option>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>button\u003C\u002Ftd>\n\u003Ctd>باتِن\u003C\u002Ftd>\n\u003Ctd>دکمه (\u003Ccode><button>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":42,"heading":58,"html":59},"تمرین‌ها","\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><input>\u003C\u002Fcode> به یک \u003Ccode><label>\u003C\u002Fcode> نیاز دارد، و پیوندشان با کدام دو \u003Ccode>attribute\u003C\u002Fcode> برقرار می‌شود؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک \u003Cstrong>فرم تماس\u003C\u002Fstrong> بساز. باید داشته باشد: کادر اسم (\u003Ccode>type="text"\u003C\u002Fcode>)، کادر ایمیل (\u003Ccode>type="email"\u003C\u002Fcode>)، یک \u003Ccode><select>\u003C\u002Fcode> برای موضوع پیام با حداقل سه \u003Ccode><option>\u003C\u002Fcode>، یک \u003Ccode><textarea>\u003C\u002Fcode> برای متن پیام، و یک دکمهٔ \u003Ccode>submit\u003C\u002Fcode>. هر ورودی باید \u003Ccode><label>\u003C\u002Fcode> درست داشته باشد — بعد از ساختن، روی کلمهٔ هر برچسب کلیک کن و مطمئن شو کادرِ درست فعال می‌شود.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک نظرسنجی کوچک بساز که هم یک گروه \u003Ccode>radio\u003C\u002Fcode> (یک جواب، مثلاً «چند وقت است کد می‌زنی؟») و هم یک گروه \u003Ccode>checkbox\u003C\u002Fcode> (چند جواب، مثلاً «کدام‌ها را بلدی؟») داشته باشد؛ برای هرکدام درست تصمیم بگیر. بعد عمداً \u003Ccode>for\u003C\u002Fcode> یکی از برچسب‌ها را خراب کن، ببین کلیک‌روی‌برچسب دیگر کادر را فعال نمی‌کند، و دوباره درستش کن.\u003C\u002Fp>\n",{"kind":21,"heading":61,"html":62},"در فصل بعد","\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>الان می‌توانی از کاربر ورودی بگیری — و بدون اینکه اسمش را برده باشیم، بخش بزرگی از \u003Cstrong>دسترس‌پذیری\u003C\u002Fstrong> را هم رعایت کرده‌ای: همان عادتِ \u003Ccode><label>\u003C\u002Fcode> برای هر \u003Ccode><input>\u003C\u002Fcode>. فصل بعد دقیقاً دربارهٔ همین است: دسترس‌پذیری از خودِ HTML — ترتیب درست heading ها، landmark ها، پیمایش کل صفحه فقط با کلید Tab، و اینکه \u003Ccode>alt\u003C\u002Fcode> درست کِی لازم است و کِی باید خالی بماند. آنجا می‌بینی که چقدر از این کار را همین semantic HTML برایت انجام داده.\u003C\u002Fp>\n",{"course":64,"entitled":72,"lessons":73,"payments_enabled":72,"terms":258,"live":5},{"active_window":65,"effective_price_toman":66,"free":5,"lesson_count":67,"price_toman":68,"slug":69,"summary_fa":70,"title_fa":71},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[74,77,81,85,89,93,97,98,99,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,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255],{"free_preview":5,"order":9,"slug":75,"source":8,"term":9,"title_fa":76},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":78,"slug":79,"source":8,"term":9,"title_fa":80},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":82,"slug":83,"source":8,"term":9,"title_fa":84},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":86,"slug":87,"source":8,"term":9,"title_fa":88},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":90,"slug":91,"source":8,"term":9,"title_fa":92},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":94,"slug":95,"source":8,"term":9,"title_fa":96},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"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":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":101,"slug":102,"source":8,"term":9,"title_fa":103},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":9,"slug":105,"source":8,"term":78,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":78,"slug":108,"source":8,"term":78,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":82,"slug":111,"source":8,"term":78,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":86,"slug":114,"source":8,"term":78,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":90,"slug":117,"source":8,"term":78,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":94,"slug":120,"source":8,"term":78,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":12,"slug":123,"source":8,"term":78,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":6,"slug":126,"source":8,"term":78,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":16,"slug":129,"source":8,"term":78,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":132,"source":8,"term":78,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":78,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":9,"slug":139,"source":8,"term":82,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":78,"slug":142,"source":8,"term":82,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":82,"slug":145,"source":8,"term":82,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":86,"slug":148,"source":8,"term":82,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":90,"slug":151,"source":8,"term":82,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":94,"slug":154,"source":8,"term":82,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":12,"slug":157,"source":8,"term":82,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":6,"slug":160,"source":8,"term":82,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":16,"slug":163,"source":8,"term":82,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":166,"source":8,"term":82,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":82,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":9,"slug":172,"source":8,"term":86,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":78,"slug":175,"source":8,"term":86,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":82,"slug":178,"source":8,"term":86,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":86,"slug":181,"source":8,"term":86,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":90,"slug":184,"source":8,"term":86,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":94,"slug":187,"source":8,"term":86,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":12,"slug":190,"source":8,"term":86,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":6,"slug":193,"source":8,"term":86,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":9,"slug":196,"source":8,"term":90,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":78,"slug":199,"source":8,"term":90,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":82,"slug":202,"source":8,"term":90,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":86,"slug":205,"source":8,"term":90,"title_fa":206},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":90,"slug":208,"source":8,"term":90,"title_fa":209},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":94,"slug":211,"source":8,"term":90,"title_fa":212},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":12,"slug":214,"source":8,"term":90,"title_fa":215},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":6,"slug":217,"source":8,"term":90,"title_fa":218},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":16,"slug":220,"source":8,"term":90,"title_fa":221},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":101,"slug":223,"source":8,"term":90,"title_fa":224},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":9,"slug":226,"source":8,"term":94,"title_fa":227},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":78,"slug":229,"source":8,"term":94,"title_fa":230},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":82,"slug":232,"source":8,"term":94,"title_fa":233},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":86,"slug":235,"source":8,"term":94,"title_fa":236},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":90,"slug":238,"source":8,"term":94,"title_fa":239},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":94,"slug":241,"source":8,"term":94,"title_fa":242},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":12,"slug":244,"source":8,"term":94,"title_fa":245},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":6,"slug":247,"source":8,"term":94,"title_fa":248},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":16,"slug":250,"source":8,"term":94,"title_fa":251},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":101,"slug":253,"source":8,"term":94,"title_fa":254},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":256,"source":8,"term":94,"title_fa":257},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827104733]