طراحی سایت ساناتک
0
تگ Radio Buttons

Radio Buttons

زمانی که بخواهیم کاربر تنهای یکی از گزینه ها را انتخاب کند به جای checkbox ها باید از Radio Buttons استفاده نماییم.

نمونه ای از نحوه نمایش Radio Buttons

نمونه ای از نحوه نمایش Radio Buttons

کد زیر برای پیاده سازی Radio Buttons استفاده می شود:

<p>

<input type="radio" name="timeslot" id="morning"

value="morning"/>

<label for="morning">In the morning</label>

<br/>

<input type="radio" name="timeslot" id="afternoon"

value="afternoon"/>

<label for="afternoon">In the afternoon</label>

<br/>

<input type="radio" name="timeslot" id="evening"

value="evening"/>

<label for="evening ">In the evening</label>

</p>

 

تفاوت کلیدی در اینجا با checkbox ها این است که ما سه انتخاب داریم، با این حال خصوصیت name برای هر سه input ها یکسان است. مهم است بدانید که: مقدار یکسان در خصوصیت name است که هر سه گزینه را به هم ربط می دهد. آن ها از name یکسانی بهرمند هستند و تفاوت در خصوصیت value است. آن زمان که کاربر گزینه ای را انتخاب می کند و فُرم را submit می کند، value مورد نظر است که برای سرور ارسال می شود.

باید خاطرنشان کرد که به هر کدام از input ها id خاصی اختصاص داده شده است، در واقع باید انگونه بوده و id که برای هر تگ استفاده می شود باید خاص آن تگ باشد، حالا چه این تگ، تگِ فُرم باشد، چه image و چه یک تگِ HTML فرقی نمی کند. در این مورد نکته مثبتی که وجود دارد تگِ label است که باید یک شناسه خاص اشاره داشته باشد.

چرا Radio Buttons؟

رادیوهای قدیمی کلیدهایی داشتند که هر کدام بر روی یک کانال تنظیم می شد و با فشردن دکمه کانال دیگر دکمه قبلی از جای خود بیرون آمده و در واقع طراحی به گونه ای بود که در آنِ واحد تنها یک کلید فعال می شد، بر همین اساس نام این گونه از checkbox ها را radio buttons گذاشته اند.

گزینه از پیش انتخاب شده در Radio Buttons

تکنیکی که در اینجا به کار می گیریم دقیقا به مانند آن چه که پیشتر در checkbox ها دیده بودیم می باشد:

<p>

<input type="radio" name="timeslot" id="morning" value="morning"

checked="checked"/>

<label for="morning">In the morning</label>

<br/>

<input type="radio" name="timeslot" id="afternoon"

value="afternoon"/>

<label for="afternoon">In the afternoon</label>

<br/>

<input type="radio" name="timeslot" id="evening"

value="evening"/>

<label for="evening ">In the evening</label>

</p>

 

تعداد بازدید: 113
مطالب دیگر آموزش طراحی سایت
باگ‌ های شناخته شده مرورگرهاراستی‌ آزمایی کدهای CSS و HTML بعد از طراحی سایترفع خطاهای احتمالی هنگام طراحی سایتدقیق‌ تر شدن در استفاده از jQueryنمایش کپشن‌ های تصاویر درون گالری سایت
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید