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

• Replication of the form, which is no real solution
• Usage of JavaScript, which may be turned off on some computers, plain HTML is faster by default, …

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

Example

you can also click me!

“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.”

 

or do you want click me?

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