Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8767

ボタンタグ~使い分け~

$
0
0

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

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

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

①buttonタグ

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

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

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

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

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

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

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

②inputタグ

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

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

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

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

③aタグ

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

index.html
<ahref="about.html">移動</a>

Viewing all articles
Browse latest Browse all 8767

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>