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

ویژگی‌های form روی input در HTML

درس قبل با required و placeholder و بازه رفتار فیلد را ریز کرد. ویژگی‌های form روی input سؤال دیگری می‌پرسند: کدام فرم مالک این کنترل است، و آیا یک دکمه می‌تواند موقتاً action را عوض کند؟ ستارهٔ درس form="id" روی کنترل بیرون از تگ form است. form* روی دکمهٔ submit مقصد را فقط برای همان کلیک تغییر می‌دهد.

چرا ارتباط با form مهم است

بیشتر فیلدها داخل form می‌نشینند. گاهی چیدمان کنترل را جای دیگر می‌گذارد — فوتر چسبان، سایدبار، نوار ابزار. بدون ارتباط، آن کنترل بیرون به payload نمی‌پیوندد. ویژگی form با id فرم وصل می‌کند. تو در تو پیش‌فرض شفاف‌تر است؛ ارتباط راه فرار برای چیدمان سخت است.

پاسخ مستقیم

۱) روی form یک id بگذارید. ۲) روی کنترل بیرون form="همان-id". ۳) همچنان name و label لازم است. ۴) روی دکمهٔ submit اختیاری formaction، formmethod، formenctype، formnovalidate یا formtarget فقط برای همان کلیک override می‌کند. ۵) این مالکیت و مسیریابی ارسال است — نه قاعده‌های ارزش درس قبل.

📊 Form association and submit overrides

Attribute	Where	Beginner tip
form	input (or other control)	Value must match the form’s id exactly
formaction	submit button	Overrides form action for that click only
formmethod	submit button	Overrides method (get/post) for that click
formenctype	submit button	Overrides enctype when uploading via that button
formtarget	submit button	Overrides where the response opens (_blank, etc.)

تسویه: فیلد بیرون از form

فرم کوتاه checkout ایمیل و تعداد را داخل نگه می‌دارد. کد تخفیف دیرتر در مارکاپ می‌آید — با label و name — و با form="checkout" عضو می‌شود.

Outside input via form id

html

<form id="checkout" action="/checkout" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>

<label for="qty">Qty</label>
<input id="qty" name="qty" type="number" min="1" value="1">

<button type="submit">Pay</button>
</form>

<p>Promo field rendered later in the layout:</p>
<label for="promo">Promo code</label>
<input id="promo" name="promo" type="text" form="checkout"
placeholder="SAVE10">

خواندن دموی checkout

id=checkout قلاب فیلد بیرون است
form=checkout روی promo آن را به ارسال وصل می‌کند
name=promo همچنان کلید payload است
ایمیل و qty داخل‌اند و form= نمی‌خواهند
label برای همهٔ کنترل‌های دیدنی لازم است
required/min می‌توانند باشند؛ تمرکز این درس نیستند

دو دکمه: override کردن action

گاهی یک فرم دو مقصد دارد — پیش‌نویس و انتشار. یک form نگه دارید؛ روی هر دکمه formaction (و در صورت نیاز formmethod) جدا بگذارید. فقط همان کلیک عوض می‌شود.

Submit overrides with formaction

html

<form id="article" action="/articles/publish" method="post">
<label for="title">Title</label>
<input id="title" name="title" type="text" required>

<label for="body">Body</label>
<input id="body" name="body" type="text">

<button type="submit">Publish</button>
<button type="submit" formaction="/articles/draft"
formmethod="post">Save draft</button>
</form>

خواندن دموی دو دکمه

مسیر پیش‌فرض از action فرم است
دکمهٔ draft با formaction به مسیر دیگر می‌فرستد
formmethod=post روی draft نیت را نگه می‌دارد
هر دو دکمه همان فیلدهای نام‌دار را می‌فرستند
form= مالکیت است؛ formaction مسیریابی دکمه — شغل جدا
درس بعد: textarea برای متن چندخطی

انتخاب ارتباط در برابر override

فیلد بیرون درخت form: form="form-id"
همان فیلدها، URL ارسال متفاوت: formaction روی دکمه
method متفاوت برای یک کلیک: formmethod
encoding آپلود برای یک کلیک: formenctype
رد کردن بررسی مرورگر (نادر): formnovalidate
باز کردن پاسخ جای دیگر: formtarget
وقتی چیدمان اجازه می‌دهد تو در تو را ترجیح دهید
با required/placeholder درس قبل قاطی نکنید

تمرین — مالکیت و override

دموی checkout؛ form= را از promo بردارید و پیش‌بینی کنید — سپس برگردانید
id را غلط بنویسید و ببینید ارتباط می‌شکند
فیلد بیرون دوم (notes) با form=checkout و name خودش
در دموی مقاله formaction پیش‌نویس را جابه‌جا کنید
موقتاً formmethod=get روی draft
جمله: form= مالک را انتخاب می‌کند؛ formaction فقط مسیر همان دکمه را عوض می‌کند
promo را داخل form بنویسید و form= را حذف کنید — وقتی ممکن است تو در تو شفاف‌تر است

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

غلط املایی بین id فرم و مقدار form=
form= بدون name
زیاده روی فیلد جدا وقتی تو در تو کافی است
قاطی با required/placeholder/disabled درس قبل
قاطی form= (مالکیت) با formaction (override دکمه)
فرض اینکه هر کنترلی form= می‌خواهد — داخل‌ها از قبل عضوند
formnovalidate به‌جای درست کردن فیلد نامعتبر

خلاصه

form="id" کنترل بیرون را به فرم وصل می‌کند
id منطبق روی form لازم است؛ name و label همچنان مهم‌اند
دکمه‌ها با formaction و formmethod و form* مرتبط override می‌کنند
وقتی می‌شود تو در تو؛ وقتی چیدمان مجبور کند associate کنید
مالکیت/مسیر ≠ قاعده‌های فیلد درس قبل
بعدی: textarea برای متن چندخطی

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

آماده شروع

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

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

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

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

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