HTMLの form 要素の中に type 属性を省略した button 要素を置いてクリックすると、どのような動作になりますか。

解説

正解は「フォームの入力内容が action 属性の送信先へ送信されます」です。<button> の type 属性を省略すると、既定値の submit として扱われるため、フォームの中に置くと送信ボタンとして働きます。type 属性の3つの値submit：フォームを送信します。省略時はこれになります。reset：フォーム内の入力値を初期値に戻します。「フォーム内の入力欄の値がすべて」はこの値を明示したときの動作です。button：それ自体は何もしないボタンです。「何も起こらず、JavaScript で」はこの値を指定したときの説明で、省略時の動作ではありません。「フォーム内で最初の入力欄に」のようなフォーカス移動は、<label> をクリックしたときに関連付けられた入力欄へフォーカスが移る動作と混同しやすいものですが、<button> にこの機能はありません。JavaScript 用のボタンでページが再読み込みされる原因フォーム内に「パスワードを表示」や「行を追加」といった JavaScript で処理するボタンを置くと、クリックのたびにフォームが送信されてページが再読み込みされ、入力内容が消えてしまうことがあります。原因の多くは type 属性の書き忘れです。<form action="/signup"> <input type="password" id="pw"> <!-- type="button" がないと、クリックでフォームが送信されてしまいます --> <button type="button" onclick="togglePw()">表示</button> <button type="submit">登録</button> <!-- 送信用は明示しておくと意図が伝わります --> </form>イベント処理の中で event.preventDefault() を呼んで送信を止める方法もありますが、送信しないボタンには最初から type="button" を付けるのが確実です。また、入力欄で Enter キーを押したときもフォーム内の最初の submit ボタンが押された扱いになるため、送信用でないボタンが先頭にあると意図しない処理が走る点にも注意してください。参考<button>: ボタン要素 - HTML | MDN