Question

Well I am trying to submit a form by pressing enter but not displaying a submit button. I don’t want to get into JavaScript if possible since I want everything to work on all browsers (the only JS way I know is with events).

Right now the form looks like this:

<form name='loginBox' target='#here' method='post'>     <input name='username' type='text' /><br />     <input name='password' type='password' />     <input type='submit' style='height: 0px; width: 0px; border: none; padding: 0px;' hidefocus='true' /> </form> 

Which works pretty well. The submit button works when the user presses enter, and the button doesn’t show in Firefox, IE, Safari, Opera and Chrome. However, I still don’t like the solution since it is hard to know whether it will work on all platforms with all browsers.

Can anyone suggest a better method? Or is this about as good as it gets?

Answer 1

Update 2022: Use this instead

<input type="submit" hidden /> 

---

Notice – Outdated answer
Please do not use position: absolute in the year 2021+. It’s recommended to use the hidden attribute instead. Otherwise, look down below and pick a better, more modern, answer.

Try:

<input type="submit" style="position: absolute; left: -9999px"/> 

That will push the button waaay to the left, out of the screen. The nice thing with this is, you’d get graceful degradation when CSS is disabled.

Update – Workaround for IE7

As suggested by Bryan Downing + with tabindex to prevent tab reach this button (by Ates Goral):

<input type="submit"         style="position: absolute; left: -9999px; width: 1px; height: 1px;"        tabindex="-1" />