سلام به همگی امیدوارم خوب باشید و آماده آموزش کار با فرم در html. دوستان تو این جلسه میخوام نحوه استفاده از فرم توی صفحات وب رو بهتون آموزش بدم. بحث فرم‌ها موضوع خیلی وسیع و پرکاربردی از آموزش html هست. به همین دلیل ممکنه آموزش فرم ها چند جلسه‌ای طول بکشه اما ازتون میخوام صبور باشید و تک تک نکاتی که میگم رو مهم بدونید و به این نکات توجه کنید. خب دیگه بیشتر از این مقدمه چینی نمیکنم، بریم سراغ آموزش!!!.
آشنایی با تگ فرم در html:
فرم‌ها مهمترین قسمت هر سایت هستن. دلیلش اینه که هر کاربری که به سایت شما میاد برای تعامل برقرار کردن با شما از فرم استفاده میکنه. برای مثال اگه بخواید اطلاعاتی از کاربر دریافت کنید باید از یه فرم برای دریافت این اطلاعات استفاده کنید. یا مثلا اگه کاربر قصد داشته باشه توی سایت شما ثبت نام کنه و یا خریدی از سایت انجام بده از طریق فرم ثبت نام و فرم خرید این کار رو انجام میده. بنابراین می‌بینید که فرم خیلی مهمه. بنابراین مهمه که فرم رو بلد باشید، آیتم‌ها و خصیصه‌های اون رو به خوبی بشناسید و توی استفاده از اونها ماهر باشید.
به طور کلی پیاده سازی فرم در html به کمک تگ فرم انجام میشه. کد زیر نحوه پیاده سازی یه فرم در html رو نشون میده که قصد داریم در ادامه این کد رو با هم بررسی کنیم و بگیم هر بخش اون چه معنا و کاربردی داره پس باهام همراه باشید.
<form action=”/action_page.php” method=”post”>
<input type=”text” id=”fname” name=”fname” value=”John”>
<button type=”submit” >ارسال اطلاعات </button>
</form>
خروجی این کد یه فرم ساده تشکیل شده از یه تکس باکس برای دریافت نام و یک دکمه برای ارسال اطلاعات هست. نکته مهمی که باید درباره تگ فرم بدونید این هست که همه اجزا فرم مثل کادرهای ورود متن، لیبل ها، دکمه ها و… باید داخل تگ باز و بسته form قرار بگیرن. اگه این المان ها رو بیرون تگ فرم بنویسید، اگرچه توی خروجی نمایش داده میشن اما وقتی روی دکمه ارسال اطلاعات کلیک کنید هیچ اتفاقی نمیفته.
قبل از اینکه بخوایم طراحی فرم رو شروع کنیم و فرم‌های پیچیده طراحی کنیم، بهتره یه سری مفاهیم اولیه راجع به فرم‌ها یاد بگیریم که توی این جلسه میخوام به اونها بپردازم.
مفهوم خصیصه action، فرم در html:
بیاید فرض کنیم شما توی سایتتون یه فرم ساختید که کاربرها بتونن از طریق این فرم توی سایتتون ثبت نام کنن. پس انتظار دارید که وقتی کسی اطلاعاتش رو وارد میکنه و روی دکمه ارسال اطلاعات کلیک میکنه، اطلاعاتش به عنوان یه کاربر ثبت نام شده ذخیره بشه و این فرد از این به بعد بتونه با استفاده از یک نام کاربری و رمز عبور وارد سایت بشه و از امکانات سایت استفاده کنه.
برای اینکه چنین اتفاقی بیفته باید اطلاعات کاربر توی پایگاه داده سایت ذخیره بشه. بنابراین کد html ما باید یه درخواست به سرور بفرسته و درخواست کنه که سرور عمل ثبت نام کاربر رو برای اطلاعات وارد شده انجام بده. اما html چطور باید سرور رو متوجه کنه که چنین درخواستی داره؟
جواب این سوال، خصیصه action هست. این خصیصه مشخص میکنه که هر فرمی که طراحی میشه بعد از کلیک روی دکمه ارسال اطلاعات باید کدوم تابع در سمت سرور رو فراخوانی و اطلاعات رو به اون ارسال کنه. به عنوان کسی که دانش قبلی از وب نداره و تازه اول راه هست نیاز نیست خیلی با action درگیر بشید چون احتمالا الان قضیه کمی براتون مبهمه. فقط بدونید این خصیصه برای فراخوانی یک دستور سمت سرور هست.
مفهوم خصیصه method، فرم در html:
وقتی action رو بهتون توضیح دادم گفتم بعد از کلیک دکمه ارسال اطلاعات، اطلاعات فرم به یک تابع سمت سرور فرستاده میشن. خصیصه method مشخص میکنه این اطلاعات چطور و با چه فرمتی فرستاده بشن. method به طور کلی دو نوع داره که اینها هستن:
- Get
- Post
احتمالا الان این سوال توی ذهنتون شکل گرفته که Get و Post چی هستن و چه فرقی با هم دارن؟ در ادامه میخوام این قضیه رو به طور کامل بهتون توضیح بدم.
Get : وقتی برای ارسال اطلاعات فرم به سرور از متد get استفاده می‌کنیم، اطلاعات فرم توی نوار آدرس مرورگر به صورت کلید مقدار نمایش داده میشن. حالا اگه یه هکر در حال رصد کردن فعالیت سایت ما باشه از اونجایی که میتونه آدرس ها رو رصد کنه و اطلاعات فرم هم داخل نوار آدرس نوشته شده میتونه اطلاعاتی که سایت ما به سمت سرور می‌فرسته رو ببینه و این قضیه باعث میشه امنیت سایت ما بیاد پایین. به همین دلیل بهتره برای ارسال اطلاعات فرم به سمت سرور از متد get استفاده نکنیم.
Post : متد Post برای ارسال اطلاعات به سمت سرور استفاده میشه و مشکلات متد Get رو نداره. از نظر امنیتی اوکیه و توصیه میشه که برای ارسال اطلاعات به سمت سرور از متد post استفاده کنیم.
حتما الان با خودتون میگین اگه قراره همیشه از post استفاده کنیم، پس اصلا دلیل وجود داشتن متد get چیه؟؟!!!
سوال خوبیه!!. جواب اینه که متد get زمانی استفاده میشه که قصد داشته باشید اطلاعاتی رو از سرور دریافت کنید و توی قسمتی از صفحه html که طراحی کردید نشون بدید. مثلا قصد داشته باشید اطلاعات یه کاربر رو توی پروفایلش نمایش بدید و یا لیست همه کاربرهای سایت رو به مدیر سایت نمایش بدید، از متد get استفاده می‌کنید.
دکمه ارسال اطلاعات فرم:
تا اینجای کار با تگ فرم و دو تا از خصیصه های مهم اون آشنا شدیم. اگه به کد زیر نگاه کنید می‌بیند که داخل تگ فرم دو تا تگ دیگه هست. اولی تگ input هست که توی یه مطلب دیگه اختصاصا این تگ رو توضیح دادیم. دومین تگ هم تگ button هست که به دکمه ارسال اطلاعات اشاره داره. در ادامه قصد دارم این تگ رو بهتون معرفی کنم.
<form action=”/action_page.php” method=”post”>
<input type=”text” id=”fname” name=”fname” value=”John”>
<button type=”submit” >ارسال اطلاعات </button>
</form>
تگ button برای نمایش دکمه در html استفاده میشه. اگه دقت کنید این تگ یه خصیصه داره به اسم type. با توجه به اینکه مقدار type چی هست، عملکرد دکمه متفاوته و شما به عنوان یه طراح باید انواع button و کاربرد هر کدوم از اونها رو به خوبی بشاسید. به طور کلی خصیصه type سه نوع داره:
- button
- submit
- reset
اگه مقدار type برابر با button باشه یه دکمه معمولی توی سایت نمایش داده میشه. برای مثال دکمه رفتن به یه صفحه دیگه، نمایش یک پیغام به کاربر و… . اگه بخوام دقیق‌تر بگم این دکمه ها هیچ تابعی در سمت سرور رو فراخوانی نمیکنن و مربوط به سمت کلاینت هستن.
اگه مقدار type برابر با submit باشه که توی مثال بالا هم همینطوره، این دکمه مخصوص ارسال اطلاعات فرم به سمت سرور هست. یعنی یه دکمه درون فرم تا زمانی که از نوع submit تعریف نشه توانایی ارسال اطلاعات به سمت سرور رو نداره!!!.
در آخر اگه یه دکمه از نوع reset تعریف بشه این قابلیت رو داره که تمام اطلاعات فرم رو پاک کنه. با کلیک این دکمه یه فرم ریست شده بهتون تحویل داده میشه که بتونید از اول نسبت به پر کردن اون اقدام کنید.
سخن آخر:
توی این مطلب آموزشی فرم و نکات اولیه‌ای که باید راجع به اون بدونید رو بهتون توضیح دادم. در ادامه قصد داریم المان‌های درون فرم رو با هم یاد بگیریم و فرم‌های واقعی طراحی کنیم. اگه دوست دارید بیشتر راجع به فرم‌ها مطالعه کنید می‌تونید به این سایت مراجعه کنید.
موفق و پیروز باشید?.
