Uddeshyo | Student Super App

8. HTML Forms

📘 কনসেপ্ট (থিওরি)

ফর্ম ব্যবহারকারীর ইনপুট সংগ্রহ করে — লগইন, রেজিস্ট্রেশন, সার্চ বক্স ইত্যাদি।  ট্যাগ সব ফর্ম এলিমেন্ট মোড়কে রাখে।

**প্রচলিত ফর্ম এলিমেন্ট:**
-  — সবচেয়ে বহুমুখী: text, password, email, number, checkbox, radio ইত্যাদি
- </code> — বহু-লাইন টেক্সট ইনপুট
- <code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;"><select></code> / <code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;"><option></code> — ড্রপডাউন মেনু
- <code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;"><button></code> — ক্লিকযোগ্য বোতাম
- <code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;"><label></code> — ফর্ম এলিমেন্টের লেবেল (অ্যাক্সেসিবিলিটি বাড়ায়)

**ইনপুটের ধরন:**
<div style="background: #1e1e1e; padding: 1rem; border-radius: 8px; margin: 1rem 0; font-family: monospace; color: #e2e8f0; overflow-x: auto; border: 1px solid #333;"><input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="checkbox">
<input type="radio">
<input type="date">
<input type="file">
<input type="submit">
<div style="background: #1e1e1e; padding: 1rem; border-radius: 8px; margin: 1rem 0; font-family: monospace; color: #e2e8f0; overflow-x: auto; border: 1px solid #333;">
<code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;"><label></code> ট্যাগের <code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;">for</code> অ্যাট্রিবিউট ইনপুটের <code style="background: rgba(0,0,0,0.05); padding: 0.2rem 0.4rem; border-radius: 4px; color: #ec4899; font-weight: 600;">id</code> এর সাথে মিলতে হবে অ্যাক্সেসিবিলিটির জন্য।</div></div><div style="margin-bottom:2.5rem"><h3 style="font-size:1.2rem;color:#10b981;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem">💡 <!-- -->উদাহরণ</h3><div style="line-height:1.7;color:var(--text-secondary);font-size:1.05rem;white-space:pre-wrap">একটি রেজিস্ট্রেশন ফর্ম:

<div style="background: #1e1e1e; padding: 1rem; border-radius: 8px; margin: 1rem 0; font-family: monospace; color: #e2e8f0; overflow-x: auto; border: 1px solid #333;"><form>
    <label for="name">নাম:</label><br>
    <input type="text" id="name" placeholder="আপনার নাম লিখুন"><br><br>
    
    <label for="email">ইমেইল:</label><br>
    <input type="email" id="email" placeholder="ইমেইল লিখুন"><br><br>
    
    <label for="pass">পাসওয়ার্ড:</label><br>
    <input type="password" id="pass"><br><br>
    
    <button type="submit">রেজিস্টার</button>
</form>
</div></div></div><div style="background:rgba(244, 114, 182, 0.05);border:1px solid rgba(244, 114, 182, 0.2);padding:1.5rem;border-radius:12px"><h3 style="font-size:1.2rem;color:#f472b6;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem">🎯 <!-- -->আপনার কাজ (প্র্যাকটিস)</h3><div style="line-height:1.7;color:var(--text-primary);font-size:1.05rem;white-space:pre-wrap">ইমেইল ইনপুট, পাসওয়ার্ড ইনপুট, "Remember me" চেকবক্স এবং একটি সাবমিট বোতামসহ একটি লগইন ফর্ম তৈরি করুন।</div></div></div></div><div style="flex:1;display:flex;flex-direction:column"><div style="padding:0.75rem 1rem;background:#1e1e1e;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333"><div style="display:flex;align-items:center;gap:1rem"><span style="color:#888;font-size:0.9rem;font-family:monospace">main.<!-- -->html</span><button style="background:transparent;color:#a8a29e;border:1px solid #444;padding:0.25rem 0.75rem;border-radius:4px;cursor:pointer;font-size:0.8rem;display:flex;align-items:center;gap:0.4rem"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>Show Solution</button></div><button style="background:#22c55e;color:white;border:none;padding:0.5rem 1.5rem;border-radius:4px;cursor:pointer;font-weight:bold;display:flex;align-items:center;gap:0.5rem;opacity:1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>Run Code</button></div><div style="flex:2;position:relative"><section style="display:flex;position:relative;text-align:initial;width:100%;height:100%"><div style="display:flex;height:100%;width:100%;justify-content:center;align-items:center">Loading...</div><div style="width:100%;display:none"></div></section></div><div style="flex:1;background:#0f172a;border-top:1px solid #333;display:flex;flex-direction:column"><div style="padding:0.5rem 1rem;background:#1e293b;color:#94a3b8;font-size:0.8rem;font-weight:bold">OUTPUT</div><iframe srcDoc="<form>
    <!-- Build your login form -->
</form>" style="width:100%;height:100%;border:none;background:white" title="HTML Output"></iframe></div></div></div></div><!--$--><!--/$--></div></main><div style="position:fixed;bottom:10.25rem;right:1.5rem;z-index:9998;transition:bottom 0.3s ease, right 0.3s ease"><button class="btn-primary" tabindex="0" style="width:3.5rem;height:3.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.3);padding:0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg></button></div><div style="position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;font-family:var(--font-bengali, sans-serif)"><button tabindex="0" style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 25px rgba(168, 85, 247, 0.4);position:relative"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot" aria-hidden="true"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg><span style="position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:2px solid #fff"></span></button></div><a href="https://wa.me/8801675409533" target="_blank" rel="noopener noreferrer" class="whatsapp-widget" style="position:fixed;bottom:6.0rem;right:1.5rem;background-color:#25D366;color:white;width:3.5rem;height:3.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(37, 211, 102, 0.4);z-index:9999;text-decoration:none;transition:bottom 0.3s ease, right 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="28" height="28" fill="currentColor" style="display:block"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg></a><!--$--><!--/$--><script src="/_next/static/chunks/1jexzsn2qdw84.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[257261,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"ThemeProvider\"]\n3:I[883570,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\"]\n4:I[339756,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\"]\n5:I[837457,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\"]\n6:I[840038,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"Analytics\"]\n7:I[957215,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"SpeedInsights\"]\n9:I[897367,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"OutletBoundary\"]\na:\"$Sreact.suspense\"\nd:I[897367,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"ViewportBoundary\"]\nf:I[897367,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"MetadataBoundary\"]\n11:I[168027,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"default\",1]\n13:I[134383,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"/_next/static/chunks/02eirpk-jbe6_.js\"],\"default\"]\n14:I[27201,[\"/_next/static/chunks/126ur0w49mgvd.js\",\"/_next/static/chunks/0nwstxxvlktp5.js\",\"/_next/static/chunks/2ze29qu26uv8o.js\",\"/_next/static/chunks/26q97ntdx9nal.js\",\"/_next/static/chunks/1ntn7efqc-iiw.js\"],\"IconMark\"]\n:HL[\"/_next/static/chunks/2uzqqfk0m0u1-.css\",\"style\"]\n:HL[\"/_next/static/media/1f95d4beca86b0f6-s.p.0nu0d1-zq0f7n.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/34478e929f11203a-s.p.43mqagctl8tum.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/5838bc3f070fd510-s.p.3vga9zqu1bmt7.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/7ca7a04daf1e7f98-s.p.2ih2w5qn4g81_.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/d62a86ea65eb628c-s.p.3eswb6t44uyhi.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"programming\",\"html\",\"forms\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"programming\",{\"children\":[[\"lang\",\"html\",\"d\",null],{\"children\":[[\"lessonId\",\"forms\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2uzqqfk0m0u1-.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/126ur0w49mgvd.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0nwstxxvlktp5.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/2ze29qu26uv8o.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/26q97ntdx9nal.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/chunks/1ntn7efqc-iiw.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"geist_a71539c9-module__T19VSG__variable hind_siliguri_87552521-module__JoTf0G__variable\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L2\",null,{\"attribute\":\"class\",\"defaultTheme\":\"dark\",\"enableSystem\":false,\"disableTransitionOnChange\":true,\"children\":[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}],[\"$\",\"$L6\",null,{}],[\"$\",\"$L7\",null,{}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L8\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/02eirpk-jbe6_.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@b\"}]}]]}],{},null,false,null]},null,false,\"$@c\"]},null,false,\"$@c\"]},null,false,\"$@c\"]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L10\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2uzqqfk0m0u1-.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"8dk8ORxewiZI1aGwcqSj1\"}\n"])</script><script>self.__next_f.push([1,"12:[]\nc:\"$W12\"\n"])</script><script>self.__next_f.push([1,"8:[\"$\",\"div\",null,{\"style\":{\"height\":\"calc(100vh - 64px)\",\"overflow\":\"hidden\"},\"children\":[\"$\",\"$L13\",null,{\"lang\":\"html\",\"lessonData\":{\"id\":\"h8\",\"title\":\"8. HTML Forms\",\"slug\":\"forms\",\"concept_en\":\"Forms collect user input — logins, registrations, search boxes, etc. The `\u003cform\u003e` tag wraps all form elements.\\n\\n**Common form elements:**\\n- `\u003cinput\u003e` — Most versatile: text, password, email, number, checkbox, radio, etc.\\n- `\u003ctextarea\u003e` — Multi-line text input\\n- `\u003cselect\u003e` / `\u003coption\u003e` — Dropdown menu\\n- `\u003cbutton\u003e` — Clickable button\\n- `\u003clabel\u003e` — Label for form elements (improves accessibility)\\n\\n**Input types:**\\n```html\\n\u003cinput type=\\\"text\\\"\u003e\\n\u003cinput type=\\\"password\\\"\u003e\\n\u003cinput type=\\\"email\\\"\u003e\\n\u003cinput type=\\\"number\\\"\u003e\\n\u003cinput type=\\\"checkbox\\\"\u003e\\n\u003cinput type=\\\"radio\\\"\u003e\\n\u003cinput type=\\\"date\\\"\u003e\\n\u003cinput type=\\\"file\\\"\u003e\\n\u003cinput type=\\\"submit\\\"\u003e\\n```\\n\\nThe `\u003clabel\u003e` tag's `for` attribute should match the input's `id` for accessibility.\",\"concept_bn\":\"ফর্ম ব্যবহারকারীর ইনপুট সংগ্রহ করে — লগইন, রেজিস্ট্রেশন, সার্চ বক্স ইত্যাদি। `\u003cform\u003e` ট্যাগ সব ফর্ম এলিমেন্ট মোড়কে রাখে।\\n\\n**প্রচলিত ফর্ম এলিমেন্ট:**\\n- `\u003cinput\u003e` — সবচেয়ে বহুমুখী: text, password, email, number, checkbox, radio ইত্যাদি\\n- `\u003ctextarea\u003e` — বহু-লাইন টেক্সট ইনপুট\\n- `\u003cselect\u003e` / `\u003coption\u003e` — ড্রপডাউন মেনু\\n- `\u003cbutton\u003e` — ক্লিকযোগ্য বোতাম\\n- `\u003clabel\u003e` — ফর্ম এলিমেন্টের লেবেল (অ্যাক্সেসিবিলিটি বাড়ায়)\\n\\n**ইনপুটের ধরন:**\\n```html\\n\u003cinput type=\\\"text\\\"\u003e\\n\u003cinput type=\\\"password\\\"\u003e\\n\u003cinput type=\\\"email\\\"\u003e\\n\u003cinput type=\\\"number\\\"\u003e\\n\u003cinput type=\\\"checkbox\\\"\u003e\\n\u003cinput type=\\\"radio\\\"\u003e\\n\u003cinput type=\\\"date\\\"\u003e\\n\u003cinput type=\\\"file\\\"\u003e\\n\u003cinput type=\\\"submit\\\"\u003e\\n```\\n\\n`\u003clabel\u003e` ট্যাগের `for` অ্যাট্রিবিউট ইনপুটের `id` এর সাথে মিলতে হবে অ্যাক্সেসিবিলিটির জন্য।\",\"example_en\":\"A registration form:\\n\\n```html\\n\u003cform\u003e\\n    \u003clabel for=\\\"name\\\"\u003eName:\u003c/label\u003e\u003cbr\u003e\\n    \u003cinput type=\\\"text\\\" id=\\\"name\\\" placeholder=\\\"Enter your name\\\"\u003e\u003cbr\u003e\u003cbr\u003e\\n    \\n    \u003clabel for=\\\"email\\\"\u003eEmail:\u003c/label\u003e\u003cbr\u003e\\n    \u003cinput type=\\\"email\\\" id=\\\"email\\\" placeholder=\\\"Enter email\\\"\u003e\u003cbr\u003e\u003cbr\u003e\\n    \\n    \u003clabel for=\\\"pass\\\"\u003ePassword:\u003c/label\u003e\u003cbr\u003e\\n    \u003cinput type=\\\"password\\\" id=\\\"pass\\\"\u003e\u003cbr\u003e\u003cbr\u003e\\n    \\n    \u003cbutton type=\\\"submit\\\"\u003eRegister\u003c/button\u003e\\n\u003c/form\u003e\\n```\",\"example_bn\":\"একটি রেজিস্ট্রেশন ফর্ম:\\n\\n```html\\n\u003cform\u003e\\n    \u003clabel for=\\\"name\\\"\u003eনাম:\u003c/label\u003e\u003cbr\u003e\\n    \u003cinput type=\\\"text\\\" id=\\\"name\\\" placeholder=\\\"আপনার নাম লিখুন\\\"\u003e\u003cbr\u003e\u003cbr\u003e\\n    \\n    \u003clabel for=\\\"email\\\"\u003eইমেইল:\u003c/label\u003e\u003cbr\u003e\\n    \u003cinput type=\\\"email\\\" id=\\\"email\\\" placeholder=\\\"ইমেইল লিখুন\\\"\u003e\u003cbr\u003e\u003cbr\u003e\\n    \\n    \u003clabel for=\\\"pass\\\"\u003eপাসওয়ার্ড:\u003c/label\u003e\u003cbr\u003e\\n    \u003cinput type=\\\"password\\\" id=\\\"pass\\\"\u003e\u003cbr\u003e\u003cbr\u003e\\n    \\n    \u003cbutton type=\\\"submit\\\"\u003eরেজিস্টার\u003c/button\u003e\\n\u003c/form\u003e\\n```\",\"practice_en\":\"Create a login form with email input, password input, a \\\"Remember me\\\" checkbox, and a Submit button.\",\"practice_bn\":\"ইমেইল ইনপুট, পাসওয়ার্ড ইনপুট, \\\"Remember me\\\" চেকবক্স এবং একটি সাবমিট বোতামসহ একটি লগইন ফর্ম তৈরি করুন।\",\"starterCode\":\"\u003cform\u003e\\n    \u003c!-- Build your login form --\u003e\\n\u003c/form\u003e\",\"solutionCode\":\"\u003cform\u003e\\n    \u003clabel for=\\\"email\\\"\u003eEmail:\u003c/label\u003e\u003cbr\u003e\\n    \u003cinput type=\\\"email\\\" id=\\\"email\\\" placeholder=\\\"Email\\\"\u003e\u003cbr\u003e\u003cbr\u003e\\n    \\n    \u003clabel for=\\\"pass\\\"\u003ePassword:\u003c/label\u003e\u003cbr\u003e\\n    \u003cinput type=\\\"password\\\" id=\\\"pass\\\"\u003e\u003cbr\u003e\u003cbr\u003e\\n    \\n    \u003cinput type=\\\"checkbox\\\" id=\\\"remember\\\"\u003e\\n    \u003clabel for=\\\"remember\\\"\u003eRemember me\u003c/label\u003e\u003cbr\u003e\u003cbr\u003e\\n    \\n    \u003cbutton type=\\\"submit\\\"\u003eLogin\u003c/button\u003e\\n\u003c/form\u003e\"}}]}]\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nb:null\n10:[[\"$\",\"title\",\"0\",{\"children\":\"Uddeshyo | Student Super App\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"All-in-one student platform for Vocabulary, Finance, Job Exams, and Personal Analytics.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"3\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"4\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Uddeshyo\"}],[\"$\",\"meta\",\"5\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"black-translucent\"}],[\"$\",\"link\",\"6\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.2vob68tjqpejf.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L14\",\"7\",{}]]\n"])</script></body></html>