2023/8/31 (更新日:2024/4/10)

ボタンをaタグ,button要素,input要素で使うヒント！type属性がbutton,submitの違いまとめ

HTML/CSS初心者にとってボタン表示の使い分けで迷うことが有りませんか？

私がプログラミングを始めたときに、最初に混乱したのが「button」の機能でした。

aタグ、button要素、input要素のボタンの違いは？
type属性のsubmit,buttonはどう使えばよいか？

そんな疑問について、本記事ではボタンの代表的な３つの機能について整理して解説します。

使い方を整理したら“form”が動かない等の失敗は無くなり「button」が怖くなくなりました。

１．aタグ,button要素,input要素で使うヒント！type属性がbutton,submitの違いまとめ
２．button要素のtype属性を”button”にしたときの使い方
３．“form” を送信する input要素、button要素の使い分け
４．aタグをボタンにして指定したアドレスに遷移する方法
５．まとめ

１．aタグ,button要素,input要素で使うヒント！type属性がbutton,submitの違いまとめ

ボタンをクリックすることで、実行できる代表的な３つの動作を説明します。

(a) クリックしたときにformで定義したフォームを送信する。

(b) クリックしたときに定義したタスクを実行する。

＊html,CSSを使った明快な構成のもの。

(a) クリックしたときにformで定義したフォームを送信する。為には、

・form内に、<input type=”submit”>を記述する。

・form内に、<button type=”submit”></button>を記述する。

・form内に、<button></button>を記述する。

のいずれの方法でもフォームの送信が可能です。

＊<button></button>が送信できるのは、buttonのtype属性の初期値がsubmitになっているからです。

(b) クリックしたときに定義したタスクを実行する。のは、

・<button type=”button”></button>と記述する。
　なおかつ、CSSに、
　”button”のclassに、:active{} などで、クリックしたときの動作を定義します。

CSSに定義をすれば実行、しなければ無動作になります。
これが、ボタンのそもそもの使い方になります。

(c) 特に、クリックしたときに指定したアドレスに遷移する。には、

・aタグ（アンカータグ）をCSSでボタン形にスタイリングして使用する。

html,CSSで実現するのは、aタグを用いた方法です。

＊<input～、<button～を用いる方法もありますが、JavaScriptを使うやり方です。
興味がある方は、調べてみてください。

以下で、詳細に解説していきます。

２．button要素のtype属性を”button”にしたときの使い方

【 (b) クリックしたときに定義したタスクを実行する。】の説明です。

htmlの<button>要素は、初期状態でボタンの形でそのまま使用できます。

しかし、通常はCSSで好みのスタイルに変更して使用します。

また、type属性を “button” に指定して単純なボタンとして使用できます。
すなわち、type=”button”と指定すると、ボタンをクリックしたときに定義したアクションを起こすことが出来ます。

type=”button”での動作

例題：ボタンをクリックすると、影がなくなる

See the Pen nomal button by Seiji Nakamura (@sjnkmr_777) on CodePen.

コード

【html】


<button class="styled" type="button">
  一般のボタン要素のbuttonです。
</button>

解説

button要素「<button></button>」でボタンとして使用する。
type属性を “button”に指定する。「type=“button”」
クリックしたときに、指定の動作を行います。

【CSS】独自スタイルに変更


.styled {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  line-height: 200%;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  background-color: rgba(220, 0, 0, 1);
  box-shadow: 0px 10px brown;
}
.styled:hover {
  background-color: rgba(255, 0, 0, 1);
}
.styled:active {
  box-shadow: none;
}

解説

.styledクラスで、独自のスタイルに変更する。
.styled:hover; で、ホバー時のスタイルを定義する。

.styled:active; で、クリックしたときの動作を指定します。
active で定義をしないと無動作になります。

３．“form” を送信する input要素、button要素の使い分け

【 (a) クリックしたときにformで定義したフォームを送信する。】の説明です。

ユーザーが入力した情報：フォームをボタンをクリックしてサーバーに送信する方法です。
formタグのフォームを、ボタンで送信するやり方は３つあります。

方法１：<input～を使って送信する方法

動作

送信するボタンはクリックすると送信されて画面が消えます。
右下の「return」で戻してください。

See the Pen Untitled by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊全方式の動作をまとめて表示しています。

コード

【html】

 
<form action="" method="post">
  <p>
  名前：<input type="text" name="name">
  </p>
  <input type="submit" class="styled" value="formのsubmitで送信する">
</form>

解説

送信する<form～></form>内に、<input～でボタンを設定します。
<button>のtype属性は、“submit” にします。submitは、送信を意味します。
value属性には、”ボタンの表示内容” を記入します。

クリックすると、フォームが送信されます。

styled でスタイルは決めています。
formの設定はここでは説明しないので別途調べてください。

方法２：form内に<button>を指定して送信する方法

コード

【html】

 
<form action="" method="post">
  <p>
  名前：<input type="text" name="name">
  </p>
  <button class="styled">formをbuttonで送信する</button>
</form>

解説

送信する<form～></form>内に、<button></button> でボタンを設定します。
<button>のtype属性は、指定しません。

<button>のtype属性の初期値は、”submit” です。
そのため、<button>のtype属性は、”submit” になっています。
<button></button> には、”ボタンの表示内容” を記入します。

クリックすると、同様に送信されます。

方法３：<button>のtype属性を”submit”に指定して送信する方法

コード

【html】

 
<form action="" method="post">
  <p>
  名前：<input type="text" name="name">
  </p>
  <button type="submit" class="styled">formをbuttonのsubmitで送信する</button>
</form>

解説

送信する<form～></form>内に、<button></button> でボタンを設定します。
<button>のtype属性は、“submit” を指定します。
上記：方法３の繰り返しの説明で、type属性を明記するかしないかの違いです。
<button></button> には、”ボタンの表示内容” を記入します。

クリックすると、同様に送信されます。

参考：<button>のtype属性を”button”に指定すると送信しません

<form>内に<button>を指定しても、送信しない場合があります。

コード

【html】

 
<form action="" method="post">
  <p>
  名前：<input type="text" name="name">
  </p>
  <button type="button" class="styled">formを送信しないボタン要素のbuttonです</button>
</form>

解説

送信する<form～></form>内に、<button></button> でボタンを設定します。
<button>のtype属性は、“button” を指定します。

“button” の場合は、クリックしても送信はしません。
クリックすると、定義した：ボタンの影がなくなる動作のみ実行します。

４．aタグをボタンにして指定したアドレスに遷移する方法

【 (c) 特に、クリックしたときに指定したアドレスに遷移する。】の説明です。

“link機能”が必要なボタンには、”aタグ”を使います。

aタグは、”link”機能はそのままで、外観をボタンの形式にスタイリングして使うのが基本です。

方法１：aタグをボタンにする方法

動作

今回は自分に遷移しています。

See the Pen Untitled by Seiji Nakamura (@sjnkmr_777) on CodePen.

コード

【html】

 
  <a href="#" class="styled" >aタグのボタンです</a>

解説

href=～にlink先を定義します。
styled クラスにボタンのスタイルをあてます。

ボタンをクリックしたときに、指定したアドレスに遷移します。

方法２：aタグを画像のボタンにする方法

参考情報：ボタンのスタイル違い
今回は自分に遷移しています。

動作

See the Pen 画像のaタグ by Seiji Nakamura (@sjnkmr_777) on CodePen.

今回、ボタンの画像を使用しました。

コード

【html】


  <a href="#"><img src="fig10.jpg" alt="画像ボタン"></a>

解説

href=～にlink先を定義します。
<img～>タグに、ボタンとなる画像をあてます。

画像をクリックしたときに、指定したアドレスに遷移します。

方法３：aタグの親要素までボタンにする方法

参考情報：ボタンのスタイル違い
このリンククリック範囲が親<div>まで広がる
今回は自分に遷移しています。

動作

See the Pen 親要素もボタンのaタグ by Seiji Nakamura (@sjnkmr_777) on CodePen.

コード

【html】


<div class="outline">
  親要素の範囲までがリンクのクリック範囲
  <a href="#"></a>
</div>

解説

親要素<div>内に、aタグを設定した場合です。
href=～にlink先を定義します。
outlineクラスでボタンのスタイリングをします。

親要素のどこをクリックしても、指定したアドレスに遷移します。

【CSS】


.outline {
  position: relative;
  width:350px;
  line-height:3em;
  text-align:center;
  font-weight:bold;
  background-color:rgba(255, 215, 0, 0.5);
  border:1px solid red;
}
.outline a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.outline:hover{
  background-color: rgba(255, 215, 0, 1);
  color:white;
}