فرم HTML – کار با فرم در HTML
خوش اومدین به هفتمین جلسه از دوره آموزش HTML. حتما تا حالا از فرم ها توی وب استفاده کردید. از صفحات ثبت نام و لاگین تا نظرسنجی ها و… همه یک فرم هستند که وظیفه اونها گرفتن ورودی از کاربر و ارسال اونها به سمت سرور هست. امروز میخایم با فرم و تگ های فرم که باعث میشه ما بتونیم یه فرم ورود اطلاعات رو ایجاد کنیم، آشنا میشیم. جدا از تگ های متنوعی که برای ایجاد فرم لازم هست، صفت ها و attribute های زیادی هم توی شکل گیری نهایی فرم ما دخیل هستند. همچنین قواعدی رو باید رعایت کنیم تا بتونیم اطلاعات درست و بدون مشکلی رو به سمت سرور بفرستم. از اونجایی که در این موضوع، ما با ورود اطلاعات سروکار داریم، نکات فنی زیادی در این خصوص هست که خیلی از آنها مربوط به امنیت است، چرا که یکی از مسیرهای نفوذ به وبسایت ها میتونه همینه فرم ها باشه. ما تو این جلسه با ساختار تگ های فرم آشنا میشیم و در دوره های دیگه حتما به سراغ امنیت فرم ها خواهیم رفت.
تگ form در HTML
تگ form اصلی ترین تگ برای ایجاد فرم هست. تگ form یه تگ دو قسمتی هست که تمامی تگ های دیگر مربوط به فرم داخل این تگ قرار میگیرن.این تگ هیچ تغییر ظاهری در خروجی نمیدهد و فقط این امکان را به ما میدهد که بتوانیم تگ های مربوط به فرم رو داخل اون قرار بدیم. تصویر زیر رو ببینید:
تگ form یک attribute اجباری داره بنام action . ما با استفاده از این صفت میتونیم مقصد فرم رو مشخص کنیم. به این معنی که بعد از اینکه کاربر فرم مورد نظر ما رو ارسال کرد، این صفت مشخص میکنه که اطلاعات به چه صفه ای باید ارسال بشن. در این قسمت صرفا قصد آشنایی با این صفت رو داریم پس در مورد چگونگی و نحوه ارسال و دریافت اطلاعات صحبتی نمیکنیم. تگ فرم یه attribute دیگه هم داره که خیلی کاربردی و مهم هست و اون method هست. این صفت، نحوه ارسال اطلاعات فرم رو مشخص میکنه که معمولا با دو مقدار GET یا POST پرمیشه. مقدار پیشفرض این صفت GET هست که در ویدیو با مثال عملی این موضوع رو شرح دادم.
تگ input برای ورود اطلاعات در HTML
پراستفاده ترین تگ داخل تگ form، تگ input هست. همانطور که از اسمش مشخص هست برای دریافت ورودی کاربرد داره. هرگاه لازم باشه که ما اطلاعات متنی (مانند نام و نام خانوادگی، آدرس، شماره تلفن، کلمه عبور، ایمیل و…) رو از کاربر بگیریم از این تگ استفاده میکنیم. همینطور که میبینید این موارد بسیار زیاد هستند و به همین دلیل هست که این تگ پرکاربرد است. به تصویر زیر نگاه کنید:
در تصویر بالا، من دو بار از تگ input استفاده کردم. در هر تگ input از سه صفت type و id و name استفاده کردم. از id قبلا استفاده کرده بودیم. یک نام اختصاصی برای تگ بود که میتونستیم با استفاده از اون id بهش دسترسی پیدا کنیم. صفت name هم برای هر عضوی از فرم که قرار هست اطلاعاتی رو ارسال کنه اجباری هست. در زمان دریافت اطلاعات در مقصد، از این نام برای شناسایی هر داده استفاده میشه. مثلا در اولین تگ inpu در خط 12 من قرار هست که “نام” کاربر را دریافت کنم، این “نام” با استفاده از صفت name با مقدار fname نامگذاری شده. بعد از ارسال اطلاعات، “نام” کاربر با عنوان fname در مقصد قابل دریافت هست. اگه به صفت type هر دو input دقت کنید با مقدار text مقداردهی شده است. خصوصیت type در تگ input چند مقدار مشخص رو فقط دریافت میکنه که توی جدول زیر میتونید این مقادیر رو ببینید:
| button | یک دکمه ایجاد میکنه |
| checkbox | ایجاد چک باکس که امکان انتخاب چند گزینه همزمان رو به کاربر میده |
| color | امکان انتخاب رنگ از جعبه رنگ |
| date | امکان انتخاب تاریخ |
| datetime-local | امکان انتخاب تاریخ و ساعت همزمان |
| امکان وارد کردن ایمیل | |
| file | امکان آپلود کردن فایل |
| hidden | این ورودی مخفی است و در صفحه خروجی دیده نمیشود |
| image | امکان آپلود کردن تصویر |
| month | امکان وارد کردن ماه |
| number | امکان اضافه کردن عدد |
| password | امکان وارد کردن کلمه عبو (هر کاراکتری که کاربر وارد کنه شبیه یک دایره دیده میشه) |
| radio | امکان انتخاب فقط یک گزینه از گزینه های موجود |
| range | امکان انتخاب یک عدد بین یک رنج مشخص |
| reset | خالی کردن تمامی inputهای فرم |
| search | امکان وارد کردن مقدار جستجو |
| submit | ارسال اطلاعات فرم به مقصد (دکمه تأیید نهایی) |
| tel | امکان وارد کردن شماره تلفن |
| text | امکان وارد کردن متن (در مثال بالا از این type استفاده کردیم) |
| time | امکان وارد کردن زمان |
| url | امکان وارد کردن یک آدرس اینترنتی |
| week | امکان وارد کردن شماره هفته |
هرچند برخی از این گزینه ها مربوط به HTML5 هستند ولی من برای تمامی این مقادیر در ویدیوی این پست، مثال زدم.
توی خط های 11 و 13 از دو تگ به نام های label استفاده کردم. نتیجه این دو تگ رو در خروجی میتونیم ببینیم. همونطور که از اسم این تگ مشخص هست به عنوان برچسب ازش استفاده میشه. این تگ یه صفت بنام for داره که با قراردادن مقدار id تگ input متناظر با اون، ارتباط بین label و input رو برقرار میکنیم.
مقدار radio برای صفت type در تگ HTML
من توی قطعه کد بالا از یه مقدار type دیگه در تگ input استفاده کردم. مقدار radio باعث میشه که من بتونم کاربر رو محدود کنم که فقط یک گزینه از بین گزینه های موجود انتخاب کنه. این حالت رو توی نظرسنجی ها دیدید. کاربر فقط میتونه یکی از گزینه هایی که من در اختیارش قرار دادم یکی رو انتخاب کنه. این گزینه ها با استفاده از صفت name به همدیگه مربوط میشن. مقدار صفت value که توی هر تگ استفاده شده در حقیقت مقداری هست که با انتخاب اون گزینه و بعد از تأیید فرم به سرور ارسال میشه. من با استفاده از تگ label یک مقدار رو مقابل هر تگ input قرار دادم. هرچند مقدار داخل تگ label با مقدار value که در تگ input اون قرار گرفته یکسان هست ولی اجباری برای انجام این کار نیست. نهایتا با انتخاب با انتخاب هر input این مقدار value هست که ارسال میشه و مقدار داخل label فقط برای نمایش به کاربر هست و تأثیری توی فرم ما نداره.
مقدار checkbox برای صفت type در تگ input
ما با استفاده از مقدار radio تونستیم کاربر رو محدود کنیم که فقط یک گزینه از بین گزینه های موجود انتخاب کنه. اما گاهی لازم میشه که کاربر بتونه از بین گزینه ها، چند گزینه رو همزمان انتخاب کنه. مثال زیر رو ببینید:
همونطور که در تصویر بالا میبینید این مقدار type در تگ input کاملا شبیه radio است با این تفاوت که کاربر امکان انتخاب چند گزینه را به صورت همزمان دارد. نکته مهم در این حالت این است که هر تگ input مقدار صفت name متفاوتی داره و نیاز نیست مثل radio مقدار name یکسانی داشته باشند. با تیک زدن هر input مقدار value آن input به سمت سرور ارسال میشه.
در مورد دیگر مقادیر صفت type این تگ، در ویدیوی این درس چند مثال ذکر کردم.
دریافت متن طولانی با استفاده از تگ textarea
همونطور که در فرم ابتدایی این درس دیدید، ما با استفاده از تگ input تونستیم مقدار متنی از کاربر بگیریم (نام و نام خانوادگی). اما گاهی لازم هست که این متن طولانی تر باشه. به عنوان مثال کاربر قرار هست بیوگرافی خودش رو در سایت وارد کنه. دیگه یک خط کفایت نمیکنه.از طرفی امکان ایجاد پاراگراف جدید و زدن دکمه Enter داخل تگ input وجود نداره، اینجاست که ما از تگ textarea که امکان دریافت محدوده بیشتری از متن رو داره استفاده میکنیم. مثال زیر رو بببینید:
من در خط 14 از تگ textarea استفاده کردم. به جز صفت name که باهاش آشنایی داریم دو صفت اختصاصی برای این تگ داریم با نام های rows و cols که مقدار سطر و ستونهای جعبه متن ما رو مشخص میکنه. اگه تو قسمت خروجی دقت کنید میشه تفاوت textarea رو با تگ input با type=text رو به راحتی ببینیم. تگ textarea علاوه بر اینکه متن بیشتری رو دریافت میکنه. امکان Enter زدن هم داخلش محیا هست و ما میتونیم چندین پاراگراف رو داخلش تایپ کنیم و همچنین با درگ کردن گوشه پایین textarea میتونیم ابعاد اون رو تغییر بدیم.
تگ select در فرم HTML
ما با استفاده از تگ select میتونیم یه drop-down لیست یا لیست بازشونده ایجاد کنیم. کاربر این امکان رو داره که یکی از گزینه های موجود توی این لیست رو انتخاب کنه. حتما قبلا توی فرم ثبت نام برای انتخاب نام کشور یا نام استان از این مورد استفاده کردید. به تصویر زیر نگاه کنید:
همینطور که میبینید من با استفاده از تگ select تونستم که یه لیست بازشونده ایجاد کنم که میتونیم توی خروجی اون رو ببینیم. این لیست چهار آیتم داره که با استفاده از تگ option اونها رو ایجاد کردم. برای تگ select از صفت خاصی استفاده نکردم فقط id و name رو استفاده کردم که باهاشون آشنایی دارم و برای تگ های option هم یک صفت value داریم که داخل اون مقدار دلخواه خودمون رو قرار میدیم که در صورت انتخاب اون آیتم، این مقدار داخل value به عنوان مقدار نهایی تگ select ما به سمت سرور ارسال میشه.
مقداری که مایل هستیم به عنوان مقدار تگ option روی صفحه نمایش، نشون داده بشه رو هم بین دو تگ باز و بسته option قرار میدیم.
فرم لاگین بالا رو با استفاده از مطالبی که در این درس آموختیم، آماده کردم. نوع type در آخرین تگ input (خط 19) برابر است با submit. این type باعث میشه که ورودی ما شکل یک دکمه به خودش بگیره که با کلیک روی این دکمه اطلاعات فرم به آدرسی که صفت action تگ form تعریف شده ارسال میشه. مقدار صفت value این تگ input هم نوشته روی دکمه است.
فرم HTML موضوع بسیار پرکاربرد و حساسی است. همانطور که در ابتدای درس گفتم نکات امنیتی زیادی در این خصوص هست که باید رعایت بشه. اما هدف ما در این درس آشنایی با فرم HTML و تگ های مربوط به اون بود. حتی در همین حیطه هم (کارکرد تگ ها در فرم HTML) موارد بسیار زیادی هست که در طول دوره های آموزشی دیگر کم کم با آنها آشنا میشیم. امیدوارم که در این درس آشنایی ابتدایی با مبحث فرم ها و تگ های فرم HTML بدست اورده باشید. این اطلاعات رو در آینده تکمیل تر میکنیم.
