تگ چک باکس در HTML آموزش checkbox + فیلم آموزشی

تگ چک باکس در html (البته باید بگوییم صفت checkbox ) یک صفت از تگ input می باشد. با استفاده چک باکس در فرم یک مربع کوچک جلوی هر گزینه ایجاد می شود که کاربر می تواند به دلخواه یک یا چند گزینه را تیک برند.

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

چک باکس در html

• <input type=”checkbox”> یک چک باکس تعریف می کند.
• چک باکس یک مربع کوچک ایجاد می کند که کاربر برای انتخاب هر گزینه، این مربع را تیک (چک) می زند.
• کاربر مجاز است به دلخواه یک یا چند گزینه را انتخاب کند. (بر خلاف تگ radio رادیو باتن که کاربر فقط حق انتخاب یک گزینه را دارد و بیشتر نمی تواند انتخاب کند)

نکته: همیشه از تگ label برای ارائه توضیحات راجع به گزینه ها استفاده می شود.

مثال: در مثال زیر یک فرم طراحی شده که مهارت کاریر در برنامه نویسی را به صورت چک باکس بررسی می کند.

<form action="#" method="#">

<div class="maharat"> مهارت شما: <br><br>
<label for="front">فرانت اند</label>
<input type="checkbox" name="front" id="front" checked>

<label for="backend">بک اند</label>
<input type="checkbox" name="backend" id="backend">

<label for="full">فول استک</label>
<input type="checkbox" name="full" id="full">
</div>

 

<input type="submit" value="ارسال">

</form>

خروجی:

<label>: با این تگ برای هر چک باکس موضوع آن را می نویسیم تا کاربر با مشاهده لیبل هر چک باکس، گزینه مورد نظر خود را تیک بزند.

<input type=”checkbox”>: هر input با خاصیت چک باکس یک مربع کوچک ایجاد می کند که قابل تیک زدن است.

name: خاصیت name را برای برنامه نویسی بک اند می نویسیم. یعنی تعیین می کنیم وقتی کاربر این گزینه را انتخاب کرد با چه نامی به سرور ارسال شود. بدون داشتن نام، سرور نمی تواند گزینه انتخاب شده را تشخیص دهد.

checked: این ویژگی را می توانیم فقط برای یکی از گزینه های چک باکس تعریف کنیم و مقدار خاصی هم نمی گیرد. checked برای هر گزینه تعریف شود آن گزینه به صورت پیش فرض تیک می خورد.

id و for: کاربر برای انتخاب هر گزینه باید روی مربع کوچک جلو هر گزینه کلیک کند تا تیک آن زده شود. یعنی مثلا اگر روی کلمه «فراند اند» کلیک کند تیک آن زده نمی شود و فقط باید روی مربع کوچک آن کلیک کند. برای اینکه این محدودیت را برداریم برای هر چک باکس یک id خاص تعریف می کنیم. این مقدار که برای id در نظر گرفته ایم را باید به <lable> نیز اختصاص دهیم. این کار را با تعریف خاصیت for برای لیبل انجام می دهیم. (به مثال دقت کنید مقدار id و  for برای هر گزینه یکسان است.)

چک باکس در css

می توانیم با استفاده از css استایل های بسیار زیبایی برای هر checkbox به وجود بیاوریم که آن را از حالت یک مربع کوچک دربیاوریم و مثلا آن را به شکل یک دکمه در بیاوریم که کاربر بتواند آن را خاموش یا روشن کند.

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

 <label class="myCheck"> <input type="checkbox"> <span class="handle"></span> </label>
<label class="myCheck"> <input type="checkbox"> <span class="handle"></span> </label>

 <style>

.myCheck {
position: relative;
display: inline-block;
width: 70px;
height: 40px;
}

.handle {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #c9cacb;
cursor: pointer;
transition: .5s;
}

.myCheck input:checked + .handle {
background: #36cf22;
}

.handle:before {
content: "";
position: absolute;
top: 7px;
left: 5px;
width: 25px;
height: 25px;
background: #FFFFFF;
transition: .5s;
}

.myCheck input:checked + .handle:before {
transform: translateX(30px);
}

</style>

خروجی:

نکته: اگر با استایل دهی به خوبی آشنا نیستید در دوره html css وبسافت3 که به رایگان برای شما تهیه شده است شرکت کنید. (لینک این دوره در ابتدای همین مطلب قرار داده شده است)

جمع بندی:

تگ چک باکس در html در فرم ها به کاربران اجازه می دهد یک یا چند گزینه را از بین گزینه هایی که برای آنها در نظر گرفته ایم انتخاب کنند. برای ایجاد هر گزینه از <input type=”checkbox”> استفاده می کنیم و همچنین یک لیبل برای راهنمایی کاربر در نظر می گیرم. همچنین خاصیت هایی دیگری مانند name، id و … هم تعریف می کنیم که تمامی موارد توضیح داده شد. اگر در این رابطه سوال یا مشکلی داشته باشید در بخش نظرات مطرح نمایید.