آموزش HTML – فصل بیست و یکم: فرم ها

المان <form> در HTML

المان Form، یک فرم برای جمع آوری ورودی های کاربر را تعریف می کند.

یک فرم اچ تی ام ال حاوی المان های زیر مجموعه فرم می باشد. المان های زیر مجموعه فرم، نمونه های مختلف المان های ورودی هستند. مثل زمینه های متنی, چک باکس ها، دکمه های Radio، دکمه های ثبت و غیره.

مثال تعریف یک فرم با فیلد های نام و نام خانوادگی در HTML:

المان <input> در زبان HTML

المان <input> مهم ترین المان فرم است. المان <input> را میتوان به روش های مختلف نمایش داد و این به خاصیت type بستگی دارد. برای تغییر type می توانید به صورت <input type="TYPE"> المان را تعریف کنید.

اینجا چند مثال از type های مختلف وجود دارد:

• Text یک زمینه ورودی متن یک خطی را تعریف می کند.
• Radio یک دکمه Radio را تعریف می کند (برای انتخاب کردن از بین چند مورد)
• Checkbox حالت چک باکس را ایجاد می کند (برای انتخاب کردن چند مورد با هم)
• Submit یک دکمه ثبت را تعریف می کند (برای ثبت کردن فرم)

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

ورودی متن (Text input) در فرم HTML

<input type=”text”> یک زمینه ورودی متن یک خطی را برای وارد کردن متن تعریف می کند.

مثال:

که بدین صورت در مرورگر نمایش داده می شود.

نکته : فرم به خودی خود قابل نمایش نیست. همچنین توجه داشته باشید عرض معمولی یک زمینه متن یا همان text field، بیست کاراکتر است.

ورودی دکمه Radio در فرم HTML

<input type=”radio”> یک دکمه رادیویی را تعریف میکند. دکمه های رادیویی به کاربر این اجازه را می دهند که یکی از چند انتخاب محدود را انتخاب کند.

مثال:

کد اچ تی ام ال بالا به صورت زیر در یک مرورگر نمایش داده می شود:

دکمه ثبت (Submit button) در فرم HTML

<input type=”submit”> یک دکمه برای ارسال داده فرم به یک فایل سمت سرور را تعریف می کند.

مثال:

ثبت کننده فرم به صورت نمونه یک فایل یا همان script است برای پردازش داده های ورودی. ثبت کننده فرم در یک خاصیت action برای form مشخص می شود.

خاصیت action در فرم HTML

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

در مثال بالا داده فرم فرستاده می شود به یک فایل با نام /action_page.php . این صفحه حاوی یک فایل server-side است که داده فرم را پردازش می کند.

اگر خاصیت action از قلم انداخته شود action بر روی صفحه حاضر تنظیم می گردد. یعنی اطلاعات به صفحه ای که کاربر در آن حضور دارد ارسال می شود.

خاصیت target در فرم HTML

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

مقدار پیشفرض برای این خاصیت _self است که بدین معنی است که فرم در همین صفحه ثبت شود. برای اینکه نتیجه فرم را در یک صفحه جدید باز کنید باید از مقدار _blank استفاده کنید.

مثال :

دیگر مقادیر ممکن برای خاصیت تارگت _parent ، _top و نام یک iframe است.

خاصیت method در فرم HTML

خاصیت method، متود HTTP (get یا post) را برای استفاده در هنگام ثبت یک داده فرم مشخص می کند.

مثال استفاده از متد get:

مثال استفاده از متد post:

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

متود پیشفرض ثبت یک فرم داده get است. وقتی متد get استفاده می شود داده فرم ثبت شده در آدرس صفحه یا همان url نمایان می شود:

نکته هایی درباره متد get

• این متد داده فرم را در url به صورت جفت های نام و مقدار اضافه می کند.
• طول یک url محدود است (حول و حوش 3000 کاراکتر)
• هیچ وقت از get برای فرستادن داده حساس (مثل رمز عبور) استفاده نکنید چون در url قابل مشاهده است.
• وقتی که یک کاربر میخواهد نتیجه عملیات یک فرم را بوک مارک کند، متد get مفید است.
• Get برای داده های نا امن بهتر است مثل Query Strings (مثلا فرم جستجو).

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

اگر که داده ی فرم حاوی مطالب حساس یا شخصی است همیشه از post استفاده کنید. متود post داده فرم ثبت شده را در زمینه آدرس صفحه نمایش نمی دهد.

برنامه نویس سمت سرور می تواند اطلاعات ارسالی توسط یک فرم را به سادگی استخراج کند.

نکاتی راجع به متد post

• Post محدودیت اندازه ای ندارد و میتوان از آن برای فرستادن مقادیر زیادی از داده ها استفاده کرد.
• ثبت های فرم به وسیله post را نمی توان بوک مارک کرد. زیرا اطلاعات ارسالی به یک صفحه، فقط یک بار قابل ارسال است و برای بار دوم اطلاعات منقضی می شود.

خاصیت name در زمینه های ورودی فرم HTML

هر زمینه ورودی (input) برای ثبت شدن به یک خاصیت name نیاز دارد. اگر که خاصیت name از قلم انداخته شود داده آن زمینه ورودی به هیچ وجه ارسال نمی شود.

این مثال فقط زمینه ورودی “last name” را ثبت می کند. زیرا زمینه first name خاصیت name را در المان خود ندارد.

مثال :

دسته بندی فرم با تگ <fieldset>

المان <fieldset> برای دسته بندی کردن داده های مرتبط در یک فرم استفاده می شود.

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

تگ <fieldset> فقط نمایشی است و پردازشی برر روی داده انجام نخواهد داد. یعنی داده به همان صورت دسته بندی نشده ارسال می شود.

مثال:

کد اچ تی ام ال بالا به این صورت در مرورگر نمایش داده می شود: