【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。

Tweet

Category html5 2012/10/22

問題

フォームがEnterキー押下でsubmitしてくれたり、くれなかったりするのですが、何かルールがあるのですか。

特に、サブミットボタンがないフォームについて。

特に、入力欄が1つのときと、2つのときの違いについて。

例1 form内にinput[type=”text”]が1つだけ

<form method="post" action="?">
    <input type="text" name="test">
</form>

Enter押下でSubmitします（だいたいのブラウザで）

例2 form内にinput[type=”text”]が2つある

<form method="post" action="?">
    <input type="text" name="test">
    <input type="text" name="test2">
</form>

Enter押下でSubmitしません（だいたいのブラウザで）

例3 form内にinputは2つだけど一方は[type=”text”]、一方は[type=”hidden”]

<form method="post" action="?">
    <input type="text" name="test">
    <input type="hidden" name="test2">
</form>

Enter押下でSubmitします

例4 form内に要素は2つだけど一方はinput、一方はtextarea

<form method="post" action="?">
    <input type="text" name="test">
    <textarea name="test2"></textarea>
</form>

Enter押下でSubmitします

答え

最近のブラウザは、この仕様に沿っているのだと思います。

4.10.22.2 Implicit submission（HTML5仕様 4.10.22.2 暗黙のsubmit）

4.10.22.2 Implicit submission

A form element’s default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the “enter” key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)

There are pages on the Web that are only usable if there is a way to implicitly submit forms, so user agents are strongly encouraged to support this.

If the form has no submit button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.

For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, URL, Telephone, E-mail, Password, Date and Time, Date, Month, Week, Time, Local Date and Time, Number

と言う仕様があるので、input要素の入力欄が1つでsubmitボタンがないフォームは、Enter押下で送信される。

hiddenやラジオボタンやtextareaはノーカウント。

input[type=”text”]が2つ以上あれば、Enter押下ではフォームは送信されない（昔のOperaなどはそうでなかったように記憶しているが、最近は他のブラウザと同じように動作している）。