چک باکس در فرم HTML – نوع checkbox در المان <input>

نوع checkbox در المان <input> برای ایجاد چک باکس یا جعبه بررسی در فرم های HTML به کار می‌رود. چک باکس ها معمولا به صورت یک مربع کوچک نمایش داده می‌شوند. از این ویجت های گرافیکی برای فراهم آوردن امکان انتخاب یک گزینه یا عدم انتخاب آن استفاده می‌شود. برای ایجاد چک باکس در HTML از المان <input> با مقدار checkbox برای خصوصیت type به صورت <input type="checkbox"> استفاده می‌شود.

بیشتر بخوانید: چک باکس یا Checkbox چیست؟

مثال زیر نمونه استفاده از المان <input> برای ایجاد چک باکس در فرم های HTML را نمایش می‌دهد. در این مثال، یک المان <input> برای چک باکس و یک المان <label> مربوط به آن همراه با یک المان <input> برای دکمه سابمیت و المان <form> دربرگیرنده آن‌ها را مشاهده می‌کنید:

<form action="/action.php" method="post">
  <input type="checkbox" id="python" name="skill" value="python">
  <label for="python">Python</label><br>
  <input type="submit" value="Send">
</form>

کد فوق معمولا مشابه با تصویر زیر توسط مرورگرهای وب رندر می‌شود:

پیشنهاد می‌شود برای دسترس پذیری بهتر، مشابه با مثال فوق برای هر چک باکس یک المان <label> درج کنید. این المان، برچسب یا لیبل چک باکس را مشخص می‌کند. در این مثال المان <label> برچسبی با متن Python به چک باکس اختصاص می‌دهد. برای اتصال المان <label> به المان <input> لازم است مقدار خصوصیت for در المان <label> برابر با مقدار خصوصیت id در المان <input> باشد.

با وجود لیبل، کاربر می‌تواند علاوه بر جعبه چک باکس با کلیک روی لیبل نیز حالت چک باکس را تغییر دهد. به این ترتیب امکان تیک زدن یا برداشتن تیک از چک باکس به خصوص در صفحه‌نمایش‌های کوچک آسان‌تر خواهد بود. چرا که لیبل فضای بزرگتری در مقایسه با جعبه کوچک چک باکس اشغال می‌کند و کلیک یا ضربه زدن روی آن ساده‌تر است.

خصوصیت name و value در چک باکس های HTML

مقدار خصوصیت value در المان های <input> با نوع checkbox داخل صفحه وب نمایش داده نمی‌شود. در واقع اگر چک باکس تیک خورده باشد این مقدار هنگام سابمیت فرم همراه با مقدار خصوصیت name به صورت name=value برای سرور ارسال می‌شود. بنابراین در مثال فوق، جفت نام/مقدار به صورت skill=python سابمیت می‌شود.

اگر خصوصیت value برای چک باکس درج نشود و چک باکس تیک خورده باشد از مقدار پیشفرض on استفاده می‌شود. به این ترتیب در مثال فوق، اگر خصوصیت value و مقدارش را از المان <input> اول حذف کنیم جفت نام/مقدار به صورت skill=on سابمیت می‌شود.

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

تیک زدن چک باکس به صورت پیشفرض و خصوصیت checked

برای اینکه چک باکس در یک فرم HTML به صورت پیشفرض هنگام لود صفحه تیک خورده باشد کافیست از خصوصیت بولی checked در المان <input> استفاده کنید. مثال زیر نمونه چنین المانی را نمایش می‌دهد:

<input type="checkbox" id="python" name="skill" value="python" checked>

فراموش نکنید خصوصیت checked وضعیت فعلی چک باکس را نشان نمی‌دهد. اگر کاربر تیک چک باکس را بردارد یا آن را تیک بزند روی این خصوصیت تغییری ایجاد نمی‌شود. بنابراین در مورد چک باکس ها صرفا دریافت جفت name=value بیانگر انتخاب یک چک باکس خواهد بود.

چک باکس های مرتبط با یکدیگر

برای چک باکس های مرتبط در اچ‌تی‌ام‌ال بهتر است از مقدار یکسانی برای خصوصیت name استفاده کنید. به عنوان نمونه در مثال زیر از مقدار یکسان skill برای خصوصیت name در سه چک باکس مرتبط استفاده شده است. کاربر می‌تواند متناسب با مهارت های خود هرکدام از چک باکس های Python, Java و PHP را تیک بزند.

<form action="/action_page.php">
  <input type="checkbox" id="python" name="skill" value="python">
  <label for="python">Python</label><br>
  <input type="checkbox" id="java" name="skill" value="java">
  <label for="java">Java</label><br>
  <input type="checkbox" id="php" name="skill" value="php">
  <label for="php">PHP</label><br>
  <input type="submit" value="Send">
</form>

فرض کنید در این فرم کاربر چک باکس های Python و PHP را تیک بزند. در این صورت جفت های نام/مقدار به صورت skill=python&skill=php سابمیت می‌شود.

بازگشت به فهرست مجموعه آموزشی HTML