フォーム<form>に入力してもらったものを、送信や登録などを実行する為のボタンを通常のボタン形式の表示ではなく、画像にしてデザインＵＰをしたい場合の方法になります。

ボタン自体は、訪問者の方が『ここを押せば良いのね。』と判断しやすので、本来のボタンとして動作する様な『登録！』や『リセット！』、『登録解除』などtype="●"でも"submit","reset"を使用する場合には、ボタンのままの方が訪問者にとって良いと思います。

汎用ボタンとして機能させ、JavaScriptやCGIなどの処理をさせる事の『次ページ表示』や『このウィンドを閉じる』などは、画像を使用しても良いと思います。

ＨＴＭＬ　<input type="image" src="画像">

ボタンに画像を設定する場合には、type="●"をtype="image"としてボタンに画像を使用する事を設定します。

次に画像ファイルを指定する為に、src="画像"にて画像ファイルを指定する事で可能になります。

また画像ファイルが読み込めなかったりする場合もあり、画像が表示されなかった時の対応としてalt="●"にて、代替テキストとして文字情報も入れましょう。

実際の記述例

<input type="image" src="画像" alt="次ページへ">

こうなります

ホームページ作成ＴＯＰ > フォームを設置する > ボタンを画像に変える > このページのＴＯＰ　▲

ワンランクＵＰ講座
ホームページのスタイルをワンランクアップ！基本調整や特選方法、さらにはインターネットの話題までメールマガジンでお届けします。