HTML Check boxes

Building Check Boxes in HTML

HTML Check boxes: Check boxes are used in a number of ways for miscellaneous purposes in the World Wide Web; however, the most common usage remains with user feedback and surveys or exam quizzes. Let us build one such quiz seeking a response for user’s ancestral land in the below sample check boxes based form.

A sample check box code

 <label>What is ancestral land   </label>

        <p>

          <input type = “checkbox”

                 id = “Lahore”

                 value = “Lahore” />Lahore

        </p>

        <p>

          <input type = “checkbox”

                 id = “Calcuta”

                 value = “Calcuta” />Calcuta

        </p>

        <p>

          <input type = “checkbox”

                 id = “Disney”

                 value = “Disney” />Disney

        </p>

Building a Step by Step check box user input:

Step 1: Add a label to the check box based user input:

 

<label>What is ancestral land   </label>

 

Step 2: Proceed with the insertion of your first checkbox value:

 

<input type = “checkbox”

                 id = “Lahore”

                 value = “Lahore” />Lahore

 

Step 3: Wrap your data inside a paragraph<p>.

Step 4: Remember that the user will see what you type outside the <input/> tag. Try removing Lahore from the above checkbox and you will see a blank check box with no visible value for the user.

Step 5: Put your code in some browser, I prefer either Chrome or Firefox, you may move on with your choice and see the results. It should look something like the below:

Single checkbox html

Step 6: Add more check box data and see the result in your browser:

HTML multi check box

Step 7: Check if your created checkboxes work: for instance I belong to Lahore and I select the checkbox Lahore in this case:

HTML checkbox selected

Well, it seems to be working perfectly fine. 

Leave a Reply