Use label as distant button in HTML

Hi folks,

Did you ever had the problem, that you wanted to invoke the same action at two or more different locations on your page?

Approaches

Besides of these two possibilities, the not so obvious solution – at least for me – was the usage of the label tag.

Example

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

 

Code

<input id="test_button" type="button" value="click me…" onclick="alert('thanks for clicking')" />
<label for="test_button">or do you want to click me?</label>

Conclusions

You may include as many labels as you like. An example for the usage would be the navigation on top and bottom of a form.

Tested on FF 3.6, Opera 10, Chrome 5, IE 8

Greetz,
Berny

Leave a Reply

You must be logged in to post a comment.