HTML:فرم‌ها

از ویکی‌کد
پرش به ناوبری پرش به جستجو

{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|clear=right|limit=2}}

<span class="error">Expansion depth limit exceeded {{Expansion depth limit exceeded|2=html}}

{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=tryhtml_form_submit|dars=html}}

<span class="error">Expansion depth limit exceeded عنصر {{Expansion depth limit exceeded|code=<form>|lang=html|class=|id=|style=color: #FF9933;}} در HTML فرمی را تعریف می‌کند که برای جمع‌آوری ورودی کاربر استفاده می‌شود:Expansion depth limit exceededExpansion depth limit exceededیک فرم HTML شامل عنصرهای فرم است.

عنصرهای فرم انواع مختلفی از عنصرهای ورودی هستند مانند فیلدهای متن، چک باکس‌ها، radio buttonها، کلیدهای submit و غیره.

<span class="error">Expansion depth limit exceeded عنصر {{Expansion depth limit exceeded|code=<input>|lang=html|class=|id=|style=color: #FF9933;}} مهمترین عنصر فرم است.

عنصر {{Expansion depth limit exceeded|code=<input>|lang=html|class=|id=|style=color: #FF9933;}} را می‌توان بسته به نوع ویژگی با روش‌های بسیاری نمایش داد.

در اینجا چند مثال بیان شده‌است:

نوع تعریف
<input type="text"> فیلد ورودی متن تک خطی را مشخص می‌کند
<input type="radio"> یک radio button تعریف می‌کند (برای انتخاب یک مورد از میان چند مورد)
<input type="submit"> submit}} فرم)

{{Expansion depth limit exceeded|در آینده در مورد انواع ورودی در این آموزش بیشتر خواهید آموخت.|reminder}}

<span class="error">Expansion depth limit exceeded {{Expansion depth limit exceeded|code=<input type="text">|lang=html|class=|id=|style=color: #FF9933;}} یک ورودی متن تک خطی را مشخص می‌کند:

<span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=tryhtml_form_text|dars=html}}

در مرورگر به شکل زیر خواهد بود:

{{Expansion depth limit exceeded|2=html}}{{Expansion depth limit exceeded|توجه: خود فرم قابل رویت نیست. همچنین دقت کنید که عرض پیش‌فرض فیلد متن ۲۰ کاراکتر است.|warn}}

<span class="error">Expansion depth limit exceeded به استفاده از عنصر {{Expansion depth limit exceeded|code=<label>|lang=python|class=|id=|style=color: #FF9933;}} در مثال بالا دقت کنید.

تگ {{Expansion depth limit exceeded|code=<label>|lang=python|class=|id=|style=color: #FF9933;}} یک برچسب برای بسیاری از عنصرهای فرم تعریف می‌کند.

عنصر {{Expansion depth limit exceeded|code=<label>|lang=python|class=|id=|style=color: #FF9933;}} برای کاربران صفحه خوان‌ها مفید است، زیرا هنگامی که کاربر عنصر ورودی را انتخاب می‌کند، صفحه خوان برچسب را بلند خواهد خواند.

همچنین عنصر {{Expansion depth limit exceeded|code=<label>|lang=python|class=|id=|style=color: #FF9933;}} به کاربرانی که برای کلیک کردم برروی ناحیه‌های بسیار کوچک (مانند Radio Buttonها یا چک باکس‌ها) مشکل دارند کمک می‌کند - زیرا هنگامی که کاربر برروی متن دورن عنضر {{Expansion depth limit exceeded|code=<label>|lang=python|class=|id=|style=color: #FF9933;}} کلیک می‌کند، این کار باعث انتخاب یا عدم انتخاب radio button / چک باکس می‌شود.

ویژگی {{Expansion depth limit exceeded|code=for|lang=python|class=|id=|style=color: #FF9933;}} مربوط به تگ <label> معادل ویژگی {{Expansion depth limit exceeded|code=id|lang=python|class=|id=|style=color: #FF9933;}} برای عنصر <input> برای اتصال آنها به هم است. <span class="error">Expansion depth limit exceeded {{Expansion depth limit exceeded|code=<input type="radio">|lang=html|class=|id=|style=color: #FF9933;}} یک radio button تعریف می‌کند

Radio buttonها به کاربر این امکان را می‌دهند که از بین گزینه‌های محدود یک مورد را انتخاب کند:

<span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=tryhtml_form_radio|dars=html}}

کد HTML بالا به شکل زیر نمایش داده می‌شود:

{{Expansion depth limit exceeded|2=html}} <span class="error">Expansion depth limit exceeded {{Expansion depth limit exceeded|code=<input type="submit">|lang=html|class=|id=|style=color: #FF9933;}} یک کلید برای ارسال داده‌های فرم به مدیر فرم {{Expansion depth limit exceeded|Form Handler}} استفاده می‌شود.

Form-handler معمولاً یک صفحه سرور با اسکریپتی برای پردازش داده‌های ورودی است.

Form-handler در ویژگی action فرم مشخص می‌شود:

<span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=tryhtml_form_submit|dars=html}}

کد HTML بالا به شکل زیر در مرورگر نمایش داده می‌شود:

{{Expansion depth limit exceeded|2=html}} <span class="error">Expansion depth limit exceeded ویژگی {{Expansion depth limit exceeded|code=action|lang=css|class=|id=|style=color: #FF9933;}} عملی که باید هنگام submit فرم اجرا شود را مشخص می‌کند.

معمولاً هنگامی که کاربر برروی کلید submit کلیک می‌کند، دادهٔ فرم به یک صفحه وب در سرور ارسال می‌شود.

در مثال بالا، داده‌های فرم به صفحه ای به نام {{Expansion depth limit exceeded|"/action_page.php"}} در سرور ارسال می‌شود. این صفحه شامل یک اسکریپت سمت‌سرور است که داده‌های فرم را مدیریت می‌کند:Expansion depth limit exceeded

اگر ویژگی {{Expansion depth limit exceeded|code=action|lang=css|class=|id=|style=color: #FF9933;}} حذف شود، action برابر با آدرس صفحه فعلی تنظیم می‌شود.

<span class="error">Expansion depth limit exceeded ویژگی {{Expansion depth limit exceeded|code=target|lang=css|class=|id=|style=color: #FF9933;}} مشخص می‌کند که آیا نتایج ثبت شده در تب جدید مرورگر، یک فریم یا در همان پنجره فعلی باز خواهند شد یا خیر.

مقدار پیش‌فرض “{{Expansion depth limit exceeded|code=_self|lang=css|class=|id=|style=color: #FF9933;}}” است که یعنی فرم در همان صفحه جاری submit خواهد شد.

برای اینکه نتایج در تب جدید مرورگر باز شوند، از مقدار “{{Expansion depth limit exceeded|code=_blank|lang=css|class=|id=|style=color: #FF9933;}}” استفاده می‌شود:

<span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=tryhtml_form_target|dars=html}}

مقادیر صحیح دیگر “{{Expansion depth limit exceeded|code=_parent|lang=css|class=|id=|style=color: #FF9933;}}” و “{{Expansion depth limit exceeded|code=_top|lang=css|class=|id=|style=color: #FF9933;}}” هستند یا نامی که نشان دهنده نام یک iframe باشد.

<span class="error">Expansion depth limit exceeded ویژگی متد HTTP یک (GET یا SET) را برای استفاده در هنگام submit داده‌های فرم مشخص می‌کند.

<span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=tryhtml_form_get|dars=html}}

یا:

<span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=tryhtml_form_post|dars=html}}

<span class="error">Expansion depth limit exceeded متد پیش فرص هنگام submit داده‌های فرم GET است.

با این حال، هنگامی که GET استفاده می‌شود، داده‌های فرم Submit شده در فیلد آدرس صفحه قابل مشاهده هستند.Expansion depth limit exceeded

نکات GET:

  • داده‌های فرم را در دوتایی‌های‌های نام/ مقدارِ URL ضمیمه می‌کند
  • طول URL محدود است (۲۰۴۸ کاراکتر)
  • هرگز از GET برای ارسال داده‌های حساس استفاده نکنید! (در URL قابل رویت خواهد بود)
  • برای submitهایی که کاربر می‌خواهد نتایج آن را bookmark کند مفید است
  • GET برای داده‌های غیر امن مانند رشته‌ها در Google بهتر است

<span class="error">Expansion depth limit exceeded همیشه زمانی که داده‌های فرم شامل داده‌های حساس یا شخصی هستند از POST استفاده کنید. متد POST داده‌های submit شده فرم را در فیلد آدرس صفحه نمایش نمی‌دهد.

نکات POST:

  • POST محدودیت اندازه ندارد و می‌توان برای ارسال حجم زیاد داده از آن استفاده کرد.
  • Submitهای فرم بوسیله POST را نمی‌توان bookmark کرد.

<span class="error">Expansion depth limit exceeded هر فیلد ورودی باید یک ویژگی {{Expansion depth limit exceeded|code=name|lang=css|class=|id=|style=color: #FF9933;}} برای submit داشته باشد.

اگر ویژگی {{Expansion depth limit exceeded|code=name|lang=css|class=|id=|style=color: #FF9933;}} حذف شود، داده‌های آن فیلد ورودی اصلاً ارسال نخواهند شد.

این مثال تنها فیلد ورودی “Last name” را submit می‌کند:

<span class="error">Expansion depth limit exceeded Expansion depth limit exceeded{{Expansion depth limit exceeded}}{{Expansion depth limit exceeded|out=مشاهدهٔ نتیجه|link=tryhtml_form_submit_id|dars=html}}

<span class="error">Expansion depth limit exceeded {{Expansion depth limit exceeded|2=html}}

در اینجا لیستی از ویژگی‌های {{Expansion depth limit exceeded|code=<form>|lang=html|class=|id=|style=color: #FF9933;}} آورده شده‌است:

ویژگی تعریف
accept-charset مجموعه کاراکتر مورد استفاده در فرم submit شده را مشخص می‌کند (پیش‌فرض: مجموعه کاراکتر صفحه).
action URL}} محل submit شدن فرم را مشخص می‌کند (پیش‌فرض: همان صفحه Submit).
autocomplete روشن}})
enctype کدگذاری داده‌های submit شده را تعیین می‌کند (پیش‌فرض:url-encoded)
method متد HTTP استفاده شده هنگام submit فرم را مشخص می‌کند (پیش‌فرض:GET)
name نام مورد استفاده برای شناسایی فرم را مشخص می‌کند (برای استفاده DOM: document.forms.name)
novalidate تعیین می‌کند که مرورگر نباید فرم را تأیید اعتبار کند.
target _self}}).

{{Expansion depth limit exceeded|در مورد ویژگی‌های فرم در بخش‌های بعدی بیشتر خواهید آموخت.|reminder}}

{{Expansion depth limit exceeded|قبل=HTML:قراردادهای کدزنی و راهنمای استایل|بعد=HTML:عناصر فرم}} {{Expansion depth limit exceeded}} {{Expansion depth limit exceeded|title={{Expansion depth limit exceeded| {{{Expansion depth limit exceeded}}} | فرم‌های HTML - ویکی‌کد}}

|keywords=
|description= یک فرم HTML شامل عنصرهای فرم است. عنصر <form> در HTML فرمی را تعریف می‌کند که برای جمع‌آوری ورودی کاربر استفاده می‌شود. عنصرهای فرم انواع مختلفی از عنصرهای ورودی هستند مانند فیلدهای متن، چک باکس‌ها، radio buttonها، کلیدهای submit و غیره.

}}

{{Expansion depth limit exceeded}}