SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

問題

フォームが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します

[ここにhiddenあり]

例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

4.10.22.2 暗黙のsubmit

フォームのデフォルトのボタンは最初のsubmitボタン。

もしブラウザが暗黙のsubmit(例えば入力欄でEnterキー押下)をサポートするなら、ああしろこうしろ(デフォルトのボタンをアクティブにして、synthetic click activation steps[手順こちら])をおこなうこと。

したがって、デフォルトのボタンがdisabledだったら、フォームはsubmitされない(disabledのときアクティブにできないから)。

暗黙のsubmitは便利だから、各ブラウザは是非サポートしてね。

フォームにsubmitボタンがないとき、暗黙のsubmitを阻止する項目が1つより多くあれば、submitしない。そうでなければ、そのフォームからそのフォーム要素をsubmitせよ。

上の、暗黙のsubmitを阻止する項目とは、同じフォームのinput要素でtype属性が 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などはそうでなかったように記憶しているが、最近は他のブラウザと同じように動作している)。

関連するメモ

コメント(2)

M山 2015年8月24日 08:56

役にたちましたー。ありがとうございます。

うえら 2021年1月17日 07:30

なるほど。そうだったんですね。
HTML5 の仕様のロケーションも含めて役立ちました。