فرم‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از فرم در html)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
فرم‌های HTML
۱فرم‌ها
۲عناصر فرم
۳انواع ورودی
۴ویژگی‌های ورودی
۵ویژگی ورودی Form
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

مثال فرم HTML

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



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


عنصر <form>

عنصر <form> در HTML فرمی را تعریف می‌کند که برای جمع‌آوری ورودی کاربر استفاده می‌شود:[۱]

1 <form>
2 .
3 form elements
4 .
5 </form>

یک فرم HTML شامل عنصرهای فرم است.

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

عنصر <input>

عنصر <input> مهمترین عنصر فرم است.

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

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

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

ورودی متن

<input type="text"> یک ورودی متن تک خطی را مشخص می‌کند:

مثال

1 <form>
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname"><br>
4   <label for="lname">Last name:</label><br>
5   <input type="text" id="lname" name="lname">
6 </form>


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


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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.

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

عنصر <label>

به استفاده از عنصر <label> در مثال بالا دقت کنید.

تگ <label> یک برچسب برای بسیاری از عنصرهای فرم تعریف می‌کند.

عنصر <label> برای کاربران صفحه خوان‌ها مفید است، زیرا هنگامی که کاربر عنصر ورودی را انتخاب می‌کند، صفحه خوان برچسب را بلند خواهد خواند.

همچنین عنصر <label> به کاربرانی که برای کلیک کردم برروی ناحیه‌های بسیار کوچک (مانند Radio Buttonها یا چک باکس‌ها) مشکل دارند کمک می‌کند - زیرا هنگامی که کاربر برروی متن دورن عنضر <label> کلیک می‌کند، این کار باعث انتخاب یا عدم انتخاب radio button / چک باکس می‌شود.

ویژگی for مربوط به تگ <label> معادل ویژگی id برای عنصر <input> برای اتصال آنها به هم است.

ورودی Radio Button

<input type="radio"> یک radio button تعریف می‌کند

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

مثال

1 <form>
2   <input type="radio" id="male" name="gender" value="male">
3   <label for="male">Male</label><br>
4   <input type="radio" id="female" name="gender" value="female">
5   <label for="female">Female</label><br>
6   <input type="radio" id="other" name="gender" value="other">
7   <label for="other">Other</label>
8 </form>


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


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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


کلید Submit (ثبت یا ارسال)

<input type="submit"> یک کلید برای ارسال داده‌های فرم به مدیر فرم (به انگلیسی: Form Handler) استفاده می‌شود.

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

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

مثال

1 <form action="/action_page.php">
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" name="fname" value="John"><br>
4   <label for="lname">Last name:</label><br>
5   <input type="text" id="lname" name="lname" value="Doe"><br><br>
6   <input type="submit" value="Submit">
7 </form>


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


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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


ویژگی Action

ویژگی action عملی که باید هنگام submit فرم اجرا شود را مشخص می‌کند.

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

در مثال بالا، داده‌های فرم به صفحه ای به نام "/action_page.php" در سرور ارسال می‌شود. این صفحه شامل یک اسکریپت سمت‌سرور است که داده‌های فرم را مدیریت می‌کند:

<form action="/action_page.php">

اگر ویژگی action حذف شود، action برابر با آدرس صفحه فعلی تنظیم می‌شود.

ویژگی Target

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

مقدار پیش‌فرض “_self” است که یعنی فرم در همان صفحه جاری submit خواهد شد.

برای اینکه نتایج در تب جدید مرورگر باز شوند، از مقدار “_blank” استفاده می‌شود:

مثال

<form action="/action_page.php" target="_blank">


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


مقادیر صحیح دیگر “_parent” و “_top” هستند یا نامی که نشان دهنده نام یک iframe باشد.

ویژگی Method

ویژگی متد HTTP یک (GET یا SET) را برای استفاده در هنگام submit داده‌های فرم مشخص می‌کند.

مثال

<form action="/action_page.php" method="get">


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


یا:

مثال

<form action="/action_page.php" method="post">


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


چه زمانی از GET استفاده شود؟

متد پیش فرص هنگام submit داده‌های فرم GET است.

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

/action_page.php?firstname=John&lastname=Doe

نکات GET:

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

چه زمانی از POST استفاده شود؟

همیشه زمانی که داده‌های فرم شامل داده‌های حساس یا شخصی هستند از POST استفاده کنید. متد POST داده‌های submit شده فرم را در فیلد آدرس صفحه نمایش نمی‌دهد.

نکات POST:

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

ویژگی Name

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

اگر ویژگی name حذف شود، داده‌های آن فیلد ورودی اصلاً ارسال نخواهند شد.

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

مثال

1 <form action="/action_page.php">
2   <label for="fname">First name:</label><br>
3   <input type="text" id="fname" value="John"><br><br>
4   <input type="submit" value="Submit">
5 </form>


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


تمرین های HTML

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

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


منابع آموزشی