در حال بارگذاری...

فرم‌های HTML

ریسپانسیو صفحه را برای عرض‌های مختلف جا داد. فرم‌ها فصل تازه است: کاربر تایپ و ارسال می‌کند. ظرف form است؛ درس‌های بعد attribute و نوع input را عمیق می‌کنند.

چرا فرم مهم است

صفحهٔ ایستا محتوا نشان می‌دهد؛ فرم جمع می‌کند. بدون form مرورگر نمی‌داند کدام کنترل‌ها یک ارسال‌اند.

پاسخ مستقیم

۱) <form action="URL" method="get|post">. ۲) کنترل با name. ۳) <label for> هم‌خوان با id. ۴) دکمهٔ submit. اول نشانهٔ درست؛ بک‌اند بعداً.

📊 Form parts at a glance

Part	Job	Beginner tip
form	Groups controls for one submission	Keep related fields inside one form
action	URL or path that receives the data	Practice paths are fine while learning
method	How the browser sends the payload	get puts data in the URL; post uses the request body
input (+ others)	Collects a value from the user	Always set name for submitted keys
label	Names the field for people and assistive tech	for must match the control id
submit	Triggers sending the form	Prefer type="submit" on buttons

اسکلت مینیمال فرم

با ظرف و دو attribute شروع کنید. action تمرینی برای یادگیری ساختار کافی است.

Minimal form skeleton

html

<form action="/subscribe" method="post">
<!-- fields go here -->
</form>

خواندن اسکلت

form مرز ارسال است
action مسیر دریافت
method=post داده در بدنهٔ درخواست
method=get داده در URL
بدون سرور واقعی submit ممکن است ۴۰۴ شود — برای یادگیری نشانه اشکال ندارد

فیلد برچسب‌دار + ارسال

حداقل یک فیلد و راه ارسال. for با id جور شود؛ name داشته باشید.

Subscribe form with label

html

<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Subscribe</button>
</form>

خواندن دموی اشتراک

for و id به هم وصل‌اند
name کلید payload است
type=email راهنمای مرورگر است
required چک سبک کلاینت است
button type=submit فرم را می‌فرستد

GET در برابر POST (اولین نگاه)

get برای جستجوی قابل بوکمارک؛ post وقتی داده نباید در نوار آدرس بماند. برای تمرین تماس‌مانند post را انتخاب کنید.

تمرین — فرم کوچک اشتراک

form با method=post و action تمرینی
input ایمیل برچسب‌دار با id/for و name
button type=submit
رندر را چک کنید
موقتاً input را بیرون form ببرید
برگردانید و name را تأیید کنید
جمله: form + action/method + کنترل نام‌دار برچسب‌دار

اشتباهات آسان

input بیرون form
بدون name
دکمه بدون type=submit
label یا for/id ناسازگار
قاطی کردن action و method
انتظار بک‌اند از صفحهٔ ایستا

خلاصه

form کنترل‌ها را برای یک ارسال می‌پیچد
action و method هدف و شیوه را می‌گویند
label و name فیلد را قابل استفاده و قابل ارسال می‌کنند
بعدی: attributeهای فرم

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود