【ボタンを設置】

スポンサーリンク



ボタンをつくる

クリックでメッセージが表示されるボタンをつくりましょう。

基本はこの形です。

<input type=”button” value=”ボタンの文字” onclick=”alert(‘クリックで出現するメッセージ’);”>

OK・キャンセルで答えるボタン

ボタンをクリックするとメッセージが現れ、そのメッセージに「キャンセル」または「OK」で回答し、それぞれの回答に対してメッセージが現れるタイプのボタンです。

if(confirm(‘    ’)) {alert(‘    ‘)} else {alert(‘    ‘)}}で指定します。

<input type=”button” value=”ボタンの文字” onclick=”{if(confirm(‘最初に現れる文字’)) {alert(‘OKを選択した場合現れる文字’)} else {alert(‘キャンセルを選択した場合現れる文字’)}}”>

表示させると↓

クリックして確認してみてください。

例えば

こんなボタンで遊べます。

どうぞ押してみてください。

ボタンのデザイン

ボタンの文字や色、サイズなどもStyle属性を使って指定することができます。

ボタンの大きさを変える

ピクセル値で横幅、高さ、文字サイズを指定することができます。

<input style=”font-size:文字サイズ;width:横幅px;height:高さpx”type=”button” value=”ボタンの文字” onclick=”alert(‘出現するメッセージ’);>


ボタンでリンクする

リンクを付けることだって可能です。

これで目立つリンクをつくりましょう!

ホームページ作成において、メニューボタンとして使用するのもおすすめです。

<input type=”button” onclick=”location.href=’リンク先のアドレス'”value=”ボタンの文字”>

例えば

<input type=”button” onclick=”location.href=’http://kantanhtml.blogspot.jp/p/blog-page_28.html'”value=”サンプルページへ”>

クリックでサンプルページへ飛びます。

リンク先が他のサイトである場合など、新しいウィンドウで開きたい場合は以下のタグを使用します。

<input type=”button” onclick=”window.open(‘リンク先のアドレス’)” value=”ボタンの文字”>




スポンサーリンク
関連コンテンツ広告