OpenCart – Using HTML LABEL Tag

What is more annoying than when you try and click on a radio button text and the button doesn’t check off? This is because too often designers do not use the LABEL tag when building web forms…or just using the form attribute Radio. Using the LABEL tag is very simple to do and worth it especially if you expect to provide a useable button that users are promised to actually click. If you don’t then what happens is that your users will only be able to click on the actual radio circle “button” and not the text. Using the LABEL tag will allow for the text that is next to it to activate the button too, when clicked on.

Here is an example form that does not use the LABEL tag:

<form action="demo_form.asp">

  <input type="radio" name="sex" id="male" value="male"><br>
 
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

And now here is an example of the radio button code for product option in Opencart which you will see DOES use the Label Tag:

 <?php if ($option['type'] == 'radio') { ?>
        <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
          <?php if ($option['required']) { ?>
          <span class="required">*</span>
          <?php } ?>
          <b><?php echo $option['name']; ?>:</b><br />
          <?php foreach ($option['option_value'] as $option_value) { ?>
          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
          <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>

If there were actually options associated with a product, and the user set of RADIO for the type then you will see this show up on the front end. Notice this:

 

<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
            <?php if ($option_value['price']) { ?>
            (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
            <?php } ?>
          </label>

The label tag will only work with an ID. The ID that it uses must match the ID on the actual radio button. Here is an example of the form we were using at the beginning but with the LABEL tag.

<form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

It’s worth taking the time to do things the right way. Just a simple over-sight may lose you a customer.

Looking for quality OpenCart Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 1 = 5

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>