WEBサイトにボタンを設置しよう。

WEBサイトでボタンはとても重要な役割を果たします。

たとえば、クリックするとどこかのページへ移動するリンクにもボタンが使用されていることが多いですし、フォームの送信やリセットもボタンの一種です。

今回はボタンの種類や設置方法について解説していきたいと思います。

ボタンの種類

「０からサイト制作を学ぼう！１１」のフォームのところでも紹介しましたが、inputタグのtype属性に「submit」を指定して設置するボタンです。

このボタンは基本的に、フォームに入力されたデータを送信するためのボタンになります。

<form>
<p>名前：<input type="text" name="name"></p>
</p>アドレス：<input type="text" name="address"></p>
<input type="submit" name="button">
</form>

type属性に「reset」を入力すると、フォームに入力された内容をリセット（空白）にするボタンを作ることができます。

<form>
<p>名前：<input type="text" name="name"></p>
</p>アドレス：<input type="text" name="address"></p>
<input type="reset" name="button">
</form>

↓　フォームに文字が入力された状態でリセットボタンを押すと、クリアされます。

type属性に「button」を入力すると、submitやresetのようにデフォルトの動きが決まっていないボタンを作成することができます。

たとえば、クリックするとアラート（別ウィンドウで表示される警告やメッセージ）を表示したり、ページ文字を表示したりといった動作で使用します。
（これらの動作はJavaScriptの知識が必要となります）

例として、クリックすると「Hello」と表示されるボタンを作成してみます。

<form>
<p><input type="button" name="button" onclick="alert('Hello')" value="クリック"></p>
</form>

下のボタンをクリックすると、「Hello」が表示されると思います。

inputタグを用いて作成するボタンは、「送信」ボタンや「リセット」ボタンなどフォーム内で使うことが一般的なものでした。

次にボタンにリンクを設定する場合を説明していきます。

フォーム内で使用する時は<input>タグでしたが、その他でボタンを設置する場合<button>タグを使います。

書き方としては、
<button>ボタンに表示するラベル</button>
のようになります。

例として次のようにコードを書いてみます。

<button>ボタン</button>

さきほど作成したボタンを<a>タグで囲むような形にすると、ボタンにリンクを設定できます。
（ここでは仮のリンク先として”#”としています。この場所にリンク先に指定したいアドレスを入力してください。）

<a href="#"><button>ボタン</button></a>

一つ注意点として、<a>を<button>で囲むような形にするとボタンにリンクが設定されず、文字の方にリンクが設定されてしまいます。
この状態だと、文字の部分をクリックした時にしかリンク先へ飛ばなくなってしまうので気を付けてください。

<button><a href="#">ボタン</a></button>

上のように、ボタンでは無く文字にリンクが貼られているのがわかると思います。

今回は以上です。次回はCSSでボタンの大きさやデザインを変更していきます。
それまでに今回の内容を復習してみてください。