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:

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

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

Well, it seems to be working perfectly fine.