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

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

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

فرمی که با استفاده از آموزشهای قبل ساختیم دارای دو فیلد نام و شماره بود که به شکل زیر نوشته شد :

 

اما یک فرم به اجزاء دیگری نیاز دارد، دکمه های انتخابی یا به اصطلاح چک باکس و همچنین دکمه های رادیویی …

به دلیل اینکه چک باکس و دکمه رادیویی هر دو جزء ورودی های کاربر محسوب می شوند باز هم از تگ <input> استفاده می کنیم، با این تفاوت که دیگر در شناسه type مقدار text را قرار نمیدهیم .

 

برای ساخت یک چک باکس باید در شناسه type مقدار checkbox را قرار دهیم، به مثال زیر توجه نمایید :

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

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

که نتیجه خروجی به این شکل در می آید :

فعالیت های مورد علاقه : ورزش رزمی دوندگی رانندگی مطالعه خوابیدن طولانی تماشای فیلم

 

کاربر می تواند هر کدام را که مورد نظرش باشد انتخاب کند و یا همه را انتخاب کند و یا اینکه هیچ مورد را انتخاب نکند،  این از خواص چک باکس است.

اما شاید ما بخواهیم کاربر فقط یکی از موارد را انتخاب کند و اینکه مجبور باشد حتماً یکی از موارد را انتخاب کند، برای این کار از دکمه های رادیویی استفاده میکنیم.

 

فرض کنید یک فیلد به نام جنسیت در فرم داریم که میخواهیم کاربر زن و مرد بودن را مشخص کنید، برای اینکار در شناسه type مقادار radio را انتخاب میکنیم، که به شکل زیر استفاده می شود:

که خروجی کد بالا به این شکل به نمایش در می آید:

جنسیت : مرد زن

 

در حالت بالا شما تنها میتونید یکی از دو مورد را انتخاب کنید.

یک سوال که شاید پیش بیاید این است که ما دو <input> مختلف داریم ، چطور تشخیص داده می شود که ما فقط یک مورد را میتونیم انتخاب کنیم ؟

جواب : به دلیل اینکه در شناسه Name اسم گزینه های رادیو باکس یکسان نوشته شده کاربر مجبور به انتخاب تنها یک گزینه است، در صورتیکه شما در شناسه Name اسامی مختلفی انتخاب کنید ، دیگر رادیو باکس ها به هم مرتبط نمی شوند و محدودیت انتخاب یک گزینه ای برداشته شده و ساختار رادیو باکس به هم میریزد.

 

خب حالا فرض کنید که ما میخواهیم یکی از گزینه های چک باکس و رادیو باکس به طور پیشفرض انتخاب شده باشد برای این کار باید از شناسه checked استفاده کنیم که مقدار این شناسه همان کلمه checked است. به طور مثال :

خب در بالا ما به طور پیشفرض برای کاربران در بخش فعالیت دوندگی و خوابیدن طولانی را انتخاب کرده و در بخش رنج سنی گزینه بین ۱۸ تا ۲۲ سال را انتخاب کردیم که خروجی به شکل زیر نمایش داده می شود.

فعالیت های مورد علاقه : ورزش رزمی دوندگی رانندگی مطالعه خوابیدن طولانی تماشای فیلم

رنج سنی : کمتر از ۱۸ سال بین ۱۸ تا ۲۲ سال بین ۲۲ تا ۳۰ سال بیشتر از ۳۰ سال

 

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

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

شناسه Value یک شناسه ضروری برای چک باکس و رادیو باکس می باشد.

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

 

نام و نام خانوادگی :

شماره موبایل :

فعالیت های مورد علاقه : ورزش رزمی دوندگی رانندگی مطالعه خوابیدن طولانی تماشای فیلم

جنسیت : مرد زن

رنج سنی : کمتر از ۱۸ سال بین ۱۸ تا ۲۲ سال بین ۲۲ تا ۳۰ سال بیشتر از ۳۰ سال

 

 

تقریباً فرم ما داره به شکل تکمیل شده خودش نزدیک میشه اما یکم ظاهر نامناسبی داره ، برای زیباتر شدن فرم از <br> و <b> استفاده میکنیم :

خروجی نهایی فرم زیبا شده به این شکل است :

نام و نام خانوادگی :
شماره موبایل :

فعالیت های مورد علاقه :
ورزش رزمی
دوندگی
رانندگی
مطالعه
خوابیدن طولانی
تماشای فیلم

جنسیت :
مرد
زن

رنج سنی :
کمتر از ۱۸ سال
بین ۱۸ تا ۲۲ سال
بین ۲۲ تا ۳۰ سال
بیشتر از ۳۰ سال

 

خب در حال حاضر فرم ما به شکل بالا در آمد اما هنوز هم کامل نشده است و هنوز هم میشه اون رو گسترش داد، در آموزش های بعدی همراه ما باشید …

 

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


موفق باشید.

 

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

درباره ی nasimazadi

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

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

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

پاسخ دهید

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