امتیاز دهید:

چنانچه بخواهیم گزینه ای در اختیار کاربران قرار دهیم که بتوانند آن را تیک بزنند، می توان کد زیر را وارد ویرایشگر متن خود کرد:

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Netshahr</title>
    </head>
    
    <body>
        <form action="send-form-information.php" method="post">
            <input type="checkbox">
        </form>
    </body>
</html>

پس از به روز رسانی مرورگر نتیجه زیر مشاهده خواهد شد:

checkbox in html form

در واقع کاربران با تیک زدن این گزینه می توانند اطلاعات مرتبط با این گزینه را برای وب سرور ارسال کند. برای آنکه نوشته ای در کنار این checkbox به نمایش در آوریم دو راه کار پیش رو داریم. راه کار اول این است که متنی را در کنار checkbox به صورت زیر قرار دهیم:

   <body>
       <form action="send-form-information.php" method="post">
           <input type="checkbox">گزینه اول</form>
   </body>

مجدد مرورگر خود را به روز رسانی می کنیم:

checkbox with text

راه کار دوم استفاده از تگی تحت عنوان <lable> است. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم:

<body>
        <form action="send-form-information.php" method="post">
            <lable for="firstCheckbox">گزینه اول</lable>
            <input type="checkbox" id="firstCheckbox"></form>
    </body>

همانطور که در کد فوق می بینیم، ابتدا از تگ های <lable> و </lable> استفاده کرده و متن "گزینه اول" را مابین این دو تگ قرار داده ایم. داخل تگ آغازین از Attribute یی تحت عنوان for استفاده کرده و مقدار آن را برابر با firstCheckbox قرار داده ایم که در ادامه توضیحات دلیل آن را متوجه خواهیم شد.
در تگ مربوط به <input> از Attribute یی تحت عنوان id که مخفف identification به معنی "هویت" است استفاده کرده ایم و مقدار آن را برابر با firstCheckbox قرار داده ایم. در واقع با این id هویتی برای تگ <input> تعریف کرده ایم که با استفاده از این id تگ <input> را به تگ <lable> معرفی کرده ایم.

checkbox in htm forms

حال فرض کنیم که از این آیتم فرم های اچ تی ام ال (HTML) چندین بار استفاده کرده ایم و می خواهیم یکی از آن ها به صورت پیش فرض تیک خورده باشد. برای این منظور کد فوق را به صورت زیر تکمیل می کنیم:

<body>
        <form action="send-form-information.php" method="post">
            <lable for="firstCheckbox">گزینه اول</lable>
            <input type="checkbox" for="firstCheckbox" >
            <br/>
            <lable for="secondCheckbox">گزینه دوم</lable>
            <input type="checkbox" for="secondCheckbox">
            <br/>
            <lable for="thirdCheckbox">گزینه سوم</lable>
            <input type="checkbox" for="thirdCheckbox" checked="checked">
        </form>
    </body>

می بینیم که سه checkbox تعریف کرده ایم و اگر به گزینه سوم خوب توجه کنیم، می بینیم که داخل تگ <input> از Attribute یی تحت عنوان checked به معنی "تیک خورده شده" استفاده کرده ایم و مقدار آن را برابر با checked قرار داده ایم. علاوه بر این از تگ </br> به منظور مجزا سازی checkbox ها از یکدیگر استفاده کرده ایم. حال با به روز رسانی مرورگر نتیجه را مشاهده خواهیم کرد:

using checked attribute for input tag

می بینیم که گزینه سوم بدون اینکه تعاملی با این صفحه از وب سایت داشته باشیم به صورت پیش فرض تیک خورده است.


نظرات
نظرات

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )