HTMLでは、<input type="button" />を使ってフォーム内にボタンを作成できます。一方、<button>タグの中にはテキストや画像などのコンテンツを自由に配置できるのが大きな特徴です。<input>タグで作成したボタンには、このようなコンテンツを含めることができません。
それでは、それぞれの具体的な使い方を例とともに見ていきましょう。
HTMLの<button>タグとは
<button>タグは、HTMLフォーム内にボタンを作成するための要素です。開始タグと終了タグの間に、テキストや画像などのコンテンツを自由に記述できます。
たとえば、次のように記述すると、ボタンの中に画像を表示できます。
サンプルコード
<button>タグを使ってボタン内に画像を追加するには、以下のコードを実行してみてください。
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Learn HTML')">
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg"
alt="Learn HTML" height="80" width="100">
</button>
</body>
</html>
このコードでは、<button>タグの中に<img>タグを配置しています。ボタンをクリックすると、onclick属性に設定されたJavaScriptが実行され、アラートが表示されます。
HTMLの<input type="button" />とは
サブミットボタン（<input type="submit">）は、クリックすると自動的にフォームの内容を送信します。HTMLフォームを使えば、ユーザーからの入力を簡単に受け取れます。<form>タグの中にフォーム要素を追加することで入力欄を作り、<input>タグにtype属性を指定することでボタンを配置できます。
サンプルコード
<input type="button">の使い方を確認するには、以下のコードを実行してみてください。
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
</head>
<body>
<form action="/new.php">
Student Name:<br>
<input type="text" name="sname">
<br>
Student Subject:<br>
<input type="text" name="ssubject">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
このコードでは、テキスト入力欄とサブミットボタンを持つフォームを作成しています。<input>は空要素のため、ボタンのラベルはvalue属性で指定する点に注意してください。
両者の主な違いまとめ
- コンテンツの柔軟性： <button>タグはテキストや画像、インライン要素などを子要素として持てますが、<input>は空要素のためvalue属性によるテキストしか表示できません。
- スタイリング： <button>タグの方がCSSでのカスタマイズが容易で、複雑なデザインに向いています。
- デフォルトの動作： フォーム内の<button>はデフォルトでtype="submit"として動作するため、単なるボタンにしたい場合はtype="button"を明示的に指定する必要があります。
用途に応じて使い分けることで、より使いやすいフォームやUIを構築できます。