تگ radio در HTML + ویدیو آموزشی

تگ Radio در HTML در فرم ها به کار می رود و به کاربران اجازه می دهد یکی از گزینه ها را انتخاب کنند. زمانی که از دکمه رادیو استفاده می کنیم کاربر نمی تواند بیش از یک گزینه را انتخاب کند. مثلا برای تعیین جنسیت می تواند مرد/زن را انتخاب کند. در زیر با تگ Radio در HTML و شیوه اصولی استفاده از آن آشنا خواهی شد.

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

آموزش استفاده از تگ radio در html

رادیو (Radio) در واقع یک خصوصیت تگ Input در HTML است که به کاربران اجازه می دهد از بین گزینه های مختلف فقط یکی را انتخاب کنند. مثلاً در یک فرم ثبت نام، کاربران می‌توانند جنسیت خود را با انتخاب یکی از گزینه‌های “مرد” و “زن” مشخص کنند.

برای استفاده از تگ Radio در HTML، ابتدا باید یک تگ Form در html ایجاد کنید و سپس تگ‌ Input با نوع Radio را درون آن قرار دهید.

مثال 1:

<form>
<input type="radio" name="gender" value="male">مرد<br>
<input type="radio" name="gender" value="female"> زن<br>
</form>

[code]

 

در این مثال، ما یک فرم با دو گزینه "Male"، "Female" داریم. از آنجایی که هر دو گزینه دارای نام یکسان "gender" هستند، فقط یک گزینه از این دو گزینه قابل انتخاب است.

 

<b>مثال 2:</b>

[code]

<form>
<p>سن خود را انتخاب کنید</p>
<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
<input type="submit" value="ارسال">
</form>

در فرم بالا برای هر گزینه یک لیبل (label) نیز در نظر گرفته شد. همانطور که می بینید برای هر label ویژگی for در نظر گرفته شده که با مقدار id گزینه بالای آن یکسان است. یکسان بودن مقدار for و id باعث می شود که لیبل با رادیو به هم متصل شوند. یعنی کاربر با کلیک روی لیبل نیز می تواند گزینه مورد نظر را انتخاب کند. (در مثال 1 کاربر برای انتخاب هر گزینه باید روی دایره جلو هر گزینه کلیک کند.)

برای اطلاعات بیشتر در این رابطه می توانید مقاله تگ label در html و ویدیو آموزشی آن را مشاهده کنید.

کاربرد رادیو (Radio)

همانطور که گفته شد هنگامی که از ویژگی رادیو استفاده می کنیم کاربر مجاز است فقط یکی از گزینه ها را انتخاب کند. هنگامی که کاربر یک گزینه را انتخاب کرد می تواند گزینه را تغییر دهد، ولی با تیک زدن هر گزینه تیک گزینه قبل برداشته می شود. بنابراین زمانی این تگ کاربرد دارد که انتخاب چند گزینه هم زمان با هم در تضاد باشد. اگر می خواهید فرمی طراحی کنید که کاربر بتواند چند گزینه را انتخاب کند می توانید از چک باکس در html استفاده کنید.

رعایت اصول سئو هنگام استفاده از Radio

استفاده از تگ‌ Radio در HTML باید با رعایت اصول سئو همراه باشد. به عنوان مثال، نام‌هایی که به Inputها داده می‌شود باید شرح دهنده محتوایی باشند که درون فرم استفاده می‌شود.

دو نکته مهم برای سئو صفحه هنگام استفاده از این تگ:

1- اتصال label به radio: همانطور که در مثال بالا دیدیم، برای هر تگ input یک label داریم که با استفاده از ویژگی for به radio مرتبط شده است. استفاده صحیح از این ویژگی، علاوه بر بهبود دسترسی و کاربری، می‌تواند در بهبود سئوی صفحه هم مؤثر باشد. برای این کار، کافیست برای هر تگ input، یک label مرتبط با آن ایجاد کنیم. در اینصورت موتورهای جستجو به راحتی ارتباط آنها را درک می کند و در در سئو بسیار موثر است.

2- استفاده از ویژگی name: با توجه به این که تگ radio برای ایجاد یک گروه از گزینه های مشابه استفاده می‌شود، استفاده از ویژگی name نیز بسیار مهم است. این ویژگی باید برای هر گروه از تگ های radio با مقدار یکسانی تعریف شود. با این کار، هم می‌توانید از تداخل نام تگ ها در صورت استفاده از تگ های مشابه در بخش های مختلف صفحه جلوگیری می کنید، و هم صفحه خود را برای موتورهای جستجو بهینه می کنید.

رعایت دو نکته ذکر شده در بالا می تواند به سئو صفحه شما بسیار کمک کند. بنابراین هنگام کدنویسی به اصول سئو نیز توجه داشته باشید.

منبع: https://www.w3schools.com/tags/att_input_type_radio.asp