فرم‌های HTML

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

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

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

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

مثال

<form>
 .
عناصر فرم
 .
</form>

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

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

عناصر <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 会被设置为当前页面。

اگر action نمبر کو چھوڑ دیا جائے تو، action موجودہ ویب پیمانے کو سیٹ کیا جائے گا۔

Method نمبرmethod نمبرHTTP کا طریقہ کار مقرر کرنا چاہئیے جو فرم کی پیشکش کے دوران استعمال کیا جائے گا ( گیٹ یاپوسٹ

):

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

یا:

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

آپ کو جب گٹ کا استعمال کرنا چاہئیے تو،

اگر فرم کی پیشکش پائیدار طریقے سے کی جائیں اور حساس معلومات نہیں شامل ہیں تو،

آپ کو جب گٹ کا استعمال کرتے ہیں تو، فرم کی اعداد و شمار ویب پیمانے میں دیکھائی دیکھائیں گا:

action_page.php?firstname=Mickey&lastname=Mouse

توجه:گیٹ کو کم مقدار کی اعداد و شمار کی پیشکش میں سب سے بہتر استعمال کیا جاتا ہے۔ براہ راست بروزر کو صلاحیت دی جاتی ہے تاکہ باندھ میں محدودیت رکھی جائے۔

پوسٹ کی کیا استعمال کرنا چاہئیے؟

آپ کو پوسٹ کا استعمال کرنا چاہئیے:

اگر فرم اعداد و شمار کو اپدیت کرنا چاہئیے یا حساس معلومات (مثلاً پاسورڈ) شامل ہیں تو،

پوسٹ کی سیکورٹی بہتر ہے، کیونکہ پوسٹ کئے گئے اعداد و شمار ویب پیمانے میں دیکھائی نہیں جاسکتے۔

نام نمبر

اگر کوئی ورودی فیلڈ صحیح طریقے سے پیش کیا جانا چاہئے تو، ہر ورودی فیلڈ کو 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>
.
عناصر فرم
 .
</form>

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

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

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