دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش HTML » آموزش ساخت چک باکس (CheckBox) و دکمه رادیو (Radio Button)
آموزش ساخت چک باکس (CheckBox) و دکمه رادیو (Radio Button)

آموزش ساخت چک باکس (CheckBox) و دکمه رادیو (Radio Button)

 نحوه ساخت چک باکس (CheckBox) برای استفاده در فرم های html

برای ساختن چک باکس هم باید از تگ <input> استفاده کرد . برای این کار باید از checkbox به عنوان مقدار شناسه type استفاده کنیم . در خط زیر یک نمونه از کد برای ساختن چک باکس آمورده شده است :

نتیجه این شکلیه :

در اینجا به توضیح برخی از شناسه هایی که برای چک باکس به کار می روند می پردازیم . به خاطر داشته باشید که همه این شناسه ها باید در داخل تگ <input> قرار بگیرن .

type

برای این که چک باکس متنی ایجاد کنیم باید مقدار این شناسه رو برابر checkbox قرار بدیم .

name

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

value

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

” checked = ” cheched

این شناسه برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیره و باعث میشه تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شودند .

” disabled = ” disabled

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

 

دکمه رادیو (Radio Button)

برای ساختن دکمه های رادیو هم باید از تگ <input> استفاده کرد . برای این کار باید از radio به عنوان مقدار شناسه type استفاده کنیم . در خط  زیر یک نمونه از کد برای ساختن دکمه رادیو آورده ام :

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

نتیجه اش این شکلیه :
Radio Button 1

Radio Button 2

Radio Button 3

در اینجا به توضیح برخی از شناسه هایی که برای دکمه رادیو به کار می روند می پردازیم . به خاط داشته باشید که همه این شناسه ها باید در تگ <input> مورد استفاده قرار بگیرن .

type

برای اینکه دکمه رادیو ایجاد کنیم باید مقدار این شناسه رو برابر مقدار radio قرار بدیم .

name

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

value

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

” checked = ” checked

این شناسه باعث می شود تا در هنگام باز شدن صفحه موردنظر به صورت انتخاب شده نمایش داده شود .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :


  1. فرزانه گفت:

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

  2. مصطفی گفت:

    سلام خسته نباشید!

    اگه بخوام سه تا رادیو بسازم و به هرکدام یک لینک متفاوت بدم
    بعد از طریق یه دکمه button باز بشن چطوری باید انجام داد؟!

    یعنی ,وقتی رادیو اول مثلا انتخاب شد
    وقتی دکمه button رو زدم بره به لینکی که در رادیو اول تعریف شده!

    • رضا طوماری گفت:

      سلام
      یه راهش اینه که با استفاده از PHP یا JavaScript بیایید یه مقدار خاصی به رادیو باتن بدید و وقتی که کاربر اون رو انتخاب کرد و دکمه button رو زد به لینک مورد نظر بره .

  3. farzaneh mtv گفت:

    سلام
    شما با چ برنامه ای کار میکنید ؟

    • رضا طوماری گفت:

      سلام
      منظورتون رو متوجه نشدم !!

      فیلم های آموزش HTML و CSS هم توی سایت آپلود شده اونجا می تونید نگاه کنید .

جواب سوال چیه ؟ *