I've got a form like this:
<html>
<body>
<form onSubmit="alert('Just got submitted');">
<p>
Hello: <input class="field" type="text"/><br/>
Goodbye: <input class="field" type="text"/><br/>
</p>
</form>
</body>
</html>
which in one browser submits happily on user pressing enter from one of the fields, and in another browser, doesn't. Oddly, if I remove the second field, it works in both.
My question is really - is it okay to have a form with no explicit submit element? I really like this behaviour.
Having no explicit submit is poor user experience. Your typical end user has, over the past decade, learned a set of principles for website form interaction. Namely, you can tab between fields, you can select lots of checkboxes, and you have a click a button to actually submit your data.
I've tried developing forms in the past that automatically update with JavaScript, and I got countless complaints from users. They wanted a button or they didn't believe it was working. So in that particular case, I kept the form working as it originally had, but added a submit button that really didn't do anything. They were happy.
These days I just build out my forms with normal submit buttons. Not only do users expect it, but it allows for much cleaner progressive enhancement between non-JS enabled browsers.
It's certainly more than possible to have a form with no submit element, especially if you use JavaScript events to submit the form. I highly suggest you use the onkeypress event to detect the "enter" key being pressed rather than depending on the browser to just accept the "enter" key if you make a form with no submits, to make it cross-browser compatible.
However, I think it's bad form to leave out a submit button of some sort. (It doesn't necessarily have to be an input of type "submit", could be "button" or an image you click.) It's just a standard to have forms that people fill out submitt via a button, and you're taking that away, which could confuse many users who are used to a button. It definitely violates the principles of Don't Make Me Think by presenting an alternate form to the norm.
It's not a good idea. You point out the reason yourself - it doesn't work in all browsers. Also, it's not what people expect, so it may confuse people.
It depends on what you mean with "ok".
If you mean valid (x)html, well it's no problem at all, but on the user side, it's a usability issue. But it also depends on the target audience of your website. If its for tech savvy people, then it's ok.
You could create an input button like this:
<input type="button" onclick("doSomething()") />
The doSomething() would be a function in Javascript that would send your form data to a server-side script. This way you wouldn't have a submit behavior.
Submitting a form on 'Enter' with jQuery?
Also, I'd leave the button in the form, but hide it with javascript ($('#submit').hide()). It means that if the user has disabled script or f.ex. uses some other device, he'll see the default way to submit the form.
If you want to have two buttons which generate two different behavior when submit. what you can so is something like that:
or you can put the form submit inside function1() or function2()
Related
I have some forms that use submit butttons like this:
<input type="button" onclick="validateAndSubmit()">
They work fine, but accessibility checkers say there's no submit button in the form, because there isn't one.
I know that type="button" makes it clear that it acts as a button, but I don't know how to indicate to assistive technologies that it acts as a submit button specifically without actually using type="submit". (I'd rather not use an actual submit button, because unexpected javascript errors will submit the form. Of course you can trap errors, it's just less robust in that sense, and I wonder if there's another way.)
Is there an ARIA role or other technique that makes it clear that the button submits the form (assuming everything validates)?
<button type="submit" onclick="validateAndSubmit()">Submit</button>
should do the trick. There is no need for an ARIA role (button) in this case, since the button is used here as defined in the HTML specification.
I don't agree with the two existing answers.
It is true that having a submit button in a form isn't an obligation.
However, if your form is intended to be submitted, there must be a submit button.
The weakness of your button <input type="button" onclick="validateAndSubmit()"> is that you are really obliged to click on this button to trigger the function and submit the form.
However, it is often useful, and most users expect, that the form is submitted when pressing enter while being in any field, not necessarily the submit button.
Typical usecase: type your e-mail, tab, type your password, and directly press enter to sign in, instead of taking the mouse to click on "sign in" or press one more time tab and enter.
Your fake submit button doesn't permit this. You should replace it by a true submit button <input type="submit" /> and use the submit event on the form (<form onsubmit="...">).
If your problem is that an unexpected JavaScript error makes the form being submitted with bad inputs, never forget that you must check again the input server-side.
And just in case, you are perfectly allowed to use try...catch...finally and do event.preventDefault() in the finally clause if you are submitting via AJAX and if you aren't really sure that your code will never trigger errors; that's not a bad defensive programming solution.
Form elements do not need to have a submit button. There's no such obligation.
The accessibility checker you use is wrong about that.
W3C use some examples of forms without submit buttons in their documentation :
Finally, to make the form submittable we use the button element:
What does the HTML spec say about using enter key to submit a form?
I've read http://www.w3.org/TR/html4/interact/forms.html but nothing there about submitting a form using the enter key.
Is it even defined somewhere or is it just the way most browsers have implemented it on their own and it became the way to do it?
I'm curious because I just asked a question regarding Webkit not submitting my form if the submit button is hidden (display: none).
Trying to 'submit' my form when hitting enter fails
So is there somewhere in the official docs a reference to the behavior of the enter key in a form?
The HTML standard is device-agnostic; HTML user agents run on a variety of platforms, many of which (think search engine, voice reader, webscraper) do not have a keyboard in the first place. Therefore, the standard does not say how a user can toggle the form submission. Listing all possible ways to submit a form is impossible, since many devices and user interaction mechanisms are not invited yet - iOS 6 may allow you to submit a form by saying "Submit Form!".
The Webkit behavior you're seeing is up to the discretion of Webkit and likely unintentional. The standard does not say anything about a submit button being necessary in the submission process.
It's not part of the spec. It's something that the browser makers implement at their discretion.
I know this question is old but I just had the same issue with webkit browsers. I found if you use visibility: hidden in lieu of display: none the enter button will submit the form. I know this adds a few more styling challenges but it essentially accomplishes the task. As far as the standard goes, it's been over a year and I failed to find anything more informative than phihag's answer.
The spec says that all forms are required to have an action attribute. If you have one of these, the enter key will work. I've got forms with no submit button at all, and the enter key is functional.
You can attach javascript to the submit event, which could prevent the browser from navigating to the action uri.
But whatever you do, you are required to have an action uri, and it should be functional.
<form method="POST" action="">
<input type="text" />
<input type="text" />
</form>
(JSFiddle)
Press enter on the input. Then delete one of the inputs and press it again. When we have two inputs inside of the form, the form is not submitted (we need a button then). Why is that?
The default behavior of HTML forms with a single input is to submit on enter. As soon as you add a second input, pressing enter will no longer submit the form. The presense or lack of names has nothing to do with it.
The original idea was that very simple forms, typically consisting just of a text input box e.g. for searching, should be easy and quick: the user just types a search word and hits Enter. Controls of other types, such as checkboxes, do not affect this. Virtually all browsers implemented this idea.
But, according to the old idea, if there are several text input boxes, there are too big risks of premature form submission: the user hits Enter, expecting to get to the next field, or maybe just by accident.
Yet, IE introduced (in IE 4) the feature that makes Enter in a text input box submit the form, even if the form contains several such elements. Later, other browsers followed suit, and nowadays this (mis?)behavior appears to be “standard.” This feature has been claimed to be an usability improvement, and in some special cases, it really is. More often, it is a risk, and therefore pages often try to use client-side scripting to prevent it.
However, at least on most modern browsers, this only happens when the form has a submit button. But if you omit the submit button, users will get puzzled, as most forms have a submit button or buttons.
Unless you put a button or input[type=submit] somewhere in the form. The button can be wrapped inside visibility:hidden css if you don't want it to show up.
I have a login form, and I'm trying to have it submit when I press the enter button (after having filled it out). I'm fine with using jQuery. How would I do this?
As long as you are focused on one of the fields and hit enter, it will submit. This is the default behavior for all browsers that I know of. You actually don't need the <input type="submit" /> as others have said, but of course you should (and probably do).
You only need javascript if you want this behavior without focusing on an input, but I would strongly advise against it because no one will be expecting it. Just let users interact with the form the way they are used to, no surprises.
I'm building an HTML multiple-choice quiz and am aware of a technique which would let me use multiple submit buttons - one for each answer to an individual question. I could then process the form in PHP using submit button values and determine which answer the user has selected. The reason for using submit buttons is so that they can be styled appropriately.
However, I'm wondering if this is bad practice from an accessibility perspective? Would it be better to use an individual form for each answer to a question? There are plenty of questions on here about how to use multiple submit buttons but they don't seem to address this point.
It's absolutely fine, and in a lot of cases can improve the usability of a form. Be careful however, as there are a couple of gotchas:
If the enter key is used to submit the form, the submit behaviour is undefined. HTML5 does define this behaviour, and it specifies what most browsers already do in this situation: The first submit button in the form should have its name/value sent as part of the submission.
However IE<=8 don't send the name/value pair for any submit button when the enter key is used to submit the form.
So, you have to be aware that there needs to be a "default" action for the form, and that has to be the first submit element present.
You can't use this technique to submit to a different action based on which button was pressed. Javascript can theoretically solve this, but you shouldn't do that (a good mantra is, don't use Javascript to solve a non-Javascript problem)
What will you do if the form is submitted using the Enter key on the keyboard, and none of the submit buttons is in the data you receive server-side?