Selecting text on button

[dutchprogrammer]

Hi!
I've a problem concerning selecting text on buttons.
The visitors on my site should be enabled to use the browser's search function (ctrl+F in IE or '/' in Firefox) to find texts on buttons (or <input type=submit>).

E.g.: There are 400 buttons on my page with texts 1 to 400, and if the user searches for 123, the text on button 123 should be selected.

But for some reason, in both IE and Firefox text on a button cannot be selected with the mouse, let alone while searching.

Does anyone have a solution to this problem?

[rocknbil]

Welcome aboard dutchprogrammer, I do not have the "reason" but speculate it's because the search functions within the browsers are designed to search actual text values, not form controls. If you could select the text on a button, you wouldn't be able to click - you need to mouse down to select, which inherently begins with . . . a click.

Fixes:

Use labels?

<form action="">
<label for="some-button">123</label> <input type="button" name="some-button" id="some-button" value="123">
</form>

Create a page navigation using fragment identifiers (or named anchors)?

<p><a href="#form123">Go to 123</a></p>
.......

<form name="form123" id="form123" action="">
<!-- although just "123" works in FF, you should never begin an element id wih a number -->
<label for="some-button">123</label> <input type="button" name="some-button" id="some-button" value="123">
</form>

Create links to submit the form, not buttons? This requires Javascript, not the greatest suggestion but the text links will be "searchable." Be sure to return false on the link so it doesn't submit twice. If Javascript is disabled, the "regular href" link will submit the data in the query string but won't capture any entered form values.

<form name="form123" id="form123" action="">
<p><a href="yourScript?form=123" onClick="document.getElementById('form123').submit();return false;">Submit 123</a></p>
</form>

[dutchprogrammer]

Hi rocknbil,
Thanks for your help!