کلاس درس پیشنهادی:

فرم‌های HTML

<form> عناصر فرم HTML برای جمع‌آوری ورودی‌های مختلف کاربران استفاده می‌شوند.

فرم‌های HTML برای جمع‌آوری ورودی‌های کاربر استفاده می‌شوند.

<form> عناصر فرم HTML را تعریف می‌کند:

مثال

<form>
 .
element‌های فرم
 .
</form>

فرم‌های HTML شاملعناصر فرم。

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

عناصر <input>

<input> عناصر مهم‌ترینعناصر فرم。

عناصر <input> بسیار متنوع هستند و بسته به type ویژگی‌ها.

این نوع‌هایی که در این فصل استفاده می‌شوند:

نوع توضیح
text تعریف ورودی متنی معمولی.
radio تعریف ورودی تک‌گزینه‌ها (انتخاب یکی از چندین انتخاب)
submit تعریف دکمه ارسال (ارسال فرم)

توجه:شما در ادامه این آموزش بیشتر درباره نوع ورودی‌ها یاد خواهید گرفت.

ورودی متنی

<input type="text"> تعریف برایورودی متنیفیلدهای ورودی یک‌خطه

مثال

<form>
 نام:<br>
<input type="text" name="firstname">
<br>
 نام خانوادگی:<br>
<input type="text" name="lastname">
</form>

آزمایش کنید

در مرورگر به این شکل به نظر می‌رسد:

نام:


نام خانوادگی:

توجه:فرم خود به صورت مستقیم قابل مشاهده نیست. همچنین توجه داشته باشید که عرض پیش‌فرض فیلدهای متنی ۲۰ کاراکتر است.

ورودی تک‌گزینه‌ها

<input type="radio"> تعریفتک‌گزینه‌ها。

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

مثال

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

آزمایش کنید

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

Male

Female

دکمه ارسال

<input type="submit"> تعریف برای ارسال بهبرنامه‌ریزی فرم（form-handler）ارسالدکمه‌های فرم

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

برنامه‌ریزی فرم در فرم action در ویژگی‌ها مشخص شده است:

مثال

<form action="action_page.php">
نام:<br>
<input type="text" name="firstname" value="Mickey">
<br>
نام خانوادگی:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

آزمایش کنید

در مرورگر به این شکل به نظر می‌رسد:

نام:


نام خانوادگی:


ویژگی Action

ویژگی actionتعریف عملیاتی که در ارسال فرم اجرا می‌شود.

روش معمول ارسال فرم به سرور استفاده از دکمه ارسال است.

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

در مثال‌های بالا، یک اسکریپت سرور مشخص شده است که فرم ارسالی را پردازش می‌کند:

<form action="action_page.php">

اگر ویژگی action省力行 شود، action به صفحه فعلی تنظیم می‌شود.

ویژگی Method

ویژگی methodتعیین می‌کند که کدام روش HTTP برای ارسال فرم استفاده می‌شود (GET یا POST):

<form action="action_page.php" method="GET">

یا:

<form action="action_page.php" method="POST">

چه زمانی باید از GET استفاده کرد؟

می‌توانید از GET (روش پیش‌فرض) استفاده کنید:

اگر ارسال فرم غیرفعال است (مثلاً جستجوهای موتورهای جستجو) و شامل اطلاعات حساس نیست.

وقتی از GET استفاده می‌کنید، داده‌های فرم در آدرس بار صفحه قابل مشاهده هستند:

action_page.php?firstname=Mickey&lastname=Mouse

توجه:GET برای ارسال مقدار کمتر از داده‌ها مناسب‌تر است. مرورگر محدودیت ظرفیت را تنظیم می‌کند.

چه زمانی باید از POST استفاده کرد؟

باید از POST استفاده کنید:

اگر فرم در حال به‌روزرسانی داده‌هاست یا شامل اطلاعات حساس (مثلاً رمز عبور) است.

امنیت POST بهتر است، زیرا داده‌های ارسالی در آدرس بار صفحه قابل مشاهده نیستند.

ویژگی Name

برای اینکه به درستی ارسال شوند، هر فیلد ورودی باید یک ویژگی name داشته باشد.

در این مثال فقط فیلد ورودی "نام خانوادگی" ارسال می‌شود:

مثال

<form action="action_page.php">
نام:<br>
<input type="text" value="Mickey">
<br>
نام خانوادگی:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

آزمایش کنید

داده‌های فرم را با <fieldset> ترکیب کنید

<fieldset> عناصر را برای داده‌های مرتبط در فرم ترکیب می‌کند

<legend> عنصر <fieldset> برای تعریف عنوان استفاده می‌شود.

مثال

<form action="action_page.php">
<fieldset>
<legend>اطلاعات شخصی:</legend>
نام:<br>
<input type="text" name="firstname" value="Mickey">
<br>
نام خانوادگی:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

آزمایش کنید

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

اطلاعات شخصی:
نام:


نام خانوادگی:


ویژگی‌های فرم HTML

عنصر <form> HTML، با تنظیم تمام ویژگی‌های ممکن به این شکل است:

مثال

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
element‌های فرم
 .
</form>

در زیر لیست ویژگی‌های <form> آورده شده است:

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

توجه:شما در بخش‌های زیر بیشتر درباره ویژگی‌ها یاد خواهید گرفت.