<input> タグについて

質問

HTML内で、複数の<input>タグを持つフォームを使ってデータを入力し、それをPHPプログラムに送るものを作っています。
ある<input>タグの入力が終わった後にリターンキーを押すと、まだ他にも入力したいのがあるのに、すぐにPHPプログラムに飛んで行ってしまいますが、これを、submit ボタンを押したときにだけ飛んでいくようにすることは可能でしょうか？
もし可能なら、どのようにするのでしょうか？
詳しい方どうぞ教えてください。お願いいたします。

回答No.3

t_ohta · ベストアンサー

＞　しかし、またここで質問なのですが、各データ入力用の<input> でデータの種類を区別するための　type="text" やtype="number"　はどのように指定すればよいのでしょうか？

タイプを指定することで入力値の制限が行えます。
↓こちらが参考になるんじゃないでしょうか。
https://www.tohoho-web.com/html/input.htm

＞　<button> タグの属性を調べてみたら、formmethod やformaction 　といった <form> タグそのものに代わるような物が沢山あって、混乱しています。<form> タグを使わずに<button>でフォーム処理を再構築する必要があるのでしょうか？

<button>は汎用のボタンを表示するためのタグです。
ボタン押下時の動作はJavaScriptで定義すればいいので、あまり難しく考えなくても大丈夫です。
ボタンのtypeをsubmitにしてしまうと、Enterキーでフォームが送信されてしまうので、<button>自体にフォームとの連携を持たせず、JavaScriptで処理する方が希望されている動作になると思います。

お礼

リターンキーでPHPに飛ばずに、<button>タグとJavaScrioptの関数を使って何とかうまく処理することが出来ました。
ご紹介いただいたHTMLやDOM関係のサイトには、私がまだまだ知らない事が沢山あって、勉強不足を感じました。
どうも色々と有難う御座いました。

回答No.2

hogehoge78

<form action="" id="myform" onsubmit="return false"><!-- ① -->
<input type="text" value="" name="test">
<input type="button" id="submit-button" value="送信" onclick="document.forms['myform'].submit()"><!-- ② -->
</form>

① FORM内でEnterされた、SUBMITボタンが押下された場合に起動する差し込み処理で「onsubmit」というものがあります。
　 ここで、falseを返すことで、SUBMITができないように抑止します。

② 通常のinput[type=submit]ボタンを押下しても、①で抑止してしまっているので何も起きなくなってしまいます。
　 そこで、それの影響を受けないJavascriptの処理にて、SUBMITを代行して実行する記述を行います。
　 「onclick」はみたまんま、「クリック時に動作」します。

JSの書き方はいろいろありますが、一番単純に書くと、上記のようになります。HTMLとロジックを分離する場合は、以下のように書くこともできます。
今後、他にもjQueryなどのようなライブラリやフレームワークを使うこともあると思いますので、頭の片隅においておいておくだけで良いと思います。

<script>

// BODYの中身が準備できたら実行される
document.addEventListener('DOMContentLoaded', function (e){

// FORMタグを取得する
const form = document.querySelector('#myform')

// フォームがSUBMITされる場合に差し込むイベントを登録する
form.addEventListener('submit', function (e){
// ブラウザのデフォルトの挙動を抑止する（ここではSUBMITを行わないということ）
e.preventDefault()
})
// 送信ボタン押下される場合に差し込むイベントを登録する
document.querySelector('#submit-button').addEventListener('click', function (e){
// JavascriptによってSUBMITを実行する
form.submit()
})
})
</script>

お礼

早速にご回答をいただきまして、有難うございます。
今会社に出てきているので、回答を詳しく読む暇がありませんが、自宅に戻ってからじっくりと研究させて頂きます。
とりあえずお礼を言わせてください。

回答No.1

t_ohta

submitボタンを
<input type="submit">
から
<button type="button" onclick="form.submit();">送信</button>
に変えるといいと思います。

お礼

早速にご回答をいただき、有難うございます。
<button> を使ってリターンキーを押してもPHPプログラムに飛ばないようにできました。
しかし、またここで質問なのですが、各データ入力用の<input> でデータの種類を区別するための　type="text" やtype="number"　はどのように指定すればよいのでしょうか？
<button> タグの属性を調べてみたら、formmethod やformaction 　といった <form> タグそのものに代わるような物が沢山あって、混乱しています。<form> タグを使わずに<button>でフォーム処理を再構築する必要があるのでしょうか？
どうかそのあたりを詳しく教えていただけると助かります。