Highlight the <input type="submit"> object of my choice?

[Pete Wilson]

How can I highlight the <input type="submit"> object that I want to
highlight?

1. In my form, the user enters his ID. He sees two submit "buttons,"
left labeled Cancel, the right labeled Signup.

2. If he enters his ID and selects the Signup button with his mouse,
all is well.

3. But if he enters his ID and then hits the Enter key, then the
(highlighted) Cancel button is taken.

4. Obviously it needs to be the other way around: Enter key must take
the Signup path.

How can I highlight the Signup button when the user enters the form
such that when he strikes the Enter key, the action on that Signup
button is taken? I don't find the answer to precisely this question in
the FAQ.

The form that shows the problem is at:

http://www.pwilson.net/submit-demo.html

Problem appears in IE6.0, Avant 10.1, and Firefox 0.10.1 (no visual
highlighting cue in FF, but the effect is the same).

I see that right-clicking the mouse anywhere inside the table (green
border) that's inside the form (red border) highlights the Cancel
button. Clicking anywhere outside that table removes the highlighting.
I have tried a few things, like adjusting the layout so that the
Signup button is first in the character stream but is displayed on the
right. Also tried tabindex. None of that worked for me.

Thanks so much for your help!

-- Pete Wilson

[Frances Del Rio]

'cancel' button should be type=reset, not type=submit.. also, not sure
about this, but might help if yout put submit button on left, cancel
button on right.. HTH.. Frances
Pete Wilson wrote:

How can I highlight the <input type="submit"> object that I want to
highlight?

1. In my form, the user enters his ID. He sees two submit "buttons,"
left labeled Cancel, the right labeled Signup.

2. If he enters his ID and selects the Signup button with his mouse,
all is well.

3. But if he enters his ID and then hits the Enter key, then the
(highlighted) Cancel button is taken.

4. Obviously it needs to be the other way around: Enter key must take
the Signup path.

How can I highlight the Signup button when the user enters the form
such that when he strikes the Enter key, the action on that Signup
button is taken? I don't find the answer to precisely this question in
the FAQ.

The form that shows the problem is at:

http://www.pwilson.net/submit-demo.html

Problem appears in IE6.0, Avant 10.1, and Firefox 0.10.1 (no visual
highlighting cue in FF, but the effect is the same).

I see that right-clicking the mouse anywhere inside the table (green
border) that's inside the form (red border) highlights the Cancel
button. Clicking anywhere outside that table removes the highlighting.
I have tried a few things, like adjusting the layout so that the
Signup button is first in the character stream but is displayed on the
right. Also tried tabindex. None of that worked for me.

Thanks so much for your help!

-- Pete Wilson

[Brian]

Pete Wilson wrote:

How can I highlight the <input type="submit"> object that I want to
highlight?
With css, but from the rest of your post, I think you mean "how can I
put focus on a particular submit input", in which case the answer would
be javascript. Mind you, that may not change how the form works with
regard to key presses.
1. In my form, the user enters his ID. He sees two submit "buttons,"
left labeled Cancel, the right labeled Signup.
Why is there a cancel button? What does it do?
2. If he enters his ID and selects the Signup button with his mouse,
all is well.

3. But if he enters his ID and then hits the Enter key, then the
(highlighted) Cancel button is taken.

4. Obviously it needs to be the other way around: Enter key must take
the Signup path.

How can I highlight the Signup button when the user enters the form
such that when he strikes the Enter key, the action on that Signup
button is taken?

I don't think there's anything in the spec to decide which input
type="submit" button is activated by an <enter> keypress.

I'd advise rethinking the form. Lose the "cancel" button. If the user
doesn't want to submit a registration, they won't press the "signup"
button. Simple as that.

--
Brian (remove "invalid" to email me)

[Pete Wilson]

Frances wrote:

'cancel' button should be type=reset, not type=submit.. also, not sure
about this, but might help if yout put submit button on left, cancel
button on right.. HTH.. Frances
Sorry, I didn't explain it clearly and I'm sorry I chose the word "Cancel"
for the submit-button value. In this form, "Cancel" means: abandon this
process that I'm in the middle of, and do it right now. I don't want to
submit the form content, I want to forget about it all together. Get me
outta' here.

My cgi interprets the button press, though for simplicity I don't show
this in the example. So type=reset lacks the effect I'm looking for.

Brian wrote:
I think you mean "how can I
put focus on a particular submit input", in which case the answer would
be javascript. Mind you, that may not change how the form works with
regard to key presses.
That works great the first time into the form. But if I take the focus
out of the form (by hand) and then re-select at some place inside the
form, the focus again moves to the cancel button as before. Very curious
behavior. It works that way in several browsers. Not whining, just
telling my experience with that particular solution.
If the user
doesn't want to submit a registration, they won't press the "signup"
button. Simple as that.

Absolutely. But the user has to press /something/ to leave the page
and the close-by cancel button, as opposed to e.g. the browser's back
button, seems very convenient and intuitive.

Thank you both.

-- Pete Wilson