Confused about forms and the submit button

Question

I have a form like the following:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST">
<div align="center">
<br><br>

<br><input type="submit" value="ABC" tabindex=0><br>
<br><input type="button" value="cancel"><br>
</div>
</form>
</body>
</html>

I would like the form to submit when the ENTER button is pressed and would also like the submit button to have have some color around it to show that it's default.

But it seems that I have to click the tab button to make the submit have blue around it as the default.

Is there some way to make it that the submit button is always the default and always shoes a blue circle around it to indicate this?

Also what if I have other input fields on the same html page but outside of the default. What I need is for the form to always submit when I press enter no matter where I am on that page. Is there some way to do this?

score 1 · Answer 1 · answered Jun 11 '11 at 16:39

1

The submit should always be the default — whilst the form is focused, which is difficult here because you have no real input fields. What does this form actually do?

Further than that, don't override browsers' default UI behaviour: you'll just confuse your users.

answered Jun 11 '11 at 16:39

Lightness Races in Orbit

378,754
76
643
1,055

Exactly. If there's a focused text field, select box, or radio button, the submit form will have the outline. – Jordan Jun 11 '11 at 16:41

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

For your enter-anywhere-submit, I would do it with jQuery. A lil bit of searching led me to this:

Submitting a form on 'Enter' with jQuery?

edited May 23 '17 at 12:04

Community

1
1

answered Jun 11 '11 at 16:36

Vinoth Gopi

734
4
11

score 0 · Answer 3 · answered Jun 11 '11 at 16:44

On forms, only the currently focused element has the blue outline, and this is typically a platform dependent feature.

That being said, you can customize that outline with a little bit of CSS to make the form look consistent across browsers:

form *:focus {
    outline:2px solid blue;
}

Now, to make the submit button always show that outline, I would give it a class of "default":

<input type="submit" value="ABC" tabindex="0" class="default">

Then change the above CSS to include that class:

form *:focus, input.default {
    outline:2px solid blue;
}

As for submitting the form on hitting enter: so long as an element in the form has focus, hitting enter will submit the form by default. If you want that to happen if the form doesn't have focus, you will need to use a little bit of JavaScript, but I don't recommend it, because as Tomalak says in his answer, you shouldn't change the browser's default behavior.

score 0 · Answer 4 · answered Jun 11 '11 at 16:47

If you use Jquery you could attach an event handler to the tag HTML (or the document itself). Since events bubble up the DOM, this would intrecept it even if it is outside the form. Then, if the key pressed is RETURN, you submit the form.

$(document).keyup(function(event){
    if (event.keyCode == 13){
         $('form[name=myform]').submit();
     }
});

Confused about forms and the submit button

4 Answers4