آموزش HTML5: ادامه کار با فرم ها در HTML (قسمت دهم)

قسمت دهم آموزش HTML5

سلامی به گرمی نان و تنور، درود و شادباش این بار با عنوان کار با فرم ها در HTML❕❕❕

😆 هیچ ربطی به شعر نداشت، فقط می خواستم با شروعی متفاوت غافلگیرتون کنم 😆

🔴 توجه توجه: این مقاله با سردرد و عشق برای افراد پرانرژی نوشته شده است. لطفاً اگر درحال حاضر با کمبود انرژی مواجه هستید، مقداری آب خنک🚿 بر صورت مبارک زده و یک فنجان قهوه داغ☕ برای خود آماده کنید تا با تمرکز مضاعف به یادگیری بپردازید. 🔴

🔥هیچ اتومبیلی بدون سوخت، حرکت نمی کند و ما هم بدون انرژی، یاد نخواهیم گرفت🔥

در این مطلب قصد داریم به ادامه نکات ساخت فرم در HTML بپردازیم. پیشنهاد می شود اگر آموزش های پیشین HTML5 را دنبال نکردید، حتماً ویدیوهای قبلی را مشاهده بفرمایید تا روند درک مطالب ساده تر گردد.

اما بپردازیم به قسمت دهم آموزش HTML5 با موضوع کار با فرم ها در HTML:

 

در ادامه به شکل متن و تصویر، مبحث کار با فرم ها در HTML را مورد بحث و بررسی قرار خواهیم داد:

همانطور که در جلسه نهم آموزش HTML5 توضیح داده شد، با به کارگیری تگ <form> قادر خواهیم بود فرم های تماس برای کاربران طراحی نماییم در ادامه به رسم همیشه به صورت متن و عکس، مبحث کار با فرم ها در HTML را مورد بحث و بررسی قرار خواهیم داد. این بخش جهت رفاه حالِ افرادی است که به هر دلیلی کمتر با آموزش های ویدیویی ارتباط برقرار می کنند.

🕵 تحت هیچ شرایطی قیدِ یادگیری را نزنید. راهش را پیدا کنید 🕵

 

آشنایی با تگ <textarea> و خصوصیات مهم آن در HTML

یکی از دستورات بسیار کاربردی که تقریباً در همه فرم های تماس از آن استفاده می شود، TextArea است که با استفاده از تگ باز و بسته ی <textarea> می توان یک جعبه متن بزرگ ایجاد نمود.

این ناحیه متن (textarea)دو خاصیت مهم دارد که در زیر به تعریف هر کدام از آن ها پرداخته ایم:

🔵 خاصیت Cols: در این قسمت می توانیم تعداد ستون های جعبه متن خود را تعیین نماییم. به عنوان مثال: ناحیه متنی که در تصویر زیر مشاهده می نمایید، دارای 50 ستون می باشد.

🔵 خاصیت Rows: این بخش به ما کمک می کند تا تعداد سطرهای ناحیه متن خود را مشخص کنیم. عکس زیر دارای 25 سطر می باشد.

بدیهی است که با تغییر مقادیر این دو خاصیت می توان ناحیه متنی با اندازه دلخواه ایجاد کرد.

 

آموزش کار با فرم ها در HTML بحث textarea

 

نحوه اتصال المان های خارج از تگ <form>

همانطور که در جلسه قبل آموزش HTML5 عنوان شد، در فرم ها صرفاً اطلاعاتی به سمت سرور ارسال می شود که داخل تگ <form> قرار گرفته باشند.

اما در برخی از پروژه های طراحی سایت، گاهی مجبور می شویم دستوراتی که خارج از تگ <form> نوشته شده اند را نیز به سمت سرور ارسال نماییم. در این صورت شاید کمی کار غیر اصولی به نظر برسد و حدالامکان نباید اجازه دهیم این اتفاق رخ دهد.

اما اگر زمانی ناچار به انجام همچین کاری شدیم، باید آن دستور که خارج از تگ <form> نوشته شده است را با انتساب یک مشخصه، به تگ <form> متصل نماییم.

مثلاً: در تصویر زیر ما دستور <textarea> را خارج از تگ <form> تعریف کردیم و می خواهیم زمانی که کاربر روی دکمه submit کلیک کرد، اطلاعات وارد شده در ناحیه متن نیز به همراه اطلاعات وارد شده در فرم، سمت سرور ارسال گردد.

روش کار به این صورت است: ابتدا خاصیت Form را در دستور خارجی وارد کرده و سپس یک مقدار منحصر به فرد به آن انتساب می دهیم (در اینجا با form1 مقدار دهی شده است)و در مرحله دوم، در تگ فرم مورد نظر خاصیت Id را وارد کرده و همان مقداری که در خاصیت Form وارد کرده ایم را این بار به خاصیت Id انتساب می دهیم.

 

💡اگر مقدار خاصیت id و form یکسان نباشد اتصال برقرار نخواهد شد💡

 

آموزش کار با فرم ها در HTML و اتصال form ها به عناصر بیرونی

 

آموزش ساخت Drop Down List یا Combo Box

یکی از امکاناتی که در فرم ها به شدت مورد استفاده قرار می گیرد Drop Down List یا Combo Box ها هستند. حتماً در برخی فرم های استخدامی یا ثبت نام دیده اید که با استفاده از یک لیست کشویی، از شما می خواهند که تعیین کنید اهل کدام شهر و استان هستید. این بخش ها تماماً با کدهایی که امروز با هم یاد خواهیم گرفت، ساخته شده اند.

اما فرق بین Combo Box و Drop Down List چیست؟

این سوال به هیچ وجه کاربردی نیست اما جهت افزایش اطلاعات عمومی بد نیست بلد باشیم.

⭐⭐⭐همین اطلاعات جنبی هستند که از ما یک Super Senior Developer می سازد⭐⭐⭐

 

تفاوت بین Combo Box و Drop Down List چیست؟

چهار اصطلاح است که با استناد به مقاله ای که در سایت رسمی مایکروسافت منتشر شده است، در زیر به طور مختصر به روایت متن و تصویر ارائه گردیده است:

Text Box: هر بخشی که در آن متن قرار گیرد به آن Text Box گفته می شود. اما اگر بخواهیم این اصطلاح را به سبک برنامه نویسان تعریف کنیم، باید بگوییم: هر قسمتی که کاربر بتواند در آن متنی وارد کند، Text Box نام دارد.

Drop Down List: به آیتم هایی که به صورت کشویی برای کاربران نمایش داده می شود و به کاربر قدرت انتخاب می دهد، Drop Down List گویند. با دقت به تصویر زیر می توان معنی هر کدام از این اصطلاحات را به خوبی درک کرد.

Drop Down Button: دقیقاً به دکمه ای گفته می شود که کاربر زمانی که روی آن کلیک می نماید، Drop Down List نمایش داده می شود.

Combo Box: به کل این جعبه کشویی که برای کاربر نمایش داده می شود، Combo Box گفته می شود.

در واقع طبق تعریفِ موجود در سایت رسمی مایکروسافت، فرق Combo Box با Drop Down List در دو مورد خلاصه می شود:

🔵 لیست های کشویی که کاربر اجازه تایپ نیز داشته باشد،  Combo Box گفته می شود و لیست هایی که کاربر صرفاً می تواند موارد از پیش تعریف شده را انتخاب نماید، Drop Down List نام دارد.

🔵 به شکل کلیِ تمامی عناصر موجود در یک لیست کشویی Combo Box گویند و یکی از اجزای Combo Box که لیست ها را نمایش می دهد، Drop Down List نام دارد.

فرق بین Combo Box و Drop Down List در زبان HTML

آشنایی با قاعده نحوی (Syntax)ساخت Drop Down List ها در HTML

خب پس از آشنایی با اصطلاحات، حال قصد داریم به نحوه پیاده سازی آن در سایت را مورد بررسی قرار دهیم.

با استفاده از تگ <select> می توان یک جعبه خالی از محتوا را ایجاد نمود. اما این جعبه باید آیتم هایی در آن قرار گرفته شود که با استفاده از تگ <option> این کار انجام خواهد شد. همانطور که در تصویر زیر پیداست، تمامی آیتم هایی که قصد داریم به صورت کشویی برای کاربر باز شوند، درون تگ <option> نوشته می شوند.

در این میان یک تگ دیگر نیز چشمک می زند تحت عنوان <optgroup> که اگر تمامی تگ های <option> در آن قرار گیرند، هنگام اجرا در مرورگر، سطر اولِ جعبه کشویی ما خالی از متن نمایش داده می شود و آیتم ها بعد از این فاصله سفید رنگ، نمایش داده خواهد شد.

 

آموزش کار با فرم ها در HTML بحث Drop Down List

 

امکان انتخاب چند آیتم در Drop Down List

اما اگر بخواهیم به کاربر اجازه دهیم که بتواند چند آیتم را از لیست کشویی ما انتخاب کند، فقط کافیست خاصیت multiple را به تگ <select> انتساب دهیم. در این صورت Drop Down List ما به شکل زیر در مرورگر نمایش داده خواهد شد:

 

 

 

انتخاب آیتم پیش فرض در تگ <option>

اگر سیاست ما بر این باشد که یکی از آیتم ها به صورت پیش فرض (By Default)انتخاب شده باشد، می توانیم با درج خاصیت selected در هر یک از تگ های <option> به هدف خود دست پیدا کنیم. نتیجه ی کار در تصویر زیر قابل مشاهده است:

 

کار با فرم ها در HTML قسمت selected

آشنایی با تگ معجزه آسای <datalist> در HTML5

در این قسمت از آموزش قصد داریم با نوشتن چند خط کد HTML نمونه ای Low Level از Search ایجکسی را در سایت خود ایجاد نماییم.

🔴 جستجوی ایجکسی چه است❓❕

حتماً شما هم در برخی سایت ها مانند دیجی کالا امکان جستجوی سریع را دیده اید. زمانی که واژه ای را در جعبه جستجو تایپ می کنیم، قبل از این که دکمه Enter روی کی بورد را فشار دهیم تا نتایج جستجو برای ما نمایان شود، یکسری پیشنهادات نزدیک به خواستگاه ما نمایش داده می شود که می توانیم بسیار سریع تر و راحت تر کاربران را به نتایج مطلوب شان وصل نماییم.

 

🔍در HTML5 تگِ جدیدی تحت عنوان <datalist> معرفی شد که این کار را برای ما انجام می دهد🔍

 

فقط کافیست ابتدا یک تگ <input> از نوع text box بسازیم و سپس تگ باز و بسته ی <datalist> را قرار دهیم و درون <datalist> نیز آیتم هایی که می خواهیم به کاربر پیشنهاد داده شود را در قالب تگ های <option> مانند تصویر زیر اضافه می نماییم.

در مرحله آخر می باید Text Box را به datalist متصل نماییم. برای این کار ابتدا به تگ <input> خاصیتِ List را با مقداری دلخواه انتساب می دهیم و همان مقدار را نیز با در خاصیت Id در تگ <datalist> قرار می دهیم (دقیقاً مانند کاری که در قسمت قبل برای اتصال دستورات خارج از فرم انجام دادیم).

 

 

جمع بندی مقاله ادامه کار با فرم ها در HTML از نگاه محمدرضا یعقوبی:

دستوراتی که این جلسه و جلسه نهم با موضوع کار با فرم ها در HTML عنوان شد، جزء کلیدی ترین مباحثی بود که یک برنامه نویس حرفه ای در ابتدای کار می باید به طور کامل بر آن ها مسلط شود.

💡برنامه نویس شدن نیازمندِ تخصص است و کسب تخصص هم انرژی و زمان بسیار می خواهد💡

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

مانند همیشه اگر سوال یا ابهام و یا پیشنهادی داشتید، حتماً پایین همین مطلب بنویسید. قطع به یقین با کمال میل پاسخ داده خواهد شد.

انشاءالله که همه چیز همان طور که پیش بینی کرده اید، جلو برود.

ارادتمند همه ی شما دوستان خوشفکر- محمدرضا یعقوبی

 

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

رونمایی از محصول قدم صفر کسب و کار + گارانتی بی قید و شرط
همین الان توضیحات محصول را می خوانم