درس ۲۹ از ۴۵ · صفحه‌های وب

فرم‌ها

فرم راهی است که صفحه با آن گوش می‌دهد. این درس همه‌ی عنصرهای فرم و همه‌ی نوع‌های ورودی را می‌گوید، ویژگی‌هایی که مرورگر را وادار می‌کنند آنچه نوشته شده را بسنجد، و اینکه مقدارها را چطور در برنامه‌ی خودتان بخوانید. هر موضوع نمونه‌ی زنده دارد و نمونه‌هایی که به بازدیدکننده واکنش نشان می‌دهند در پیش‌نمایش واقعاً کار می‌کنند.

در این درس

فرم و ارسال
برچسب‌ها
نوع‌های ورودی
بگذارید مرورگر بسنجد
متن بلندتر
تیک، رادیویی و گروه‌ها
برگزیدن از فهرست
دکمه‌ها
نشان دادن نتیجه
پرونده‌ها
تاریخ شمسی
مرجع: همه‌ی عنصرهای فرم
خودتان امتحان کنید

فرم و ارسال

فرم کنترل‌ها را نگه می‌دارد و می‌داند کجا بفرستدشان. مقصد ارسال (action) نشانی‌ای است که داده را می‌گیرد و روش (method) چگونگی رفتن آن: دریافت (get) داده را در نشانی می‌گذارد و برای جستجو مناسب است، ارسال (post) آن را در بدنه‌ی درخواست می‌گذارد و برای هر چیزی که چیزی را تغییر می‌دهد یا خصوصی است درست است. وقتی فرم ورودی پرونده دارد رمزگذاری = "multipart/form-data" را اضافه کنید. ویژگی‌های دیگر فرم در مرجع پایین هستند: تکمیل خودکار، بدون اعتبارسنجی، هدف، رابطه، نویسه‌گان پذیرفته و نام.

ارسال واقعی از صفحه بیرون می‌برد، و پیش‌نمایش‌های این درس باید روی آن بمانند. برای همین بیشتر نمونه‌ها به دکمه گوش می‌دهند و خودشان تصمیم می‌گیرند چه شود. ویژگی کلیک دکمه‌ی ارسال تابعی است که وقتی دکمه فشرده شود اجرا می‌شود. تابع رویداد را می‌گیرد و دام.جلوگیری پیش فرض کار پیش‌فرض، یعنی فرستادن فرم، را می‌گیرد. این کار سنجش‌های مرورگر را هم کنار می‌گذارد، پس تابع خودش آن‌ها را می‌خواهد: reportValidity همه‌ی فیلدها را می‌سنجد و پیام مرورگر را نزدیک نخستین فیلد بد نشان می‌دهد، و برگردان منطقی پاسخش را درست یا نادرست می‌کند. بعد هر فیلد را با دام.دریافت مقدار(دام.با شناسه("id")) می‌خوانید و از متن هر طور خواستید استفاده می‌کنید. رویداد همان پارامتر ساده‌ی صحیح۶۴ تابع است.

در صفحه‌ی خودتان می‌توانید همین تابع را به ویژگی ارسال خود فرم بدهید. آن‌وقت مرورگر نخست سنجش‌هایش را انجام می‌دهد و فقط وقتی گذشتند تابع شما را صدا می‌زند، پس reportValidity لازم نیست.

web-forms-signup.salam

واردسازی دام

تابع عضویت(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
    اگر دام.فراخوان(دام.با شناسه("sign"), "reportValidity") برگردان منطقی:
        نام := دام.دریافت مقدار(دام.با شناسه("name"))
        ایمیل := دام.دریافت مقدار(دام.با شناسه("mail"))
        دام.تنظیم متن(دام.با شناسه("out"), "خوش آمدید " + نام + ". برایتان به نشانی " + ایمیل + " می‌نویسیم.")
    پایان
پایان

صفحه:
    عنوان = "عضویت"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "24rem" پایان
    سراسری: گزینشگر = "label" نمایش = "block" فضا = "0.8rem 0 0.2rem" پایان
    سراسری: گزینشگر = "input" فاصله = 6 عرض = "100%" اندازه جعبه = "border-box" پایان
    فرم: شناسه = "sign"
        برچسب: برای = "name" محتوا = "نام شما" پایان
        ورودی: شناسه = "name" نام = "name" الزامی = درست جانگهدار = "علی رضایی" پایان
        برچسب: برای = "mail" محتوا = "ایمیل" پایان
        ورودی: شناسه = "mail" نام = "mail" نوع = ایمیل الزامی = درست جانگهدار = "[email protected]" پایان
        دکمه: نوع = ارسال کلیک = عضویت محتوا = "عضو شو" فضا = "1rem 0" فاصله = "6px 18px" پایان
    پایان
    پاراگراف: شناسه = "out" رنگ = "#0f766e" پایان
پایان

فیلدها را خالی بگذارید و «عضو شو» را بزنید: مرورگر پیامش را نشان می‌دهد و دیگر چیزی نمی‌شود، چون reportValidity جواب منفی داد. در فیلد ایمیل چیزی بنویسید که نشانی نیست و باز نمی‌پذیرد. فقط فرم کامل از اگر می‌گذرد، و برای همین می‌توانید به مقدارهای درونش اعتماد کنید، دست‌کم تا جایی که سنجش مرورگر می‌رسد.

سنجش مرورگر برای راحتی بازدیدکننده است، نه برای امنیت. هر کسی می‌تواند بی‌صفحه‌ی شما درخواست بفرستد. آنچه به کارگزار شما می‌رسد باید در کارگزار دوباره سنجیده شود.

برچسب‌ها

هر کنترل یک برچسب لازم دارد. دو راه برای وصل کردنشان هست. به کنترل یک شناسه بدهید و همان شناسه را در برای برچسب بنویسید، همان‌طور که نمونه‌ی عضویت می‌کند: سلام هنگام ترجمه می‌سنجد که عنصری با آن شناسه هست، پس غلط تایپی پیوند را بی‌صدا نمی‌شکند. یا کنترل را درون برچسب بگذارید، همان‌طور که نمونه‌ی پیتزا پایین‌تر می‌کند، و دیگر برای لازم نیست. در هر دو حالت کلیک روی متن برچسب کنترل را فوکوس می‌کند یا تیک می‌زند، و صفحه‌خوان وقتی کنترل فوکوس می‌گیرد برچسبش را می‌خواند.

ویژگی جانگهدار برچسب نیست. نکته‌ای است در جعبه‌ی خالی که با تایپ ناپدید می‌شود و بسیاری از مردم متن خاکستری را سخت می‌خوانند. آن را برای نمونه‌ی قالب به کار ببرید و برچسب را نگه دارید.

نوع‌های ورودی

ورودی یک عنصر با چهره‌های بسیار است. نوع چهره، صفحه‌کلیدی که تلفن نشان می‌دهد و آنچه مرورگر می‌سنجد را تعیین می‌کند. بدون نوع، جعبه‌ی متن است. جدول هر نوعی را که سلام نام برده با نام انگلیسی‌اش آورده است.

نوع	انگلیسی	بازدیدکننده چه می‌بیند	مرورگر چه می‌سنجد
`متن`	text	یک جعبه‌ی تک‌خطی.	فقط `کمینه طول` و `بیشینه طول` و `الگو`.
`گذرواژه`	password	جعبه‌ای که نویسه‌ها را پنهان می‌کند.	مثل متن. `تکمیل خودکار` را `current-password` یا `new-password` بگذارید.
`ایمیل`	email	جعبه و صفحه‌کلید تلفن با کلید @.	مقدار شبیه `name@host` باشد. با `چندتایی` فهرستی جدا شده با ویرگول است.
`عدد`	number	جعبه‌ای با پیکان بالا و پایین و صفحه‌کلید عددی.	عدد باشد، میان `کمینه` و `بیشینه` و روی شبکه‌ی `گام`.
`تلفن`	tel	جعبه و صفحه‌کلید شماره‌گیری.	هیچ، چون شماره‌ها بسیار فرق دارند. یک `الگو` بگذارید.
`نشانی`	url	جعبه و صفحه‌کلیدی با اسلش و نقطه.	نشانی کامل با پیشوند، مثل `https://`.
`جستجو`	search	جعبه‌ای که اغلب دکمه‌ی پاک‌کردن دارد و روی صفحه‌کلید کلید جستجو.	هیچ.
`تیک`	checkbox	مربعی که روشن یا خاموش است.	با `الزامی` باید تیک خورده باشد. فقط وقتی تیک خورده فرستاده می‌شود.
`رادیویی`	radio	نقطه‌ای گرد. کنترل‌هایی با `نام` یکسان گروهی می‌سازند که یکی‌شان برگزیده است.	با `الزامی` باید یکی از گروه برگزیده شود.
`ارسال`	submit	دکمه‌ای که فرم را می‌فرستد. `مقدار` برچسب آن است.	سنجش همه‌ی فیلدهای دیگر را اجرا می‌کند.
`دکمه`	button	دکمه‌ای که تا به آن رویداد `کلیک` ندهید کاری نمی‌کند.	هیچ.
`بازنشانی`	reset	دکمه‌ای که همه‌ی فیلدها را به مقدار آغازین برمی‌گرداند.	هیچ.
`تاریخ`	date	انتخابگر تقویم. مقدار به شکل `2026-10-26` نوشته می‌شود.	تاریخ واقعی، میان `کمینه` و `بیشینه`.
`زمان`	time	انتخابگر ساعت. مقدار به شکل `14:30` نوشته می‌شود.	ساعت واقعی، میان `کمینه` و `بیشینه`.
`رنگ ورودی`	color	انتخابگر رنگ. مقدار به شکل `#ff8800` نوشته می‌شود.	هیچ. همیشه رنگی دارد.
`بازه`	range	لغزنده‌ای میان `کمینه` و `بیشینه`.	هیچ. همیشه مقداری دارد.
`پرونده`	file	دکمه‌ای که پنجره‌ی انتخاب پرونده را باز می‌کند. `پذیرش` و `چندتایی` شکلش می‌دهند.	با `الزامی` باید پرونده‌ای برگزیده شود.
`پنهان`	hidden	هیچ. مقداری را می‌فرستد که بازدیدکننده نمی‌بیند.	هیچ. به مقدارش اعتماد نکنید: بازدیدکننده می‌تواند آن را عوض کند.
`ناحیه متن`	textarea	جعبه‌ای چندخطی، همان عنصر `متن بلند`.	مثل `متن بلند`.
`تاریخ شمسی`	jalali date	جعبه‌ای که خودش رقم فارسی و اسلش می‌نویسد.	تاریخ شمسی واقعی. بخش مربوط به آن را پایین‌تر ببینید.

نوع‌های دیگر HTML، مثل datetime-local و month و week و image، در فهرست سلام نیستند اما می‌توانید آن‌ها را به شکل رشته‌ی نقل‌قول‌دار بنویسید، مثلاً نوع = "month". نوع image دکمه‌ی ارسالی است که به شکل تصویر کشیده می‌شود، و برای تصویر نشانی، برای متن جایگزینش جایگزین و نیز عرض و ارتفاع را می‌گیرد.

web-forms-types.salam

صفحه:
    عنوان = "نوع‌های ورودی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    فرم:
        نمایش = "grid"
        ستون های شبکه = "7rem 12rem"
        شکاف = "0.6rem 1rem"
        برچسب: برای = "n" محتوا = "عدد" پایان
        ورودی: شناسه = "n" نوع = عدد پایان
        برچسب: برای = "p" محتوا = "تلفن" پایان
        ورودی: شناسه = "p" نوع = تلفن پایان
        برچسب: برای = "u" محتوا = "نشانی وب" پایان
        ورودی: شناسه = "u" نوع = نشانی پایان
        برچسب: برای = "q" محتوا = "جستجو" پایان
        ورودی: شناسه = "q" نوع = جستجو پایان
        برچسب: برای = "d" محتوا = "تاریخ" پایان
        ورودی: شناسه = "d" نوع = تاریخ پایان
        برچسب: برای = "t" محتوا = "ساعت" پایان
        ورودی: شناسه = "t" نوع = زمان پایان
        برچسب: برای = "c" محتوا = "رنگ" پایان
        ورودی: شناسه = "c" نوع = "رنگ ورودی" پایان
        برچسب: برای = "v" محتوا = "صدا" پایان
        ورودی: شناسه = "v" نوع = بازه پایان
    پایان
پایان

فرم بالا شبکه‌ای با دو ستون است که با نمایش = "grid" و ستون های شبکه ساخته شده تا هر برچسب کنار کنترلش بایستد. شکاف فاصله‌ی میان ردیف‌ها و ستون‌هاست. آن را روی تلفن باز کنید و ببینید هر کنترل صفحه‌کلید خودش را می‌آورد.

بگذارید مرورگر بسنجد

بیشتر سنجش‌ها از ویژگی‌های خود کنترل می‌آیند. الزامی مقدار خالی را ممنوع می‌کند. کمینه طول و بیشینه طول شمار نویسه‌ها را کران می‌دهند و الگو عبارتی باقاعده می‌گیرد که کل مقدار باید با آن جور باشد. برای عددها و تاریخ‌ها کمینه و بیشینه و گام بازه و شبکه‌ی مقدارهای مجاز را تعیین می‌کنند. اندازه فقط پهنای جعبه‌ی متن را عوض می‌کند و چیزی نمی‌سنجد. فقط خواندنی جلوی ویرایش مقدار را می‌گیرد ولی باز هم فرستاده‌اش می‌کند، و غیرفعال جلوی فرستادنش را هم می‌گیرد. تمرکز خودکار هنگام باز شدن صفحه مکان‌نما را در فیلد می‌گذارد، چندتایی چند پرونده یا نشانی را مجاز می‌کند، و تکمیل خودکار به مرورگر می‌گوید فیلد چه نگه می‌دارد تا مقدار ذخیره‌شده را پیشنهاد کند.

جدا از پیامی که مرورگر نشان می‌دهد، برنامه‌ی شما هم می‌تواند از هر کنترل درباره‌ی validity (اعتبارش) بپرسد. نمونه آن را با هر ضربه‌ی کلید و رویداد ورودی می‌خواند. دام.دریافت خاصیت(فیلد, "validity") شیئی می‌دهد که خاصیت‌هایش درست یا نادرست‌اند: valueMissing وقتی فیلد الزامی خالی است، tooShort وقتی از کمینه طول کوتاه‌تر است، patternMismatch وقتی با الگو جور نیست، و rangeUnderflow و rangeOverflow وقتی عدد بیرون از کمینه و بیشینه است. دام.هدف رویداد(رویداد) به کنشگر مشترک می‌گوید برای کدام فیلد صدا زده شده است.

web-forms-validate.salam

واردسازی دام

تابع بررسی(رویداد: صحیح۶۴):
    میدان := دام.هدف رویداد(رویداد)
    ی := دام.دریافت خاصیت(میدان, "validity")
    ناپایا متن := "درست است."
    اگر دام.دریافت خاصیت منطقی(ی, "valueMissing"): متن = "پر کردن این بخش لازم است."
    وگرنه دام.دریافت خاصیت منطقی(ی, "tooShort"): متن = "دست‌کم ۳ نویسه بنویسید."
    وگرنه دام.دریافت خاصیت منطقی(ی, "patternMismatch"): متن = "فقط حرف کوچک انگلیسی، بدون فاصله."
    وگرنه دام.دریافت خاصیت منطقی(ی, "rangeUnderflow"): متن = "سن باید ۱۸ یا بیشتر باشد."
    وگرنه دام.دریافت خاصیت منطقی(ی, "rangeOverflow"): متن = "سن را تا ۹۹ وارد کنید."
    پایان
    دام.تنظیم متن(دام.با شناسه(دام.دریافت خاصیت رشته ای(میدان, "id") + "-note"), متن)
پایان

صفحه:
    عنوان = "اعتبارسنجی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سبک: محتوا = "input:user-invalid { border: 2px solid #dc2626 } input:user-valid { border: 2px solid #16a34a }" پایان
    فرم:
        برچسب: برای = "user" محتوا = "نام کاربری" پایان
        ورودی: شناسه = "user" الزامی = درست کمینه طول = ۳ الگو = "[a-z]+" ورودی = بررسی پایان
        پاراگراف: شناسه = "user-note" محتوا = "دست‌کم ۳ حرف." پایان
        برچسب: برای = "age" محتوا = "سن" پایان
        ورودی: شناسه = "age" نوع = عدد الزامی = درست کمینه = ۱۸ بیشینه = ۹۹ ورودی = بررسی پایان
        پاراگراف: شناسه = "age-note" محتوا = "از ۱۸ تا ۹۹." پایان
    پایان
پایان

دو رنگ کادر از یک قاعده‌ی CSS می‌آیند که با عنصر سبک در سطح صفحه نوشته شده: input:user-invalid و input:user-valid. این‌ها فقط وقتی جور می‌شوند که بازدیدکننده به فیلد دست زده و از آن بیرون آمده باشد، پس فرمی که هنوز خالی است از ثانیه‌ی اول قرمز نیست. :invalid قدیمی‌تر فوراً جور می‌شود و روی فرم تازه عصبانی به نظر می‌رسد.

یک کنشگر می‌تواند به چند فیلد خدمت کند. دام.هدف رویداد(رویداد) کنترلی است که رویداد را راه انداخته و دام.دریافت خاصیت رشته ای(فیلد, "id") شناسه‌ی آن است، پس پیام فیلدی که user نام دارد به عنصری با شناسه‌ی user-note می‌رود.

متن بلندتر

برای متنی که ممکن است چند سطر شود متن بلند را به کار ببرید. ردیف‌ها و ستون‌ها اندازه‌ی آغازین را می‌دهند، بیشینه طول و کمینه طول طول را، و شکستن خط: با نرم سطرهای بلند فقط روی صفحه می‌شکنند، با سخت شکست سطرها در متنی که فرستاده می‌شود هم می‌آید و به ستون‌ها نیاز دارد. متن میان برچسب‌ها در HTML همان متن آغازین است و در سلام محتوا. ورودی با نوع = "ناحیه متن" همان عنصر است که به شکل دیگری نوشته شده.

وقتی سقفی می‌گذارید، شمارنده‌ای که بگوید چند نویسه مانده لطف کوچکی به بازدیدکننده است. نمونه textLength را از جعبه می‌خواند که نویسه می‌شمارد نه بایت، پس برای متن فارسی هم درست است.

web-forms-textarea.salam

واردسازی دام

پایا سقف := ۸۰

تابع شمارش:
    استفاده شده := دام.دریافت خاصیت عددی(دام.با شناسه("bio"), "textLength") برگردان صحیح۶۴
    دام.تنظیم متن(دام.با شناسه("left"), "" + (سقف - استفاده شده) + " نویسه‌ی باقی‌مانده")
پایان

صفحه:
    عنوان = "متن بلند"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    برچسب: برای = "bio" محتوا = "درباره‌ی شما" پایان
    متن بلند:
        شناسه = "bio"
        نام = "bio"
        ردیف‌ها = ۴
        ستون‌ها = ۴۰
        بیشینه طول = سقف
        جانگهدار = "چند کلمه درباره‌ی خودتان"
        ورودی = شمارش
        نمایش = "block"
        فضا = "0.4rem 0"
    پایان
    ریز: شناسه = "left" محتوا = "۸۰ نویسه‌ی باقی‌مانده" پایان
پایان

تیک، رادیویی و گروه‌ها

تیک یک بله یا خیر است. چند تیک با نام یکسان به شکل فهرستی از آن‌هایی که زده شده‌اند فرستاده می‌شوند. رادیویی یکی از میان چند گزینه است: همه‌ی دکمه‌های رادیویی که نام مشترک دارند به هم تعلق دارند و مرورگر یکی از آن‌ها را برگزیده نگه می‌دارد. مقدار متنی است که وقتی کنترل برگزیده شود فرستاده می‌شود و تیک خورده آن را از ابتدا برمی‌گزیند. برای خواندن انتخاب در برنامه دام.دریافت خاصیت منطقی(کنترل, "checked") را به کار ببرید.

مجموعه‌ی وابسته را در یک گروه فیلد با یک عنوان گروه بگذارید. بازدیدکننده‌ی بینا کادری با عنوان می‌بیند. صفحه‌خوان هنگام ورود به گروه عنوان را به‌عنوان پرسش اعلام می‌کند و بعد هر گزینه را می‌خواند، کاری که ردیفی لخت از دکمه‌های رادیویی نمی‌تواند. فرم نمونه به رویداد تغییر واکنش می‌دهد که برای هر تغییر هر کنترلِ درون فرم روی خود فرم می‌رسد.

web-forms-choices.salam

واردسازی دام

تابع نمایش:
    ناپایا اندازه := "کوچک"
    اگر دام.دریافت خاصیت منطقی(دام.با شناسه("s-large"), "checked"): اندازه = "بزرگ" پایان
    ناپایا افزودنی‌ها := ""
    اگر دام.دریافت خاصیت منطقی(دام.با شناسه("x-cheese"), "checked"): افزودنی‌ها = افزودنی‌ها + " پنیر" پایان
    اگر دام.دریافت خاصیت منطقی(دام.با شناسه("x-olives"), "checked"): افزودنی‌ها = افزودنی‌ها + " زیتون" پایان
    دام.تنظیم متن(دام.با شناسه("out"), "اندازه: " + اندازه + ". افزودنی‌ها:" + افزودنی‌ها)
پایان

صفحه:
    عنوان = "سفارش پیتزا"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "label" نمایش = "block" فضا = "0.3rem 0" پایان
    فرم: تغییر = نمایش
        گروه فیلد:
            عنوان گروه: محتوا = "اندازه" پایان
            برچسب: ورودی: شناسه = "s-small" نوع = رادیویی نام = "size" مقدار = "small" تیک خورده = درست پایان تکه: محتوا = " کوچک" پایان پایان
            برچسب: ورودی: شناسه = "s-large" نوع = رادیویی نام = "size" مقدار = "large" پایان تکه: محتوا = " بزرگ" پایان پایان
        پایان
        گروه فیلد:
            عنوان گروه: محتوا = "افزودنی‌ها" پایان
            برچسب: ورودی: شناسه = "x-cheese" نوع = تیک نام = "extra" مقدار = "cheese" پایان تکه: محتوا = " پنیر" پایان پایان
            برچسب: ورودی: شناسه = "x-olives" نوع = تیک نام = "extra" مقدار = "olives" پایان تکه: محتوا = " زیتون" پایان پایان
        پایان
    پایان
    پاراگراف: شناسه = "out" محتوا = "اندازه: کوچک. افزودنی‌ها:" پایان
پایان

یک گروه فیلد را می‌شود یک‌جا خاموش هم کرد: غیرفعال روی گروه همه‌ی کنترل‌های درونش را غیرفعال می‌کند. نمونه‌ی بعد یک تیک را می‌خواند و با دام.تنظیم خاصیت منطقی مقدار disabled را می‌گذارد.

web-forms-fieldset.salam

واردسازی دام

تابع تعویض:
    همان := دام.دریافت خاصیت منطقی(دام.با شناسه("same"), "checked")
    دام.تنظیم خاصیت منطقی(دام.با شناسه("ship"), "disabled", همان)
پایان

صفحه:
    عنوان = "فیلدهای گروه‌بندی‌شده"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" بیشینه عرض = "26rem" پایان
    سراسری: گزینشگر = "fieldset input" نمایش = "block" فضا = "0.4rem 0" فاصله = 5 پایان
    فرم:
        گروه فیلد:
            عنوان گروه: محتوا = "نشانی صورت‌حساب" پایان
            ورودی: نام = "street" جانگهدار = "خیابان" پایان
            ورودی: نام = "town" جانگهدار = "شهر" پایان
        پایان
        برچسب: ورودی: شناسه = "same" نوع = تیک تغییر = تعویض پایان تکه: محتوا = " ارسال به همین نشانی" پایان پایان
        گروه فیلد: شناسه = "ship"
            عنوان گروه: محتوا = "نشانی ارسال" پایان
            ورودی: نام = "street2" جانگهدار = "خیابان" پایان
            ورودی: نام = "town2" جانگهدار = "شهر" پایان
        پایان
    پایان
پایان

برگزیدن از فهرست

انتخاب فهرست کشویی است و گزینه هر سطر آن. بازدیدکننده متن گزینه را می‌بیند و فرم مقدار آن را می‌فرستد، پس کدی کوتاه بدهید که کارگزارتان می‌فهمد. انتخاب‌شده گزینه‌ی آغازین را برمی‌دارد و غیرفعال یکی را خاکستری می‌کند: سطر نخست که هم غیرفعال و هم انتخاب‌شده است راهنمای خوبی می‌شود، مثل «یک شهر بردارید». گروه گزینه بالای چند گزینه عنوانی می‌گذارد و برچسب لازم دارد. چندتایی فهرست را به جعبه‌ای تبدیل می‌کند که چند سطرش را می‌شود برگزید و اندازه می‌گوید چند سطر دیده شود.

web-forms-select.salam

واردسازی دام

تابع برگزین:
    دام.تنظیم متن(دام.با شناسه("out"), "شما انتخاب کردید: " + دام.دریافت مقدار(دام.با شناسه("city")))
پایان

صفحه:
    عنوان = "فهرست کشویی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    برچسب: برای = "city" محتوا = "در کدام شهر زندگی می‌کنید؟ " پایان
    انتخاب: شناسه = "city" نام = "city" تغییر = برگزین
        گزینه: مقدار = "none" محتوا = "یک شهر بردارید" غیرفعال = درست انتخاب‌شده = درست پایان
        گروه گزینه: برچسب = "ایران"
            گزینه: مقدار = "tabriz" محتوا = "تبریز" پایان
            گزینه: مقدار = "shiraz" محتوا = "شیراز" پایان
        پایان
        گروه گزینه: برچسب = "همسایه‌ها"
            گزینه: مقدار = "baku" محتوا = "باکو" پایان
            گزینه: مقدار = "kabul" محتوا = "کابل" غیرفعال = درست پایان
        پایان
    پایان
    پاراگراف: شناسه = "out" محتوا = "شما انتخاب کردید: none" پایان
پایان

وقتی بازدیدکننده باید بتواند چیزی هم بنویسد که در فهرست شما نیست، فهرست پیشنهاد را به کار ببرید. فهرستی از پیشنهادهاست که ظاهر خودش را ندارد. به آن یک شناسه بدهید و در ویژگی فهرست پیشنهادها یک ورودی متنی نامش را ببرید: مرورگر هنگام تایپ پیشنهادهای جور را می‌آورد.

web-forms-datalist.salam

واردسازی دام

تابع پژواک:
    دام.تنظیم متن(دام.با شناسه("out"), "جستجو برای " + دام.دریافت مقدار(دام.با شناسه("lang")))
پایان

صفحه:
    عنوان = "پیشنهادها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    برچسب: برای = "lang" محتوا = "زبان مورد علاقه " پایان
    ورودی: شناسه = "lang" فهرست پیشنهادها = "langs" جانگهدار = "تایپ کنید" ورودی = پژواک پایان
    فهرست پیشنهاد: شناسه = "langs"
        گزینه: مقدار = "سلام" پایان
        گزینه: مقدار = "پایتون" پایان
        گزینه: مقدار = "راست" پایان
        گزینه: مقدار = "اسکیم" پایان
    پایان
    پاراگراف: شناسه = "out" محتوا = "جستجو برای" پایان
پایان

دکمه‌ها

دکمه یک نوع دارد. دکمه‌ی ارسال فرم را می‌فرستد، دکمه‌ی بازنشانی همه‌ی فیلدها را برمی‌گرداند و دکمه‌ی دکمه تا وقتی برنامه کاری به آن ندهد هیچ نمی‌کند. درون فرم دکمه‌ی بی‌نوع دکمه‌ی ارسال است، و همین است که بسیاری از فرم‌ها تصادفی فرستاده می‌شوند: نوع را همیشه بنویسید.

دکمه‌ی ارسال با نام و مقدار می‌گوید کدام زده شده، پس یک فرم می‌تواند هم «ذخیره» داشته باشد هم «حذف». دکمه‌ها می‌توانند برای یک بار فشردن فرم را هم لغو کنند: مقصد ارسال فرم، روش فرم، رمزگذاری فرم، هدف فرم و بدون اعتبارسنجی فرم جای ویژگی خود فرم را می‌گیرند. دکمه‌ی «ذخیره‌ی پیش‌نویس» با بدون اعتبارسنجی فرم فرمی نیمه‌پر را می‌فرستد. با فرم = "id" دکمه می‌تواند بیرون از فرمی که به آن تعلق دارد بایستد. در کنشگر ارسال در یک صفحه‌ی واقعی، دام.دریافت خاصیت(رویداد, "submitter") دکمه‌ای است که فشرده شده. در نمونه به‌جای آن هر دکمه کنشگر کلیک خودش را دارد که مقدار دکمه را با دام.دریافت خاصیت رشته ای(دام.هدف رویداد(رویداد), "value") می‌خواند. دکمه‌ی بازنشانی زیر فرم با فرم = "note" به آن تعلق دارد.

web-forms-buttons.salam

واردسازی دام

تابع فشرده(رویداد: صحیح۶۴):
    دام.جلوگیری پیش فرض(رویداد)
    دام.تنظیم متن(دام.با شناسه("out"), "دکمه‌ی فشرده: " + دام.دریافت خاصیت رشته ای(دام.هدف رویداد(رویداد), "value"))
پایان

صفحه:
    عنوان = "دکمه‌ها"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "button" فاصله = "6px 12px" فضا = "0.4rem 0 0 0.4rem" پایان
    فرم: شناسه = "note"
        ورودی: شناسه = "t" نام = "title" جانگهدار = "عنوان" پایان
        دکمه: نوع = ارسال نام = "do" مقدار = "save" کلیک = فشرده محتوا = "ذخیره" پایان
        دکمه: نوع = ارسال نام = "do" مقدار = "draft" کلیک = فشرده محتوا = "ذخیره‌ی پیش‌نویس" پایان
        دکمه: نوع = بازنشانی محتوا = "پاک کردن" پایان
        دکمه: نوع = دکمه مقدار = "help" کلیک = فشرده محتوا = "راهنما" پایان
    پایان
    دکمه: نوع = بازنشانی فرم = "note" محتوا = "پاک کردن از بیرون" پایان
    پاراگراف: شناسه = "out" محتوا = "هنوز دکمه‌ای فشرده نشده." پایان
پایان

دو دسته‌ی دیگر از ویژگی‌ها مال دکمه‌هاست. هدف واشو و کنش واشو عنصری را که ویژگی واشو (popover) دارد بی‌هیچ کدی نشان می‌دهند یا پنهان می‌کنند. فرمان و هدف فرمان فرمانی مثل show-modal به یک پنجره گفتگو می‌دهند. هر دو تازه‌اند، پس مرورگرهای بازدیدکنندگانتان را بسنجید.

نشان دادن نتیجه

سه عنصر به جای پرسیدن مقدار، مقدار نشان می‌دهند. خروجی نتیجه را نگه می‌دارد، مثل عدد کنار لغزنده؛ برای آن فهرست کنترل‌هایی است که نتیجه از آن‌ها حساب شده و سلام شناسه‌ها را می‌سنجد. پیشرفت نواری است برای اینکه چقدر از کار انجام شده، با مقدار از بیشینه. سنجه مقداری را روی مقیاسی معلوم نشان می‌دهد و حد پایین و حد بالا و بهینه به مرورگر می‌گویند کدام بخش مقیاس خوب است: نوار سبز یا زرد یا قرمز می‌شود.

web-forms-gauges.salam

واردسازی دام

تابع جابجایی:
    سطح := دام.دریافت مقدار(دام.با شناسه("level"))
    دام.تنظیم متن(دام.با شناسه("shown"), سطح + " درصد")
    دام.تنظیم خاصیت رشته ای(دام.با شناسه("bar"), "value", سطح)
    دام.تنظیم خاصیت رشته ای(دام.با شناسه("gauge"), "value", سطح)
پایان

صفحه:
    عنوان = "خروجی، پیشرفت و سنجه"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    سراسری: گزینشگر = "progress, meter" نمایش = "block" عرض = "16rem" فضا = "0.6rem 0" پایان
    فرم:
        برچسب: برای = "level" محتوا = "شارژ باتری " پایان
        ورودی: شناسه = "level" نوع = بازه کمینه = ۰ بیشینه = ۱۰۰ مقدار = ۴۰ ورودی = جابجایی پایان
        خروجی: شناسه = "shown" برای = "level" محتوا = "40 درصد" پایان
    پایان
    پیشرفت: شناسه = "bar" مقدار = ۴۰ بیشینه = ۱۰۰ پایان
    سنجه: شناسه = "gauge" مقدار = ۴۰ کمینه = ۰ بیشینه = ۱۰۰ حد پایین = ۲۵ حد بالا = ۷۵ بهینه = ۱۰۰ پایان
پایان

لغزنده را بکشید تا هر سه عوض شوند. پیشرفت و سنجه شبیه‌اند و معنای دیگری دارند. کاری که قرار است تمام شود پیشرفت است. اندازه‌ای که بالا و پایین می‌رود، مثل شارژ باتری، سنجه است.

پرونده‌ها

ورودی پرونده پنجره‌ی انتخاب پرونده را باز می‌کند. پذیرش آنچه را پیشنهاد می‌شود پالایش می‌کند، با نوع‌های MIME مثل image/png، الگوهایی مثل image/* و پسوندهایی مثل .pdf. این یک راحتی است: بازدیدکننده باز هم می‌تواند پرونده‌ی دیگری بردارد، پس نوع را در کارگزار بسنجید. چندتایی چند پرونده را مجاز می‌کند. فرمی که پرونده می‌فرستد باید فرم ارسال با رمزگذاری = "multipart/form-data" باشد. در برنامه دام.دریافت خاصیت(ورودی, "files") فهرست پرونده‌های برگزیده است، دام.تعداد آن‌ها را می‌شمارد و دام.عنصر شماره یکی را برمی‌دارد.

web-forms-file.salam

واردسازی دام

تابع گزارش:
    پرونده‌ها := دام.دریافت خاصیت(دام.با شناسه("pics"), "files")
    تعداد := دام.تعداد(پرونده‌ها)
    ناپایا متن := "پرونده‌ای انتخاب نشده."
    اگر تعداد > ۰: متن = "انتخاب شد: " + دام.دریافت خاصیت رشته ای(دام.عنصر شماره(پرونده‌ها, ۰), "name") پایان
    اگر تعداد > ۱: متن = متن + " و " + (تعداد - ۱) + " پرونده‌ی دیگر" پایان
    دام.تنظیم متن(دام.با شناسه("out"), متن)
پایان

صفحه:
    عنوان = "بارگذاری پرونده"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    فرم: روش = ارسال رمزگذاری = "multipart/form-data"
        برچسب: برای = "pics" محتوا = "تصویرها " پایان
        ورودی: شناسه = "pics" نام = "pics" نوع = پرونده پذیرش = "image/png, image/jpeg, .webp" چندتایی = درست تغییر = گزارش پایان
    پایان
    پاراگراف: شناسه = "out" محتوا = "پرونده‌ای انتخاب نشده." پایان
پایان

تاریخ شمسی

سلام برای تاریخ فارسی نوع ورودی مخصوص خودش را دارد، تاریخ شمسی (در پرونده‌های انگلیسی jalali date). جعبه‌ای متنی است که با هر صفحه‌کلیدی رقم فارسی تایپ می‌کند، اسلش‌ها را خودش می‌گذارد، و وقتی ماه یا روز وجود ندارد به مرورگر می‌گوید تاریخ نامعتبر است، که سال کبیسه را هم رعایت می‌کند. رقم‌های لاتین و عربی که بازدیدکننده بچسباند تبدیل می‌شوند. جعبه رقم‌های ۱۴۰۵/۰۸/۰۴ را نشان می‌دهد و همان تاریخ با رقم لاتین، 1405/08/04، در ویژگی data-value می‌ماند تا برنامه‌ی شما با دام.دریافت ویژگی بخواندش.

web-forms-jalali.salam

واردسازی دام

تابع ثبت:
    روز := دام.دریافت ویژگی(دام.با شناسه("birth"), "data-value")
    دام.تنظیم متن(دام.با شناسه("out"), "مقدار ذخیره‌شده: " + روز)
پایان

صفحه:
    عنوان = "تاریخ شمسی"
    سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
    برچسب: برای = "birth" محتوا = "تاریخ تولد " پایان
    ورودی: شناسه = "birth" نام = "birth" نوع = "تاریخ شمسی" جانگهدار = "۱۳۸۰/۰۱/۰۱" تغییر = ثبت پایان
    پاراگراف: شناسه = "out" محتوا = "مقدار ذخیره‌شده:" پایان
پایان

مقداری که ارسال واقعی فرم می‌فرستد همان متنی است که جعبه نشان می‌دهد، با رقم فارسی. در کارگزار تبدیلش کنید، یا در کنشگر ارسال data-value را بخوانید.

مرجع: همه‌ی عنصرهای فرم

هر عنصر با یک نمونه آمده است و ویژگی‌هایی که فقط مال همان عنصرند زیرش فهرست شده‌اند. ویژگی‌هایی که همه‌ی عنصرها دارند در درس سرصفحه و ویژگی‌های همگانی هستند، و رویدادهایی مثل ارسال و ورودی و تغییر در درس رویدادهای کلید و فرم. نمونه‌ها را مترجم بررسی کرده است، پس هر کدام را می‌توانید درون یک بلوک صفحه: بگذارید. نام‌های انگلیسی هم در هر پرونده کار می‌کنند، اما درس‌های فارسی از نام‌های فارسی استفاده می‌کنند.

`فرم` (English: `form`; HTML: `<form>`)

فرم چیزهایی را که بازدیدکننده می‌نویسد یا برمی‌گزیند جمع می‌کند و به یک نشانی می‌فرستد. ورودی‌ها، دکمه‌ها و دیگر کنترل‌های فرم درون آن می‌روند. فرم می‌تواند به جای فرستادن کد هم اجرا کند: برای رویداد ارسال کنشگری بنویسید که دام.جلوگیری پیش فرض را صدا بزند و خودتان فیلدها را بخواند، همان‌طور که نمونه‌های این درس می‌کنند. فرم‌ها را نمی‌شود درون هم گذاشت.

فرم: مقصد ارسال = "/search" روش = دریافت
    برچسب: برای = "q" محتوا = "جستجو" پایان
    ورودی: شناسه = "q" نام = "q" نوع = جستجو پایان
    دکمه: نوع = ارسال محتوا = "برو" پایان
پایان

ویژگی	کار آن	نمونه
`نام` name	نامی برای فرم تا برنامه‌ها و مرورگر آن را میان فرم‌های صفحه پیدا کنند. به کارگزار فرستاده نمی‌شود. [string]	`فرم: نام = "login" ورودی: نام = "user" جانگهدار = "کاربر" پایان پایان`
`هدف` target	جایی که پاسخ کارگزار نشان داده می‌شود: `همین پنجره` (پنجره‌ی کنونی، پیش‌فرض)، `پنجره جدید`، و `پنجره والد` یا `پنجره اصلی` برای صفحه‌های درون قاب. نام‌های HTML یعنی `_self` و `_blank` و `_parent` و `_top` هم کار می‌کنند. [enum: target]	`فرم: مقصد ارسال = "/report" هدف = "پنجره جدید" دکمه: نوع = ارسال محتوا = "باز کردن گزارش" پایان پایان`
`رابطه` rel	رابطه‌ی صفحه‌ی مقصد را با این صفحه می‌گوید، به شکل فهرستی از واژه‌های جدا شده با فاصله. همراه با `هدف = "پنجره جدید"` بنویسید `noopener` تا صفحه‌ی تازه نتواند به صفحه‌ی شما دست بزند. [token (list)]	`فرم: مقصد ارسال = "/pay" هدف = "پنجره جدید" رابطه = "noopener noreferrer" دکمه: نوع = ارسال محتوا = "پرداخت" پایان پایان`
`تکمیل خودکار` autocomplete	`on` به مرورگر اجازه می‌دهد فیلدها را از روی آنچه به یاد دارد پر کند و `off` از او می‌خواهد این کار را نکند. پیش‌فرض `on` است. هر فیلد می‌تواند با `تکمیل خودکار` خودش این را تغییر دهد. [string]	`فرم: تکمیل خودکار = "off" ورودی: نام = "code" جانگهدار = "کد یک‌بار مصرف" پایان پایان`
`مقصد ارسال` action	نشانی‌ای که هنگام ارسال فرم داده‌ها را می‌گیرد. بدون آن فرم به نشانی خود صفحه فرستاده می‌شود. [url]	`فرم: مقصد ارسال = "/subscribe" روش = ارسال ورودی: نوع = ایمیل نام = "mail" پایان دکمه: نوع = ارسال محتوا = "اشتراک" پایان پایان`
`روش` method	داده‌ها چگونه می‌روند. `دریافت` آن‌ها را در نشانی می‌گذارد، که برای جستجو مناسب است چون نتیجه را می‌شود نشانک کرد. `ارسال` آن‌ها را در بدنه‌ی درخواست می‌گذارد، که برای هر چیزی که داده را تغییر می‌دهد یا خصوصی است درست است. `گفتگو` چیزی نمی‌فرستد و فقط پنجره‌ی گفتگویی را که فرم در آن است می‌بندد. [enum: form_method]	`فرم: مقصد ارسال = "/login" روش = ارسال ورودی: نوع = گذرواژه نام = "secret" پایان دکمه: نوع = ارسال محتوا = "ورود" پایان پایان`
`رمزگذاری` enctype	`ارسال` داده‌هایش را چگونه بسته‌بندی می‌کند. پیش‌فرض `application/x-www-form-urlencoded` برای متن درست است. وقتی فرم ورودی پرونده دارد `multipart/form-data` را برگزینید، و `text/plain` را فقط برای اشکال‌یابی. [enum: form_enctype]	`فرم: روش = ارسال رمزگذاری = "multipart/form-data" ورودی: نوع = پرونده نام = "photo" پایان دکمه: نوع = ارسال محتوا = "بارگذاری" پایان پایان`
`بدون اعتبارسنجی` novalidate	یک مقدار منطقی. وقتی درست باشد مرورگر هنگام ارسال فرم `الزامی` و `الگو` و دیگر قاعده‌ها را نمی‌سنجد. وقتی خودتان در برنامه اعتبارسنجی می‌کنید به کار می‌آید. [bool]	`فرم: بدون اعتبارسنجی = درست ورودی: نام = "mail" نوع = ایمیل الزامی = درست پایان دکمه: نوع = ارسال محتوا = "به هر حال بفرست" پایان پایان`
`نویسه‌گان پذیرفته` accept charset	رمزگذاری‌های متنی که کارگزار می‌پذیرد، جدا شده با فاصله. پیش‌فرض رمزگذاری خود صفحه است و چون صفحه‌ها UTF-8 هستند به‌ندرت به آن نیاز دارید. [charset]	`فرم: نویسه‌گان پذیرفته = "UTF-8" ورودی: نام = "word" جانگهدار = "هر واژه‌ای" پایان پایان`

`ورودی` (English: `input`; HTML: `<input>`)

یک کنترل فرم. نوع تعیین می‌کند چیست: جعبه‌ی متن، تیک، انتخاب رنگ، دکمه و مانند آن، که سلام ۲۰ نوعش را نام برده است (جدول درس را ببینید). محتوا و فرزند ندارد. حتماً نام بدهید، چون کنترل بی‌نام فرستاده نمی‌شود، و یک برچسب، چون کنترل بی‌برچسب برای صفحه‌خوان معماست.

برچسب: برای = "city" محتوا = "شهر" پایان
ورودی: شناسه = "city" نام = "city" جانگهدار = "تبریز" پایان

عنصر تهی است و فرزند نمی‌پذیرد

ویژگی	کار آن	نمونه
`عرض` width	پهنا به پیکسل. فقط روی `نوع = "image"` اثر دارد. برای هر نوع دیگر از `عرض` در CSS استفاده کنید. [ulength]	`ورودی: نوع = "image" نشانی = "go.png" جایگزین = "برو" عرض = 80 پایان`
`ارتفاع` height	ارتفاع به پیکسل. مثل `عرض` فقط برای `نوع = "image"` اهمیت دارد. [ulength]	`ورودی: نوع = "image" نشانی = "go.png" جایگزین = "برو" ارتفاع = 40 پایان`
`نوع` type	نوع کنترل. نام‌هایی که سلام می‌شناسد `متن` (پیش‌فرض)، `گذرواژه`، `ایمیل`، `عدد`، `تلفن`، `نشانی`، `جستجو`، `تیک`، `رادیویی`، `ارسال`، `دکمه`، `بازنشانی`، `تاریخ`، `زمان`، `رنگ ورودی`، `بازه`، `پرونده`، `پنهان`، `ناحیه متن` و `تاریخ شمسی` هستند. نوع‌های دیگر HTML، مثل `datetime-local` و `month` و `week` و `image`، را می‌شود به شکل رشته‌ی نقل‌قول‌دار نوشت. [enum: input_type]	`ورودی: نوع = بازه کمینه = 0 بیشینه = 10 مقدار = 5 پایان`
`نام` name	کلیدی که مقدار با آن فرستاده می‌شود. چند دکمه‌ی رادیویی با نام یکسان یک گروه می‌سازند و مرورگر فقط اجازه می‌دهد یکی‌شان تیک بخورد. کنترل بی‌نام اصلاً فرستاده نمی‌شود. [string]	`ورودی: نام = "email" نوع = ایمیل پایان`
`مقدار` value	مقدار آغازین فیلد، و آنچه فرستاده می‌شود. برای تیک و دکمه‌ی رادیویی متنی است که وقتی تیک خورده فرستاده می‌شود. برای دکمه‌ها برچسب آن‌هاست. [string]	`ورودی: نام = "nick" مقدار = "مهمان" پایان`
`جانگهدار` placeholder	نکته‌ی کوتاهی که درون فیلد خالی دیده می‌شود و با شروع نوشتن ناپدید می‌شود. برچسب نیست: غایب می‌شود، اغلب کم‌کنتراست است و همه‌ی صفحه‌خوان‌ها آن را نمی‌خوانند. برای نام از `برچسب` و برای یک نمونه از جانگهدار استفاده کنید. [string]	`ورودی: نام = "phone" نوع = تلفن جانگهدار = "۰۹۱۲ ۳۴۵ ۶۷۸۹" پایان`
`الزامی` required	یک مقدار منطقی. تا وقتی فیلد خالی است (یا تیک نخورده) فرم فرستاده نمی‌شود و مرورگر این را می‌گوید. حالت `:required` را هم برای CSS روشن می‌کند. [bool]	`ورودی: نام = "name" الزامی = درست جانگهدار = "لازم" پایان`
`تیک خورده` checked	یک مقدار منطقی برای تیک و دکمه‌ی رادیویی: کنترل از ابتدا تیک خورده باشد یا نه. بعداً در برنامه با `دام.دریافت خاصیت منطقی(عنصر, "checked")` خوانده می‌شود. [bool]	`ورودی: نوع = تیک نام = "news" تیک خورده = درست پایان`
`غیرفعال` disabled	یک مقدار منطقی. کنترل غیرفعال نه فوکوس می‌گیرد و نه تغییر می‌کند، خاکستری کشیده می‌شود و همراه فرم فرستاده نمی‌شود. اگر فیلدی می‌خواهید که فقط تغییرناپذیر باشد ولی فرستاده شود، `فقط خواندنی` را به کار ببرید. [bool]	`ورودی: نام = "plan" مقدار = "رایگان" غیرفعال = درست پایان`
`نشانی` url	نشانی تصویر دکمه‌ی `image`. در HTML با نام `src` نوشته می‌شود. `جایگزین` را هم بنویسید. [url]	`ورودی: نوع = "image" نشانی = "send.png" جایگزین = "بفرست" پایان`
`فرم` form	شناسه‌ی فرمی که این کنترل به آن تعلق دارد. اجازه می‌دهد کنترل در صفحه بیرون از فرم‌اش باشد یا بخشی از فرمی دور از خود شود. [idref]	`فرم: شناسه = "signup" پایان ورودی: نام = "mail" نوع = ایمیل فرم = "signup" پایان`
`چندتایی` multiple	یک مقدار منطقی برای `پرونده` و `ایمیل`: بازدیدکننده می‌تواند چند پرونده برگزیند یا چند نشانی با ویرگول بنویسد. [bool]	`ورودی: نوع = پرونده نام = "docs" چندتایی = درست پایان`
`اندازه` size	پهنای دیدنی جعبه‌ی متن، بر حسب نویسه. آنچه می‌شود تایپ کرد را محدود نمی‌کند (آن کار `بیشینه طول` است). برای چیدمان واقعی از `عرض` در CSS استفاده کنید. [uint]	`ورودی: نام = "zip" اندازه = 6 جانگهدار = "۱۲۳۴۵" پایان`
`تمرکز خودکار` autofocus	یک مقدار منطقی. کنترل هنگام باز شدن صفحه فوکوس صفحه‌کلید را می‌گیرد. فقط روی یک فیلد و فقط جایی به کار ببرید که بازدیدکننده انتظارش را دارد، مثل صفحه‌ی جستجو. [bool]	`ورودی: نوع = جستجو نام = "q" تمرکز خودکار = درست پایان`
`تکمیل خودکار` autocomplete	به مرورگر می‌گوید فیلد چه چیزی نگه می‌دارد تا بتواند پرش کند. از واژه‌های استاندارد استفاده کنید: `name`، `email`، `tel`، `username`، `current-password`، `new-password`، `one-time-code`، `postal-code` یا `off`. مدیرهای گذرواژه به این‌ها تکیه دارند. [string]	`ورودی: نوع = گذرواژه نام = "pw" تکمیل خودکار = "new-password" پایان`
`بیشینه طول` maxlength	یک عدد صحیح. بیشترین نویسه‌ای که بازدیدکننده می‌تواند تایپ کند. مرورگر همان‌جا جلویش را می‌گیرد، پس حد را در برچسب یا با یک شمارنده به او بگویید. [uint]	`ورودی: نام = "tag" بیشینه طول = 12 جانگهدار = "حداکثر ۱۲ نویسه" پایان`
`کمینه طول` minlength	یک عدد صحیح. کمترین نویسه‌ی پذیرفته. مقدار کوتاه‌تری که بازدیدکننده تایپ کرده فیلد را نامعتبر می‌کند و فرم فرستاده نمی‌شود. فیلد خالی مجاز است مگر `الزامی` هم باشد. [uint]	`ورودی: نام = "user" کمینه طول = 3 جانگهدار = "۳ نویسه یا بیشتر" پایان`
`فقط خواندنی` readonly	یک مقدار منطقی. بازدیدکننده می‌تواند متن را انتخاب و کپی کند ولی نمی‌تواند تغییرش دهد، و همچنان با فرم فرستاده می‌شود. با `غیرفعال` مقایسه کنید. [bool]	`ورودی: نام = "id" مقدار = "A-1042" فقط خواندنی = درست پایان`
`نام جهت` dirname	نام فیلدی اضافه که جهت متن (`ltr` یا `rtl`) آنچه تایپ شده را می‌برد. وقتی متن چند زبانی ذخیره می‌کنید به کار می‌آید. نام معمول، نام فیلد به‌علاوه‌ی `.dir` است. [token]	`ورودی: نام = "comment" نام جهت = "comment.dir" پایان`
`پذیرش` accept	برای `پرونده`: انواع پرونده‌ای که پنجره‌ی انتخاب پیشنهاد می‌دهد، به شکل فهرستی از نوع‌های MIME مثل `image/png`، الگو مثل `image/*` یا پسوند مثل `.pdf`. راهنمایی برای بازدیدکننده است نه بازرسی، پس پرونده‌ها را در کارگزار هم بسنجید. [string (list)]	`ورودی: نوع = پرونده نام = "doc" پذیرش = "application/pdf, .docx" پایان`
`مقصد ارسال فرم` form action	روی دکمه‌ی ارسال یا دکمه‌ی تصویر: فقط وقتی همین دکمه فشرده شود فرم را به نشانی دیگری جز `مقصد ارسال` خود فرم می‌فرستد. [url]	`فرم: مقصد ارسال = "/save" ورودی: نوع = ارسال مقدار = "ذخیره" پایان ورودی: نوع = ارسال مقدار = "ذخیره و بستن" مقصد ارسال فرم = "/save-close" پایان پایان`
`روش فرم` form method	روی دکمه‌ی ارسال: `روش` فرم را فقط برای همین دکمه با `دریافت` یا `ارسال` یا `گفتگو` عوض می‌کند. [enum: form_method]	`فرم: مقصد ارسال = "/find" روش = ارسال ورودی: نوع = ارسال مقدار = "جستجو" روش فرم = دریافت پایان پایان`
`رمزگذاری فرم` form enctype	روی دکمه‌ی ارسال: `رمزگذاری` فرم را فقط برای همین دکمه عوض می‌کند. [enum: form_enctype]	`فرم: روش = ارسال ورودی: نوع = ارسال مقدار = "بارگذاری" رمزگذاری فرم = "multipart/form-data" پایان پایان`
`بدون اعتبارسنجی فرم` form novalidate	روی دکمه‌ی ارسال: وقتی همین دکمه فشرده شود سنجش‌های مرورگر را رد می‌کند. کاربرد کلاسیکش دکمه‌ی «ذخیره‌ی پیش‌نویس» کنار دکمه‌ی «ارسال» است. [bool]	`فرم: ورودی: نام = "title" الزامی = درست پایان ورودی: نوع = ارسال مقدار = "ذخیره‌ی پیش‌نویس" بدون اعتبارسنجی فرم = درست پایان پایان`
`هدف فرم` form target	روی دکمه‌ی ارسال: پاسخ را فقط برای همین دکمه در پنجره‌ای جز آنچه `هدف` فرم می‌گوید نشان می‌دهد. [enum: target]	`فرم: مقصد ارسال = "/print" ورودی: نوع = ارسال مقدار = "پیش‌نمایش" هدف فرم = "پنجره جدید" پایان پایان`
`فهرست پیشنهادها` list	شناسه‌ی یک `فهرست پیشنهاد` که گزینه‌هایش هنگام تایپ به شکل پیشنهاد دیده می‌شوند. بازدیدکننده باز هم می‌تواند چیز دیگری بنویسد. سلام می‌سنجد که شناسه وجود داشته باشد. [idref]	`ورودی: نام = "fruit" فهرست پیشنهادها = "fruits" پایان فهرست پیشنهاد: شناسه = "fruits" گزینه: مقدار = "سیب" پایان گزینه: مقدار = "آلو" پایان پایان`
`بیشینه` max	بزرگ‌ترین مقدار پذیرفته برای `عدد`، `بازه`، `تاریخ` و `زمان`. برای تاریخ به شکل متن بنویسید: `2026-12-31`. [string]	`ورودی: نوع = عدد نام = "qty" بیشینه = 10 پایان`
`کمینه` min	کوچک‌ترین مقدار پذیرفته برای `عدد`، `بازه`، `تاریخ` و `زمان`. [string]	`ورودی: نوع = عدد نام = "age" کمینه = 18 پایان`
`الگو` pattern	یک عبارت باقاعده که کل مقدار باید با آن جور باشد، برای متن، جستجو، تلفن، نشانی، ایمیل و گذرواژه. قاعده را در `عنوان` یا کنار فیلد توضیح دهید، چون پیام خود مرورگر کلی است. [string]	`ورودی: نام = "zip" الگو = "[0-9]{5}" عنوان = "پنج رقم" پایان`
`گام` step	گام میان عدد یا زمان‌های معتبر. پیش‌فرض برای `عدد` برابر ۱ است، پس ۲٫۵ پذیرفته نمی‌شود مگر `گام = "0.5"` یا `گام = "any"` بنویسید. از `کمینه` شمرده می‌شود. [string]	`ورودی: نوع = عدد نام = "price" گام = "0.5" کمینه = 0 پایان`
`هدف واشو` popover target	روی ورودی از نوع `دکمه`: شناسه‌ی عنصری که ویژگی `واشو` دارد. فشردن دکمه آن را نشان می‌دهد یا پنهان می‌کند، بی هیچ برنامه‌ای. [idref]	`ورودی: نوع = دکمه مقدار = "نکته" هدف واشو = "tip" پایان جعبه: شناسه = "tip" واشو = "auto" محتوا = "آب بنوشید." پایان`
`شفافیت رنگ` alpha	یک مقدار منطقی برای `رنگ ورودی`: انتخابگر رنگ می‌تواند شفافیت را هم برگزیند. فقط مرورگرهای تازه‌تر از آن پشتیبانی می‌کنند. [bool]	`ورودی: نوع = "رنگ ورودی" نام = "tint" شفافیت رنگ = درست پایان`
`فضای رنگ` colorspace	برای `رنگ ورودی`: فضای رنگ مقدار، یا `limited-srgb` (پیش‌فرض) یا `display-p3` که روی نمایشگرهای طیف گسترده رنگ‌های زنده‌تر دارد. فقط مرورگرهای تازه‌تر از آن پشتیبانی می‌کنند. [enum: color_space]	`ورودی: نوع = "رنگ ورودی" نام = "tint" فضای رنگ = "display-p3" پایان`
`کنش واشو` popover target action	همراه با `هدف واشو`: دکمه با واشو چه می‌کند. `جابه‌جا` (پیش‌فرض) نشان می‌دهد یا پنهان می‌کند، `نمایش` فقط نشان می‌دهد و `پنهان` فقط پنهان می‌کند. [enum: popover_action]	`ورودی: نوع = دکمه مقدار = "بستن نکته" هدف واشو = "tip" کنش واشو = پنهان پایان جعبه: شناسه = "tip" واشو = "auto" محتوا = "آب بنوشید." پایان`
`جایگزین` alt	متنی که وقتی تصویر دکمه‌ی `image` نیست جای آن می‌نشیند و صفحه‌خوان‌ها می‌خوانند. [string]	`ورودی: نوع = "image" نشانی = "send.png" جایگزین = "فرستادن فرم" پایان`
`محتوا` content	راه دیگر نوشتن متن آغازین فیلد: `مقدار` می‌شود. برای متنی که مستقیم درون صفحه نوشته می‌شود راحت است و `textarea input` برای متنش از آن استفاده می‌کند. [string]	`ورودی: نام = "greeting" محتوا = "سلام" پایان`

`ورودی` (English: `textarea input`; HTML: `<textarea>`)

شکلی از متن بلند که به صورت یک ورودی با نوع = "ناحیه متن" نوشته می‌شود. همان برچسب <textarea> را می‌سازد و متنش از محتوا می‌آید. متن بلند را ترجیح دهید که ویژگی‌های جعبه‌ی چندخطی (ردیف‌ها، ستون‌ها، شکستن خط) را دارد.

ورودی: نوع = "ناحیه متن" نام = "note" محتوا = "اینجا بنویسید" پایان

`متن بلند` (English: `text area`; HTML: `<textarea>`)

جعبه‌ای برای متن چندخطی: نظر، پیام، نشانی. متن درونش محتوای آغازین آن است. بازدیدکننده می‌تواند گوشه‌اش را بکشد و اندازه‌اش را عوض کند مگر تغییر اندازه در CSS چیز دیگری بگوید. سطرهایی که بازدیدکننده می‌شکند همان‌طور فرستاده می‌شوند.

متن بلند: نام = "message" ردیف‌ها = 3 ستون‌ها = 30 محتوا = "تیم گرامی،" پایان

ویژگی	کار آن	نمونه
`نام` name	کلیدی که متن با آن فرستاده می‌شود. [string]	`متن بلند: نام = "bio" پایان`
`فرم` form	شناسه‌ی فرمی که این جعبه به آن تعلق دارد، وقتی بیرون از آن فرم ایستاده است. [idref]	`فرم: شناسه = "post" پایان متن بلند: نام = "body" فرم = "post" پایان`
`الزامی` required	یک مقدار منطقی. تا وقتی جعبه خالی است فرم فرستاده نمی‌شود. [bool]	`متن بلند: نام = "reason" الزامی = درست جانگهدار = "چرا؟" پایان`
`غیرفعال` disabled	یک مقدار منطقی. جعبه نه ویرایش می‌شود نه فوکوس می‌گیرد و فرستاده نمی‌شود. [bool]	`متن بلند: نام = "old" غیرفعال = درست محتوا = "متن بایگانی‌شده" پایان`
`تمرکز خودکار` autofocus	یک مقدار منطقی. جعبه هنگام باز شدن صفحه فوکوس صفحه‌کلید را می‌گیرد. [bool]	`متن بلند: نام = "draft" تمرکز خودکار = درست پایان`
`تکمیل خودکار` autocomplete	`on` یا `off` (یا یک واژه‌ی استاندارد مثل `street-address`): مرورگر می‌تواند متن‌های پیشین را پیشنهاد کند یا نه. [string]	`متن بلند: نام = "address" تکمیل خودکار = "street-address" پایان`
`ردیف‌ها` rows	یک عدد صحیح: چند سطر متن بدون پیمایش دیده شود. برای اندازه‌ی دقیق از `ارتفاع` در CSS استفاده کنید. [uint]	`متن بلند: نام = "note" ردیف‌ها = 6 پایان`
`ستون‌ها` cols	یک عدد صحیح: جعبه چند نویسه پهن باشد. برای اندازه‌ی دقیق از `عرض` در CSS استفاده کنید، و `عرض = "100%"` برای جعبه‌ای که پدرش را پر کند. [uint]	`متن بلند: نام = "note" ستون‌ها = 50 پایان`
`بیشینه طول` maxlength	یک عدد صحیح: بیشترین نویسه‌ای که بازدیدکننده می‌تواند تایپ کند. [uint]	`متن بلند: نام = "bio" بیشینه طول = 200 پایان`
`کمینه طول` minlength	یک عدد صحیح: کمترین نویسه‌ی پذیرفته وقتی جعبه خالی نیست. [uint]	`متن بلند: نام = "review" کمینه طول = 20 پایان`
`جانگهدار` placeholder	نکته‌ای که تا وقتی جعبه خالی است دیده می‌شود. جای `برچسب` را نمی‌گیرد. [string]	`متن بلند: نام = "msg" جانگهدار = "پیامتان را بنویسید" پایان`
`فقط خواندنی` readonly	یک مقدار منطقی. متن را می‌شود انتخاب کرد ولی تغییر داد، و همچنان فرستاده می‌شود. [bool]	`متن بلند: نام = "terms" فقط خواندنی = درست محتوا = "شرایط استفاده" پایان`
`شکستن خط` wrap	`نرم` (پیش‌فرض) سطرهای بلند را فقط روی صفحه می‌شکند. `سخت` هنگام ارسال هم در لبه‌ی جعبه شکست سطر واقعی در متن می‌گذارد و به `ستون‌ها` نیاز دارد. [enum: wrap]	`متن بلند: نام = "poem" ستون‌ها = 30 شکستن خط = سخت پایان`
`نام جهت` dirname	نام فیلد اضافه‌ای که جهت متن تایپ‌شده را می‌برد، مثل همین ویژگی در `ورودی`. [token]	`متن بلند: نام = "note" نام جهت = "note.dir" پایان`

`برچسب` (English: `label`; HTML: `<label>`)

عنوان یک کنترل فرم. کلیک روی برچسب کنترلش را فوکوس می‌کند یا تیک می‌زند، که زدن تیک‌های کوچک را بسیار آسان می‌کند، و صفحه‌خوان‌ها هنگام فوکوس کنترل آن را می‌خوانند. آن‌ها را با برای (شناسه‌ی کنترل) به هم وصل کنید یا کنترل را درون برچسب بگذارید.

برچسب: برای = "mail" محتوا = "ایمیل" پایان
ورودی: شناسه = "mail" نوع = ایمیل پایان

ویژگی	کار آن	نمونه
`برای` for	شناسه‌ی کنترلی که این برچسب نامش را می‌برد. سلام هنگام ترجمه می‌سنجد که عنصری با این شناسه در صفحه باشد، پس غلط تایپی خطا می‌شود و بی‌صدا از دست نمی‌رود. [idref]	`برچسب: برای = "pw" محتوا = "گذرواژه" پایان ورودی: شناسه = "pw" نوع = گذرواژه پایان`

`دکمه` (English: `button`; HTML: `<button>`)

دکمه‌ای با هر محتوا: متن یا تصویری کنار متن. درون فرم نوع پیش‌فرضش ارسال است که فرم را می‌فرستد. برای دکمه‌ای که فقط کد اجرا می‌کند نوع = دکمه بنویسید وگرنه فرم تصادفی فرستاده می‌شود.

دکمه: نوع = دکمه محتوا = "مرا بزن" پایان

ویژگی	کار آن	نمونه
`نوع` type	`ارسال` فرم را می‌فرستد، `بازنشانی` همه‌ی فیلدها را به مقدار آغازینشان برمی‌گرداند و `دکمه` خودش کاری نمی‌کند. بدون نوع، دکمه‌ای در فرم دکمه‌ی `ارسال` است. [enum: button_type]	`دکمه: نوع = بازنشانی محتوا = "پاک کردن فرم" پایان`
`نام` name	همراه با `مقدار`: جفتی که وقتی همین دکمه فشرده شده فرستاده می‌شود. به فرمی که چند دکمه‌ی ارسال دارد می‌فهماند بازدیدکننده کدام را زده است. [string]	`دکمه: نوع = ارسال نام = "action" مقدار = "save" محتوا = "ذخیره" پایان`
`مقدار` value	مقداری که وقتی دکمه فشرده می‌شود زیر `نام` دکمه فرستاده می‌شود. در برنامه با `دام.دریافت خاصیت رشته ای(دکمه, "value")` خوانده می‌شود. [string]	`دکمه: نوع = ارسال نام = "action" مقدار = "delete" محتوا = "حذف" پایان`
`غیرفعال` disabled	یک مقدار منطقی. دکمه فشرده نمی‌شود و خاکستری کشیده می‌شود. کاربرد رایجش غیرفعال نگه داشتن «ارسال» تا معتبر شدن فرم است. [bool]	`دکمه: نوع = ارسال غیرفعال = درست محتوا = "ارسال" پایان`
`فرم` form	شناسه‌ی فرمی که این دکمه به آن تعلق دارد، تا دکمه بتواند بیرون از فرم باشد، مثلاً در یک نوار ابزار. [idref]	`فرم: شناسه = "note" پایان دکمه: نوع = ارسال فرم = "note" محتوا = "ذخیره‌ی یادداشت" پایان`
`تمرکز خودکار` autofocus	یک مقدار منطقی. دکمه هنگام باز شدن صفحه فوکوس صفحه‌کلید را می‌گیرد. [bool]	`دکمه: نوع = دکمه تمرکز خودکار = درست محتوا = "شروع" پایان`
`مقصد ارسال فرم` form action	روی دکمه‌ی ارسال: فرم را به جای `مقصد ارسال` خود فرم به این نشانی می‌فرستد. [url]	`فرم: مقصد ارسال = "/save" دکمه: نوع = ارسال محتوا = "ذخیره" پایان دکمه: نوع = ارسال مقصد ارسال فرم = "/publish" محتوا = "انتشار" پایان پایان`
`روش فرم` form method	روی دکمه‌ی ارسال: فرم را به جای `روش` فرم با این روش می‌فرستد. [enum: form_method]	`فرم: مقصد ارسال = "/item" روش = ارسال دکمه: نوع = ارسال محتوا = "ذخیره" پایان دکمه: نوع = ارسال روش فرم = دریافت محتوا = "پیش‌نمایش" پایان پایان`
`رمزگذاری فرم` form enctype	روی دکمه‌ی ارسال: داده‌ها را به جای `رمزگذاری` فرم به این شکل بسته‌بندی می‌کند. [enum: form_enctype]	`فرم: روش = ارسال دکمه: نوع = ارسال رمزگذاری فرم = "multipart/form-data" محتوا = "ارسال همراه پرونده" پایان پایان`
`بدون اعتبارسنجی فرم` form novalidate	روی دکمه‌ی ارسال: وقتی این دکمه فشرده شود سنجش‌های مرورگر را رد می‌کند، مثل دکمه‌ی «ذخیره‌ی پیش‌نویس». [bool]	`فرم: ورودی: نام = "title" الزامی = درست پایان دکمه: نوع = ارسال بدون اعتبارسنجی فرم = درست محتوا = "ذخیره‌ی پیش‌نویس" پایان پایان`
`هدف فرم` form target	روی دکمه‌ی ارسال: پاسخ را به جای `هدف` فرم در این پنجره نشان می‌دهد. [enum: target]	`فرم: مقصد ارسال = "/preview" دکمه: نوع = ارسال هدف فرم = "پنجره جدید" محتوا = "پیش‌نمایش در زبانه‌ی تازه" پایان پایان`
`هدف واشو` popover target	شناسه‌ی عنصری با ویژگی `واشو` که این دکمه نشان می‌دهد یا پنهان می‌کند، بی هیچ برنامه‌ای. [idref]	`دکمه: هدف واشو = "menu" محتوا = "منو" پایان جعبه: شناسه = "menu" واشو = "auto" محتوا = "خانه، درباره، تماس" پایان`
`کنش واشو` popover target action	همراه با `هدف واشو`: `جابه‌جا` (پیش‌فرض)، `نمایش` یا `پنهان`. [enum: popover_action]	`دکمه: هدف واشو = "menu" کنش واشو = نمایش محتوا = "باز کردن منو" پایان جعبه: شناسه = "menu" واشو = "auto" محتوا = "خانه، درباره، تماس" پایان`
`فرمان` command	فرمانی که دکمه به عنصری که `هدف فرمان` نامش را می‌برد می‌دهد، بی هیچ برنامه‌ای: مثلاً `show-modal` و `close` برای یک `dialog`. ویژگی تازه‌ای است، پس پیش از تکیه‌کردن بر آن پشتیبانی مرورگرها را بسنجید. [string]	`دکمه: فرمان = "show-modal" هدف فرمان = "box" محتوا = "باز کن" پایان پنجره گفتگو: شناسه = "box" محتوا = "سلام" پایان`
`هدف فرمان` commandfor	شناسه‌ی عنصری که `فرمان` را می‌گیرد. سلام می‌سنجد که شناسه وجود داشته باشد. [idref]	`دکمه: فرمان = "close" هدف فرمان = "box" محتوا = "ببند" پایان پنجره گفتگو: شناسه = "box" باز = درست محتوا = "سلام" پایان`

`انتخاب` (English: `select`; HTML: `<select>`)

فهرست کشویی: بازدیدکننده یکی از گزینه‌ها را برمی‌گزیند، یا با چندتایی چند تا را. مقداری که فرستاده می‌شود مقدار گزینه‌ی برگزیده است، یا متنش اگر مقدار نداشته باشد. برای چهار گزینه یا بیشتر به کار ببرید؛ برای دو یا سه گزینه، دکمه‌های رادیویی گزینه‌ها را بی‌کلیک نشان می‌دهند.

انتخاب: نام = "fruit"
    گزینه: مقدار = "apple" محتوا = "سیب" پایان
    گزینه: مقدار = "pear" محتوا = "گلابی" پایان
پایان

ویژگی	کار آن	نمونه
`نام` name	کلیدی که مقدار برگزیده با آن فرستاده می‌شود. [string]	`انتخاب: نام = "size" گزینه: مقدار = "s" محتوا = "کوچک" پایان پایان`
`فرم` form	شناسه‌ی فرمی که فهرست به آن تعلق دارد، وقتی بیرون از آن فرم است. [idref]	`فرم: شناسه = "order" پایان انتخاب: نام = "size" فرم = "order" گزینه: مقدار = "s" محتوا = "کوچک" پایان پایان`
`چندتایی` multiple	یک مقدار منطقی. فهرست جعبه‌ای می‌شود که چند گزینه را یک‌جا نشان می‌دهد و بازدیدکننده با Ctrl یا Shift (یا در تلفن با لمس) می‌تواند بیش از یکی را برگزیند. [bool]	`انتخاب: نام = "toppings" چندتایی = درست اندازه = 3 گزینه: مقدار = "cheese" محتوا = "پنیر" پایان گزینه: مقدار = "olives" محتوا = "زیتون" پایان گزینه: مقدار = "corn" محتوا = "ذرت" پایان پایان`
`الزامی` required	یک مقدار منطقی. تا گزینه‌ای با `مقدار` ناتهی برگزیده نشود فرم فرستاده نمی‌شود، پس گزینه‌ی اول را یک راهنما با `مقدار = ""` کنید. [bool]	`انتخاب: نام = "country" الزامی = درست گزینه: مقدار = "" محتوا = "یک کشور بردارید" پایان گزینه: مقدار = "ir" محتوا = "ایران" پایان پایان`
`غیرفعال` disabled	یک مقدار منطقی. کل فهرست خاکستری می‌شود، تغییر نمی‌کند و فرستاده نمی‌شود. [bool]	`انتخاب: نام = "plan" غیرفعال = درست گزینه: محتوا = "رایگان" پایان پایان`
`اندازه` size	یک عدد صحیح: چند گزینه یک‌جا دیده شود. هر عددی بالای ۱ فهرست کشویی را به جعبه‌ای پیمایشی تبدیل می‌کند. [uint]	`انتخاب: نام = "day" اندازه = 4 گزینه: محتوا = "شنبه" پایان گزینه: محتوا = "یکشنبه" پایان گزینه: محتوا = "دوشنبه" پایان گزینه: محتوا = "سه‌شنبه" پایان گزینه: محتوا = "چهارشنبه" پایان پایان`
`تمرکز خودکار` autofocus	یک مقدار منطقی. فهرست هنگام باز شدن صفحه فوکوس صفحه‌کلید را می‌گیرد. [bool]	`انتخاب: نام = "lang" تمرکز خودکار = درست گزینه: محتوا = "فارسی" پایان پایان`
`تکمیل خودکار` autocomplete	یک واژه‌ی استاندارد مثل `country` یا `off`: به مرورگر اجازه می‌دهد گزینه را از روی آنچه درباره‌ی بازدیدکننده می‌داند بردارد. [string]	`انتخاب: نام = "country" تکمیل خودکار = "country" گزینه: مقدار = "ir" محتوا = "ایران" پایان پایان`

`گزینه` (English: `option`; HTML: `<option>`)

یک گزینه در انتخاب، گروه گزینه یا فهرست پیشنهاد. متنش را بازدیدکننده می‌بیند و مقدارش فرستاده می‌شود. در فهرست پیشنهاد همان مقدار پیشنهاد است.

انتخاب: نام = "fruit"
    گزینه: مقدار = "apple" محتوا = "سیب" پایان
پایان

فقط درون: select, option group, data list

ویژگی	کار آن	نمونه
`مقدار` value	متنی که وقتی این گزینه برگزیده شود فرستاده می‌شود. بدون آن متن خود گزینه فرستاده می‌شود. یک کد کوتاه بدهید نه جمله‌ی ترجمه‌شده، تا کارگزارتان به زبان صفحه وابسته نباشد. [string]	`انتخاب: نام = "lang" گزینه: مقدار = "fa" محتوا = "فارسی" پایان پایان`
`برچسب` label	متن کوتاه‌تری که به جای متن درون گزینه نشان داده شود. به‌ندرت لازم است. در `فهرست پیشنهاد` توضیحی است که کنار پیشنهاد دیده می‌شود. [string]	`انتخاب: نام = "unit" گزینه: مقدار = "km" برچسب = "km" محتوا = "کیلومتر" پایان پایان`
`غیرفعال` disabled	یک مقدار منطقی. گزینه خاکستری دیده می‌شود و نمی‌شود آن را برگزید. برای سطر راهنمایی مثل «یک شهر بردارید» یا چیز ناموجود خوب است. [bool]	`انتخاب: نام = "city" گزینه: مقدار = "" محتوا = "یک شهر بردارید" غیرفعال = درست انتخاب‌شده = درست پایان گزینه: مقدار = "tabriz" محتوا = "تبریز" پایان پایان`
`انتخاب‌شده` selected	یک مقدار منطقی. گزینه هنگام باز شدن صفحه برگزیده است. بدون آن گزینه‌ی اول برگزیده است. [bool]	`انتخاب: نام = "size" گزینه: مقدار = "s" محتوا = "کوچک" پایان گزینه: مقدار = "m" محتوا = "متوسط" انتخاب‌شده = درست پایان پایان`

`گروه گزینه` (English: `option group`; HTML: `<optgroup>`)

گروهی نام‌دار از گزینه‌ها درون یک انتخاب. بازدیدکننده نام را به شکل سطری پررنگ می‌بیند که برگزیدنی نیست. باید برچسب داشته باشد و بدون آن مترجم می‌ایستد.

انتخاب: نام = "city"
    گروه گزینه: برچسب = "اروپا"
        گزینه: مقدار = "oslo" محتوا = "اسلو" پایان
        گزینه: مقدار = "rome" محتوا = "رم" پایان
    پایان
پایان

الزامی: label · فقط درون: select

ویژگی	کار آن	نمونه
`برچسب` label	نام گروه که بالای گزینه‌هایش دیده می‌شود. الزامی است. [string]	`انتخاب: نام = "city" گروه گزینه: برچسب = "آسیا" گزینه: مقدار = "tokyo" محتوا = "توکیو" پایان پایان پایان`
`غیرفعال` disabled	یک مقدار منطقی. همه‌ی گزینه‌های گروه خاکستری می‌شوند و نمی‌شود آن‌ها را برگزید. [bool]	`انتخاب: نام = "city" گروه گزینه: برچسب = "بسته" غیرفعال = درست گزینه: مقدار = "x" محتوا = "آتلانتیس" پایان پایان پایان`

`فهرست پیشنهاد` (English: `data list`; HTML: `<datalist>`)

فهرستی از پیشنهادها برای یک ورودی متنی. با ویژگی فهرست پیشنهادهای ورودی به آن وصلش کنید. برخلاف انتخاب انتخاب را اجباری نمی‌کند: بازدیدکننده می‌تواند چیزی بنویسد که در فهرست نیست. خودش نامرئی است.

ورودی: نام = "browser" فهرست پیشنهادها = "browsers" پایان
فهرست پیشنهاد: شناسه = "browsers"
    گزینه: مقدار = "Firefox" پایان
    گزینه: مقدار = "Chrome" پایان
پایان

`گروه فیلد` (English: `field set`; HTML: `<fieldset>`)

کنترل‌های وابسته را در یک کادر گروه می‌کند، مثل سطرهای یک نشانی یا مجموعه‌ای از دکمه‌های رادیویی. هنگام ورود بازدیدکننده به گروه، صفحه‌خوان عنوان گروه را اعلام می‌کند، و همین است که فهرستی لخت از دکمه‌های رادیویی پرسشش را می‌گیرد.

گروه فیلد:
    عنوان گروه: محتوا = "تحویل" پایان
    برچسب: ورودی: نوع = رادیویی نام = "d" پایان تکه: محتوا = " خانه" پایان پایان
    برچسب: ورودی: نوع = رادیویی نام = "d" پایان تکه: محتوا = " محل کار" پایان پایان
پایان

ویژگی	کار آن	نمونه
`نام` name	نامی برای گروه، برای برنامه‌ها. فرستاده نمی‌شود. [string]	`گروه فیلد: نام = "address" عنوان گروه: محتوا = "نشانی" پایان ورودی: نام = "street" پایان پایان`
`فرم` form	شناسه‌ی فرمی که گروه به آن تعلق دارد، وقتی بیرون از آن فرم است. کنترل‌های گروه بخشی از آن فرم‌اند. [idref]	`فرم: شناسه = "f1" پایان گروه فیلد: فرم = "f1" عنوان گروه: محتوا = "افزوده" پایان ورودی: نام = "extra" پایان پایان`
`غیرفعال` disabled	یک مقدار منطقی. همه‌ی کنترل‌های درون یک‌جا غیرفعال می‌شوند، به‌جز آن‌هایی که در `عنوان گروه` هستند. در برنامه با `دام.تنظیم خاصیت منطقی(عنصر, "disabled", درست)` عوضش کنید، همان‌طور که نمونه‌ی درس می‌کند. [bool]	`گروه فیلد: غیرفعال = درست عنوان گروه: محتوا = "قفل" پایان ورودی: نام = "locked" مقدار = "قابل تغییر نیست" پایان پایان`

`عنوان گروه` (English: `legend`; HTML: `<legend>`)

عنوان یک گروه فیلد. باید نخستین فرزند گروه باشد و روی کادرش کشیده می‌شود.

گروه فیلد:
    عنوان گروه: محتوا = "پرداخت" پایان
    ورودی: نام = "card" جانگهدار = "شماره‌ی کارت" پایان
پایان

فقط درون: field set

`خروجی` (English: `output`; HTML: `<output>`)

نتیجه‌ی یک محاسبه یا کنش بازدیدکننده، مثل مقدار کنار یک لغزنده. صفحه‌خوان‌ها تغییرهای آن را مؤدبانه اعلام می‌کنند. متنش را از برنامه با دام.تنظیم متن بدهید.

ورودی: شناسه = "a" نوع = عدد مقدار = 2 پایان
خروجی: برای = "a" محتوا = "4" پایان

ویژگی	کار آن	نمونه
`نام` name	نامی برای نتیجه، برای برنامه‌ها. `خروجی` هرگز همراه فرم فرستاده نمی‌شود. [string]	`خروجی: نام = "total" محتوا = "0" پایان`
`فرم` form	شناسه‌ی فرمی که این نتیجه به آن تعلق دارد، وقتی بیرون از آن فرم است. [idref]	`فرم: شناسه = "calc" پایان خروجی: فرم = "calc" محتوا = "0" پایان`
`برای` for	شناسه‌ی کنترل‌هایی که نتیجه از روی آن‌ها حساب می‌شود، جدا شده با فاصله. فقط این پیوند را برای فناوری کمکی ثبت می‌کند. سلام می‌سنجد که هر شناسه وجود داشته باشد. [idref (list)]	`ورودی: شناسه = "w" نوع = عدد پایان ورودی: شناسه = "h" نوع = عدد پایان خروجی: برای = "w h" محتوا = "0" پایان`

`پیشرفت` (English: `progress`; HTML: `<progress>`)

نواری برای پیشرفت یک کار، مثل بارگذاری. بدون مقدار انیمیشن بی‌پایان «مشغول» را نشان می‌دهد. برای اندازه‌ای که پیشرفت نیست، مثل پر بودن دیسک، سنجه را بگیرید. متنی هم کنارش بگذارید، چون خود نوار چیز زیادی به صفحه‌خوان نمی‌گوید.

پیشرفت: مقدار = 30 بیشینه = 100 پایان

ویژگی	کار آن	نمونه
`مقدار` value	عددی از ۰ تا `بیشینه`: چقدر انجام شده. برای مقدار نامعلوم حذفش کنید. [float]	`پیشرفت: مقدار = 70 بیشینه = 100 پایان`
`بیشینه` max	عددی که یعنی تمام شد. پیش‌فرض ۱ است، پس `مقدار` ۰٫۳ یعنی سی درصد. [float]	`پیشرفت: مقدار = 3 بیشینه = 5 پایان`

`سنجه` (English: `meter`; HTML: `<meter>`)

سنجه‌ای برای مقداری درون یک بازه‌ی معلوم: شارژ باتری، یک امتیاز، پر بودن یک دیسک. مرورگرها بر پایه‌ی حد پایین و حد بالا و بهینه آن را سبز، زرد یا قرمز می‌کنند. برای پیشرفت نیست: برای آن پیشرفت را بگیرید.

سنجه: مقدار = 6 کمینه = 0 بیشینه = 10 حد پایین = 3 حد بالا = 8 بهینه = 10 پایان

الزامی: value

ویژگی	کار آن	نمونه
`مقدار` value	مقدار کنونی. باید میان `کمینه` و `بیشینه` باشد؛ وگرنه مرورگر آن را می‌برد. ویژگی الزامی است. [float]	`سنجه: مقدار = 0.6 پایان`
`بیشینه` max	بالای بازه. پیش‌فرض ۱ است. [float]	`سنجه: مقدار = 70 بیشینه = 100 پایان`
`کمینه` min	پایین بازه. پیش‌فرض ۰ است. [float]	`سنجه: مقدار = 15 کمینه = -10 بیشینه = 40 پایان`
`حد پایین` low	حد بالای بخش پایین بازه. مقدار زیر آن «کم» به حساب می‌آید. [float]	`سنجه: مقدار = 20 بیشینه = 100 حد پایین = 30 پایان`
`حد بالا` high	حد پایین بخش بالای بازه. مقدار بالای آن «زیاد» به حساب می‌آید. [float]	`سنجه: مقدار = 90 بیشینه = 100 حد بالا = 80 پایان`
`بهینه` optimum	بهترین مقدار. اگر در بخش بالا باشد مقدارهای بالا سبز کشیده می‌شوند؛ اگر در بخش پایین باشد مقدارهای پایین. به همین دلیل پر بودن دیسک (کم بهتر است) و یک امتیاز (زیاد بهتر است) فرق می‌کنند. [float]	`سنجه: مقدار = 90 بیشینه = 100 حد پایین = 30 حد بالا = 80 بهینه = 0 پایان`

خودتان امتحان کنید

فرم تماس بسازید با نام، ایمیل، موضوع در یک انتخاب و پیام در یک متن بلند با شمارنده‌ی نویسه. وقتی فرستاده شد، مقدارهای جمع‌شده را در یک پاراگراف نشان دهید.
در نمونه‌ی اعتبارسنجی یک فیلد «تکرار گذرواژه» اضافه کنید و تا وقتی دو گذرواژه یکی نیستند خطا نشان دهید. هر دو را با دام.دریافت مقدار بخوانید.
فرم سفارش کوچکی بسازید با تعداد کالا (کمینه = 1)، روش تحویل با دکمه‌های رادیویی و جمع کل در یک خروجی.
به فیلد تاریخ شمسی الزامی بدهید و ببینید مرورگر وقتی خالی است و وقتی تاریخ ۱۴۰۵/۱۳/۴۰ است چه می‌کند.

فرم‌ها

فرم و ارسال

برچسب‌ها

نوع‌های ورودی

بگذارید مرورگر بسنجد

متن بلندتر

تیک، رادیویی و گروه‌ها

برگزیدن از فهرست

دکمه‌ها

نشان دادن نتیجه

پرونده‌ها

تاریخ شمسی

مرجع: همه‌ی عنصرهای فرم

فرم (English: form; HTML: <form>)

ورودی (English: input; HTML: <input>)

ورودی (English: textarea input; HTML: <textarea>)

متن بلند (English: text area; HTML: <textarea>)

برچسب (English: label; HTML: <label>)

دکمه (English: button; HTML: <button>)

انتخاب (English: select; HTML: <select>)

گزینه (English: option; HTML: <option>)

گروه گزینه (English: option group; HTML: <optgroup>)

فهرست پیشنهاد (English: data list; HTML: <datalist>)

گروه فیلد (English: field set; HTML: <fieldset>)

عنوان گروه (English: legend; HTML: <legend>)

خروجی (English: output; HTML: <output>)

پیشرفت (English: progress; HTML: <progress>)

سنجه (English: meter; HTML: <meter>)