htmlのformを使った実装でenterキーを押しても送信されないようにしたい

Question

fromを使って簡単な掲示板を作成しているのですが

input type="text"で文字を改行したい時にenterキーを押すと
なぜか
input type-"submit"の方が機能して送信されてしまいます...

  <form method="post" action="http://localhost/hagoli/database/receive.php" name="formName" enctype="multipart/form-data">
        <div id="explanationTitle">説明文</div>
        <input type="textarea" name="explanation" class="explanation" />


       <input type="submit" value="登録" name="register" id="register"  />


    </form> 

調べていると沢山でてきますができればjavascriptを使用しないで作成したいです

Comments

[m.ts10806]

>javascriptを使用しないで作成したい

これはなぜでしょう。
合理的にできる手段があればそれを選ぶべきでは？

※いずれにしてもurlにlocalhostと直書きしてるコードは非合理的極まりないですし、「inputのtextで改行」という物理的に無理なことをやろうとしている時点で、もっと先に覚えることあるだろうとは思いますが。

Answer 1

「form enter 無効」でネット検索すれば、
山程参考記事があるのでどうぞ。

例えば。
Enterキーによるformの送信を無効化する - Qiita

PHPもHTMLも関係なく、form要素のonSubmitイベントを無効化するだけ。

---

よく読むと、input type="text"要素で、
複数行入力したいように見えるので、
そういうときはtextarea要素に切り替えるものですよ、
という情報も添えておきます。

<INPUT type="text">－HTMLタグリファレンス
<TEXTAREA>－HTMLタグリファレンス

Answer 2

改行ありのフォームにしたい場合は

input type="text"

ではなく

input type="textarea"

です。

Comments

[退会済みユーザー]

textareaってinput要素の属性で与えるものじゃなくて、textareaっていう要素なのでマイナス評価しました

[nguyenseiji]

ごしきてきありがとうございます

修正させて頂きました

Answer 3

少なくともinput type="textarea"は仕様にありません。

【<input>: 入力欄 (フォーム入力) 要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input#%3Cinput%3E_types

【<textarea> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea

Comments

[nguyenseiji]

ありがとうございます！
修正したらenterキーを押しても
改行してくれるようになりました！！
ありがとうございます

Answer 4

IEなど無視していいならエンターは最初のsubmitが反応するのでこう

Comments

[yambejp]

<form>
<input type="text" name="hoge" value="123">
<input type="submit" style="display:none" disabled>
<input type="submit">
</form>

Answer 5

<input type="submit" value="登録" name="register" id="register" />
を
<input type="button" value="登録" name="register" id="register" />
にして、#registerのイベントハンドラーでクリックイベントの中でformをsubmit()すればよいと思います。

あ、"javascriptを使用しないで作成したいです"でしたね、、失礼しました。
そもそも改行入れたいのであればtextareaタグじゃないすかね・・？

Comments

[nguyenseiji]

ありがとうございます
修正いたしました