Wrestling with Forms

After my last posting about fun with JavaScript here's a snippet to amuse you about HTML forms. If you've ever coded a very basic form like a search box with one text input field you'll know that you don't need a submit button: if the user presses Enter then the form is submitted.

Whether this is an HTML standard I don't know, I've not looked, but it works on all the usual suspects.

Well today I was playing around with a little form we use on our house intranet which had this structure and I added a second text input field and was surprised to find it no longer worked. A bit of fishing about on the Web suggested a solution: if the form also had a submit button then pressing Enter on any text field would still submit the form¹. So I tried that and it worked.

But the submit button was annoying me. It looked ugly. So I tried using an inline style on the button to set "display: none;" and Firefox, Opera and Chrome are perfectly happy with that: they still allowed submit on Enter even though the submit button was invisible. So for me that was a result as those are the browsers we routinely use.

But then curiosity got the better of me and I tried the same trick with Internet Explorer. It wasn't going to be fooled and it didn't allow Enter to submit the form unless the button was visible.

It doesn't matter for this case as it's a form that is only used here and we don't use Internet Explorer other than for testing public facing web sites but for it to be generally useful it needed to work for IE too.

Going back to the original Web article it said that an input field of type "image" would work too. So I tried adding 1x1 pixel transparent GIF instead of the hidden submit button ... and then it worked on all browsers, including IE.

So there's my tip of the day: if you want a form with more than one input field to submit when the user presses Enter and you don't want an explicit submit button or image too then include an input field of type "image" which is invisible to the naked eye.

1. There are better solutions, using JavaScript, but this one Just Works.