تگ checkbox در HTML
تگ checkbox یکی از عناصر پرکاربرد در فرم‌های HTML است که به کاربران امکان انتخاب چند گزینه از میان موارد موجود را می‌دهد. این تگ بخشی از عنصر <input> بوده و با مقدار type="checkbox" تعریف می‌شود.
ساختار پایه تگ checkbox
ساده‌ترین شکل استفاده از چک‌باکس به صورت زیر است:
<input type="checkbox" id="option1" name="options" value="1">
<label for="option1">گزینه اول</label>
- id: شناسه منحصر به فرد برای عنصر
- name: نامی که برای ارسال داده‌ها به سرور استفاده می‌شود
- value: مقداری که در صورت انتخاب به سرور ارسال می‌شود
| ویژگی |
توضیح |
| checked |
تعیین حالت پیش‌فرض انتخاب شده |
| disabled |
غیرفعال کردن چک‌باکس |
| required |
اجباری کردن انتخاب حداقل یک گزینه |
کاربردهای عملی
چک‌باکس‌ها در موارد متعددی استفاده می‌شوند:
- فرم‌های ثبت نام (انتخاب علاقه‌مندی‌ها)
- فیلترهای جستجو (انتخاب دسته‌بندی‌ها)
- تنظیمات کاربری (فعال/غیرفعال کردن ویژگی‌ها)
- لیست کارها (علامت زدن کارهای انجام شده)
همیشه از تگ <label> همراه با چک‌باکس استفاده کنید تا تجربه کاربری بهتری ایجاد شود. این کار باعث می‌شود کاربر با کلیک روی متن نیز بتواند چک‌باکس را انتخاب کند.
مثال پیشرفته
در این مثال یک گروه چک‌باکس با ویژگی‌های مختلف ایجاد کرده‌ایم:
<fieldset>
<legend>انتخاب ویژگی‌ها</legend>
<input type="checkbox" id="feature1" name="features" value="fast" checked>
<label for="feature1">سرعت بالا</label><br>
<input type="checkbox" id="feature2" name="features" value="secure">
<label for="feature2">امنیت</label><br>
<input type="checkbox" id="feature3" name="features" value="support" disabled>
<label for="feature3">پشتیبانی 24/7 (به زودی)</label>
</fieldset>
برای اطلاعات بیشتر درباره ویژگی‌های تگ چک‌باکس می‌توانید تگ checkbox در html.
استایل دهی به چک‌باکس
با استفاده از CSS می‌توان ظاهر چک‌باکس‌ها را کاملاً تغییر داد:
input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #e74c3c;
}
input[type="checkbox"]:checked {
border-color: #2ecc71;
}
امروزه با استفاده از تکنیک‌های مدرن CSS مانند appearance و clip-path می‌توان چک‌باکس‌های کاملاً سفارشی طراحی کرد.
