1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ボタンタグ~使い分け~

Posted at

今回はボタンタグについて振り返って行きます!!
まず、ボタンタグには3つほどあり、ややこしくなっています。
一つずつみていきましょう😊
では、お使いのテキストエディタに入力していきましょう。

index.html
<button>移動</button>
<input type="button" value="移動">

スクリーンショット 2021-03-09 14.35.36.png
しかしこのままではリンクが飛ばないので、いろいろ、つけ加えて行きます😊

①buttonタグ

buttonタグで囲むことによって、簡単に作ることができます👌

こちらのタグを使うメリットとして、buttanタグの中にHTMLをを追加できます!

index.html
<button><strong>移動</strong></button>

とすることで、中の文字を強調することができます👍
しかし、このままでは何も反応しません。そこで

ページリンク飛びたいなってときには、こう記述します!!

index.html
<button onclick="location.href='about.html'"><strong>移動</strong></button>

こうすることで、ページへリンクすることができました!

②inputタグ

type▶ボタンの種別。以下の値を指定可能です。
種類は3つあります!
type="submit" …… フォーム入力内容を送信するサブミットボタン(初期値)
type="reset" …… フォーム入力内容をリセットするリセットボタン
type="button" …… 何もしない汎用的な押しボタン

value▶ボタンの種類を表します。

imdex.html
<input type="button" onclick="location.href='about.html'" value="移動">

こうすることで、ページへ飛ぶことができました。

③aタグ

aタグでボタンを作ることもできますが、こちらは、CSSでボタンを1からデザインする必要があります!
また、aタグでの場合はフォームの送信の際は使えません!

index.html
<a href="about.html">移動</a>
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?