خانه / کامپیوتر / اموزش / آموزش برنامه نویسی HTML (قسمت ۲۱)

آموزش برنامه نویسی HTML (قسمت ۲۱)

آموزش برنامه نویسی HTML (قسمت ۲۱)

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

لیست کشویی چیست ؟!!!

به لیست هایی که شامل بیشتر از دو گزینه هستند که کاربر می تواند از میان آنها گزینه مورد نظر خود را انتخاب کند لیست کشویی میگویند ، شاید سوالی در ذهن شما به وجود بیاید که چرا از رادیو باکس استفاده نمیکنیم ؟ جواب ساده است زیرا رادیو باکس ها فضای زیرادی ازصفحه را اشغال میکنند و از لیست ها در مکان های مختلفی از وب سایت می توان استفاده کرد .

 

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

 

برای ساخت یک لیست کشویی از تگ <select> و </select> استفاده می کنیم .

اما این تگ به تنهایی کاربردی ندارد، برای گذاشتن گزینه ها در لیست از تگ <option> و </option> بین تگ آغازین و تگ پایانی select استفاده میکنیم .

به مثال زیر توجه کنید :

به همین راحتی ما یک لیست کشویی ایجاد کردیم ، اما این لیست بی فایده است زیرا هیچ نتیجه ای در صفحه پردازشگر فرم ندارد بنابراین برای تگ Select یک شناسه name قرار داده و برای تگ ها option یک مقدار توسط شناسه Value مشخص میکنیم.

همانطور که قبلاً گفته شد، در شناسه Value شما مقدار دلخواه را وارد میکنید و کاملاً اختیاری است، ما به شکل زیر مقادیر را وارد کردیم :

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

 

شاید هدف ما انتخاب تنها یک گزینه توسط کاربر نباشد و ما بخواهیم کاربر بتواند چند مورد را انتخاب کند ، برای این کار از شناسه Multiple با مقدار Multiple استفاده میکنیم، توجه کنید که برای انتخاب چند گزینه هم زمان شما باید دستتان را روی دکمه Ctrl نگه دارید بعد انتخاب کنید.

توجه کنید که در صورتی که Multiple فعال باشد چند گزینه از لیست به صورت همزمان نمایش داده میشود که به طور پیشفرض در مرورگر ها چهار گزینه است ، نمونه زیر را مشاهده فرمایید :

تفاوت این لیست کشویی با لیست کشویی بالا ، در انتخاب چند گزینه همزمان است که با نگه داشتن کلید Ctrl میتوانید انتخاب کنید و اینکه چندین گزینه نمایش داده می شود.

 

حالا یک مشکلی وجود دارد ، به طور مثال در لیست بالا ما سه گزینه داریم ولی مقادیر پیشفرض مرورگر باکس را به اندازه چهار گزینه همزمان نمایش میدهد ، جهت تنظیم مقدار گزینه هایی که نمایش داده می شوند از شناسه Size استفاده می کنیم که مقدار آن عددی بزرگتر از صفر است. به نمونه زیر توجه فرمایید :

همانطور که مشاهده می فرمایید ما با استفاده از شناسه size تعداد گزینه ها رو به ۲ گزینه محدود کردیم …

 

خب حالا فرض کنید منوی ما دارای دسته بندی های مختلف با زیر محموعه های مختلفی است ، به طور مثال :

– قطعات کامپیوتر

  • سی پی یو
  • مادر بورد
  • پاور

قطعات موبایل

  • کاور موبایل
  • کیف موبایل
  • فلش مموری

اگر ما بخواهیم چنین لیستی را با حفظ دسته بندی در یک لیست کشویی قرار دهیم باید از تگ <optgroup> و <optgroup/> برای هر دسته استفاده کنیم.

که این تگ شامل یک شناسه به نام Lable می باشد که عنوان گروه را در این شناسه قرار میدهیم و گزینه ها را مطابق قبل در تگ <option> می گذاریم .

به مثال زیر توجه فرمایید :

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

 

اما مانند قبل باید به لیست بالا name و value بدهیم تا بتوانیم از آن استفاده کنیم (مقادیر اختیاری است که شامل حروف و عدد می تواند باشد) که به شکل زیر در می آید :

 

میدونم خسته شدید از مبحث فرم ها …

در آموزش بعد فرم ها تمام شده و به سراغ مباحث دیگر میرویم .

 

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


موفق باشید.

 

دانلود سورس آموزش این جلسه (حجم : ۱ کیلوبایت)

درباره ی nasimazadi

همچنین ببینید

واحد پردازش مركزي CPU 

واحد پردازش مركزي CPU مدت زمان انجام يك كار بوسيله كامپيوتر، به عوامل متعددي بستگي …

پاسخ دهید

%u0637%u0631%u0627%u062D%u06CC %u0633%u0627%u06CC%u062A
طراحی سایتسئوفروش ویلا و اجاره ویلاسرویس و تعمیر کولر گازیاجاره ویلافروش ویلا