HTML buttonタグの使い方と詳細

2021 1/26

2020.09.10 2021.01.26

トモジ

buttonタグってなに・・・？
意味と活用方法を知りたい！

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、buttonタグの使い方と基本に関して要点をわかりやすく説明しております。

記事の内容

HTML buttonタグの使い方と詳細

buttonタグは、formタグ内のデータを
送信する場合に必要になるタグで
webサービスやアプリを作成する時に
非常に大切なタグになります。

buttonの書き方

buttonタグはformタグ内に記述し、
type属性とボタン表示文字をつけて使用します。

type属性とは

type属性とは、
buttonタグの動作に関して設定をする項目になり
3種類から選び開始buttonタグ内に記述します。

1.type属性(submit)

formタグ内のaction属性で記述した送信先に、
ボタンを押したら飛ぶ設定になります。

type属性(submit)

<form action="https://10moji-blog.com/what-is-button/">
　<p>action属性先に飛びます。</p>
　<button type="submit">送信ボタン(submit)</button>
</form>

ブラウザ表示

action属性先に飛びます。

2.type属性(reset)

inputタグ内に入力された文字などを
リセットする設定になります。

type属性(reset)

<p>入力後にリセットボタンを押すと入力値がリセットされます。</p>
<form action="#">
  <input style="width:100%;" type="text">
　<button type="reset">リセットボタン(reset)</button>
</form>

input{width: 100%;}

ブラウザ表示

入力後にリセットボタンを押すと
入力値がリセットされます。

3.type属性(button)

button効果を無効にし、JavaScriptと組み合わせて動作をするための設定になります。

type属性(button)

<p>ボタンを押すとアラートが表示</p>
<form action="https://10moji-blog.com/what-is-button/">
　<button type="button" onclick="alertFunction()">JavaScript起動ボタン(button)</button>
</form>

function alertFunction() {
     alert("今ボタンをクリックしましたね。");
}

ブラウザ表示

ボタンを押すとアラートが表示

buttonタグに画像を埋め込む

buttonタグは画像を埋め込みオシャレに加工することもできます。

type属性(button)

<form action="https://10moji-blog.com/what-is-button/">
　<button type="submit">
    <img src="https://10moji-blog.com/wp-content/uploads/2020/07/こけしトモジ2-e1594962958255.png" width="50" height="50" alt="">
  </button>
</form>

ブラウザ表示