简体   繁体   English

没有提交按钮的HTML表单提交

[英]HTML form submission with no submit button

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. 在一个浏览器中,用户按下其中一个字段中的Enter键即可愉快地提交,而在另一个浏览器中,则不需要。 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? 我的问题确实是-有没有显式Submit元素的表单可以吗? 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. 过去,我曾尝试开发可使用JavaScript自动更新的表单,但我收到了无数用户的抱怨。 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. 用户不仅期望它,而且允许在未启用JS的浏览器之间进行更加整洁的渐进增强。

It's certainly more than possible to have a form with no submit element, especially if you use JavaScript events to submit the form. 拥有不包含Submit元素的表单无疑是非常有可能的,尤其是如果您使用JavaScript事件来提交表单。 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. 我强烈建议您使用onkeypress事件来检测是否按下了“ enter”键,而不是依赖浏览器仅接受“ enter”键(如果您创建的表单没有提交内容)以使其跨浏览器兼容。

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. (不必一定是“ submit”类型的输入,也可以是“ 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. 如果您的意思是有效的(x)html,那完全没问题,但是在用户方面,这是一个可用性问题。 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. doSomething()将是Javascript中的一个函数,该函数会将您的表单数据发送到服务器端脚本。 This way you wouldn't have a submit behavior. 这样,您就不会有提交行为。

Submitting a form on 'Enter' with jQuery? 用jQuery在“ Enter”上提交表单?

Also, I'd leave the button in the form, but hide it with javascript ($('#submit').hide()). 另外,我将按钮保留在表单中,但使用javascript($('#submit')。hide())隐藏该按钮。 It means that if the user has disabled script or f.ex. 这意味着如果用户已禁用脚本或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() 或者您可以将表单提交放在function1()或function2()中

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM