フォーム外でもボタンHTMLタグは有効？button要素とinput要素の違いを解説

フォーム外でも<button>タグは有効

結論から言えば、<button>タグはドキュメントのbody内のどこに配置しても有効です。ただし、設置できるのはテキストレベルのマークアップ（フレージングコンテンツ）が許可されている場所に限られます。段落の中や見出しの下など、インライン要素を記述できる位置であれば問題なく使用できます。

<input type="button">との違い

HTMLフォーム内にボタンを作成する場合には、<input type="button" />がよく使われます。<button>タグの大きな特徴は、開始タグと終了タグの間にテキストや画像などのコンテンツを自由に記述できる点です。一方、<input>タグで生成されるボタンは空要素であるため、内部にコンテンツを含めることはできません。

フォーム外におけるtype属性の既定値

フォームの外に置かれた<button>要素は、type属性を省略した場合「type="button"」が既定値になります。なお、フォーム内では省略時に「type="submit"」として扱われるため、意図しないフォーム送信を防ぐという意味でも、type属性は明示的に指定しておくのが安全です。

さらに、静的なHTMLとしてボタンを直接記述する代わりに、JavaScriptでボタンを動的に生成するという選択肢もあります。この方法なら、スクリプトが無効化されている環境でも、押しても何も起こらない無用なボタンが画面に表示されず、ユーザーの混乱を防ぐことができます。

<input type="button">と<button type="button">の関係

両者は機能的にほぼ同等の要素です。違いはラベルの与え方にあります。<input>の場合はvalue属性の値がボタンのラベルとして表示される一方、<button>の場合は要素内のコンテンツがそのままラベルになります。スタイリングの柔軟性やアクセシビリティの観点からも、多くの場面では<button>要素の利用が推奨されています。