今回はボタンタグについて振り返って行きます!!
まず、ボタンタグには3つほどあり、ややこしくなっています。
一つずつみていきましょう😊
では、お使いのテキストエディタに入力していきましょう。
<button>移動</button>
<input type="button" value="移動">
しかしこのままではリンクが飛ばないので、いろいろ、つけ加えて行きます😊
①buttonタグ
buttonタグで囲むことによって、簡単に作ることができます👌
こちらのタグを使うメリットとして、buttanタグの中にHTMLをを追加できます!
<button><strong>移動</strong></button>
とすることで、中の文字を強調することができます👍
しかし、このままでは何も反応しません。そこで
ページリンク飛びたいなってときには、こう記述します!!
<button onclick="location.href='about.html'"><strong>移動</strong></button>
こうすることで、ページへリンクすることができました!
②inputタグ
type▶ボタンの種別。以下の値を指定可能です。
種類は3つあります!
type="submit" …… フォーム入力内容を送信するサブミットボタン(初期値)
type="reset" …… フォーム入力内容をリセットするリセットボタン
type="button" …… 何もしない汎用的な押しボタン
value▶ボタンの種類を表します。
<input type="button" onclick="location.href='about.html'" value="移動">
こうすることで、ページへ飛ぶことができました。
③aタグ
aタグでボタンを作ることもできますが、こちらは、CSSでボタンを1からデザインする必要があります!
また、aタグでの場合はフォームの送信の際は使えません!
<a href="about.html">移動</a>