عناصر فرم HTML
ویژگی‌های فرم خود تگ form را دقیق کردند. عناصر فرم قطعات داخل آن تگ‌اند — برچسب، ناحیهٔ متن، فهرست، دکمه و گروه‌بندی. این جلسه جعبه‌ابزار رایج را نقشه می‌کند. انواع عمیق input بعدی است.
چرا عناصر فرم مهم‌اند
فرم برهنه با فقط attribute پاسخ جمع نمی‌کند. کاربر به کنترل نیاز دارد. انتخاب textarea به‌جای input تک‌خطی یا select به‌جای متن آزاد، هم کاربرد و هم داده را عوض می‌کند.
پاسخ مستقیم
۱) هر کنترل دیدنی را با label جفت کنید. ۲) input برای بسیاری کنترل‌های تک‌خطی/کلیدی. ۳) textarea برای چندخطی. ۴) select+option برای فهرست ثابت. ۵) button برای عمل. ۶) fieldset+legend برای گروه. action/method روی form بیرونی می‌مانند.
📊 Common form pieces
| Element | Role | Beginner tip |
|---|---|---|
| label | Names a control for humans and assistive tech | Match for= to the control id |
| input | Single-line text, email, checks, radios, … | Types catalog is the next lesson |
| textarea | Multi-line text | Prefer over input for bios and messages |
| select / option | Choose from a fixed list | Each option needs a value |
| button | submit, reset, or generic action | Default in a form is often submit — set type explicitly |
| fieldset / legend | Group related controls with a title | legend is the accessible group name — not a plain div |
fieldset پروفایل با کنترل‌های ترکیبی
ویرایشگر کوچک پروفایل: یک گروه، bio چندخطی، سطح از فهرست، دکمهٔ ذخیره. fieldset/legend بخش را قاب می‌کنند؛ هر کنترل label و name خودش را دارد.
Profile fieldset with controls
html<form action="/profile" method="post">
<fieldset>
<legend>Profile</legend>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label for="level">Level</label>
<select id="level" name="level">
<option value="beginner">Beginner</option>
<option value="middle">Middle</option>
<option value="advanced">Advanced</option>
</select>
<button type="submit">Save</button>
</fieldset>
</form>خواندن دموی پروفایل
- fieldset+legend گروه Profile را نام می‌گذارند
- textarea برای bio بهتر از input تک‌خطی است
- select/option مقدار سطح را محدود می‌کند
- هر کنترل id برای label و name برای کلید ارسال دارد
- button type=submit کل فرم را می‌فرستد
- action/method از درس قبل روی form بیرونی‌اند
ترجیحات: رادیو و نوع دکمه
گاهی پاسخ یکی از چند گزینهٔ انحصاری است. رادیوها name مشترک دارند. روی هر گزینه label بگذارید. submit را با reset (پاک‌کردن — با احتیاط) و button (بدون ارسال خودکار) مقایسه کنید.
Preferences radios and buttons
html<form action="/prefs" method="post">
<fieldset>
<legend>Theme</legend>
<label>
<input type="radio" name="theme" value="light" checked>
Light
</label>
<label>
<input type="radio" name="theme" value="dark">
Dark
</label>
</fieldset>
<button type="submit">Save prefs</button>
<button type="reset">Clear</button>
</form>خواندن دموی ترجیحات
- رادیوهای هم‌نام یک گروه انحصاری می‌سازند
- پیچیدن هر رادیو در label متن را قابل کلیک می‌کند
- fieldset/legend عنوان Theme را می‌دهد
- submit می‌فرستد؛ reset پیش‌فرض را برمی‌گرداند — ذخیره نیست
- بقیهٔ typeهای input در درس بعد
انتخاب کنترل درست
- پاسخ کوتاه/ایمیل/رمز/کلید: input (انواع بعداً)
- متن پاراگرافی: textarea
- انتخاب از فهرست ثابت: select+option یا رادیو برای چند گزینهٔ نمایان
- بخش را گروه کنید: fieldset+legend
- هر کنترل را نام بگذارید: label
- ارسال: button type=submit
تمرین — سرهم کردن عناصر فرم
- دموی پروفایل را کپی کنید؛ legend و یک option اضافه کنید
- موقتاً textarea را با input عوض کنید
- fieldset دوم برای یادداشت تماس
- رادیوهای تم؛ روی label کلیک کنید
- Clear سپس Save — reset پست نمی‌کند
- یک کنترل را بیرون form بگذارید
- جمله: عناصر فرم کنترل‌های برچسب‌دار داخل‌اند؛ attribute روی تگ form لایهٔ جداست
اشتباهات آسان
- کنترل بدون label
- عنوان div به‌جای legend داخل fieldset
- submit یا فیلد بیرون form
- input تک‌خطی برای پیام بلند
- فراموشی name
- فکر کردن reset داده را سرور ذخیره می‌کند
- خیال اینکه این درس action/method را عوض می‌کند
خلاصه
- عناصر فرم کنترل‌ها و کمک‌های داخل form هستند
- label، input، textarea، select/option، button، fieldset/legend بیشتر UI مبتدی را پوشش می‌دهند
- همیشه برچسب بزنید؛ مرتبط‌ها را fieldset کنید
- کنترل را با نوع سؤال جور کنید
- attribute فرم و انواع input لایه‌های جدا هستند
- بعدی: انواع input
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود