フォーム内のtype=”submit”はひとつだけにしよう

こんな感じのフォームがあります。

<form action="xxx.php" method="post">
	<h1>送信フォーム</h1>
	<div>
		<label for="name">名前</label>
		<input type="text" id="name" name="name" required maxlength="10" />

		<button @click="history.back()">戻る</button>
		<button type="submit">送信</button>
	</div>
</form>

名前を入力してエンターキーを押したら送信されると思いますが、
フォームをエンターキーで送信をかける場合、formタグの子要素にある「最初」のtype=”submit”のボタンを実行してしまう。

「戻る」ボタンはtype属性が記述されていないのでスルーされるかと思いきや、buttonタグのtype属性は初期値がtype=”submit”らしい。
HTML5タグリファレンス

解決策

submitしないbuttonタグには、type=”button”を明示的に書いてあげよう。

<form action="xxx.php" method="post">
	<h1>送信フォーム</h1>
	<div>
		<label for="name">名前</label>
		<input type="text" id="name" name="name" required maxlength="10" />

		<button type="button" @click="history.back()">戻る</button> <!-- type属性追加 -->
		<button type="submit">送信</button>
	</div>
</form>

※マウスで送信ボタンを押した場合は影響受けないです！