送信ボタンを画像で作った送信ボタンに変更したい

Question

下記のような送信ボタンを画像で作った送信ボタンに変更したいのですが、↓のように変更すると、submitが消えてしまいます。
このような場合、背景画像として、画像を使うのが一般的なのでしょうか？
また、aria-disabled="false"という属性は、サーバサイドの何かでしょうか？

<input name="commit" type="submit" value="ログイン" class="ui-btn" aria-disabled="false" > ↓ <input name="commit" type="image" value="ログイン" class="ui-btn" aria-disabled="false" >

・恐らく下記のような形で良いのかとも思うのですが、type="submit"をtype="image"に代えてしまっても、サーバサイドで問題が起こる事はないでしょうか？
<input name="commit" type="image" value="ログイン" class="ui-btn" aria-disabled="false" src="button.gif" alt="ログイン" width="80" height="30">

ちゃんとした解決する、回答をしてくれる方を、BAにさせてもらいます。

Answer 1

RTFM
http://www.htmq.com/html/input_image.shtml

src属性必須

Comments

[退会済みユーザー]

名前どおりのKS

Answer 2

私のやっている方法をお教えします。

<input name="commit" type="submit" value="ログイン" class="ui-btn" aria-disabled="false" > ↓ <input name="commit" type="image" src="ポタン画像のＵＲＬ" style="width:画像幅px;" class="ui-btn" onclick="document.charset='."'UTF-8'".';" >

このようにやってみてください。動作するはずです。
ポタン画像のＵＲＬと画像幅はあなたの状況にあったデータに変えてください。
画像幅の値を変えることで、縦横比そのままで、拡大、縮小は思いのままです。

また、このボタンのスタイル定義を#ui-btnとスタイルシート記述されているようですが、widthもできたら
スタイルシートに記述したほうがよいかと思います。

type="submit"とすると、valueで設定している「ログイン」が表示されますが、type="image"とすると
「ログイン」は表示されません。
ですから、画像の中に「ログイン」を入れておく必要があります。
面倒かもしれませんが、フォントが自由に変えられるので、見た目を良くする効果が期待できますよ。

Comments

[退会済みユーザー]

まっとうなご回答ありがとうございます。

aria-disabled="false"は調べてみたところ、アクセシビリティとのみかかわる、ワイアリアのための属性のようですね。
つまり、見た目やちゃんとログインできるかできないかとはあまり関係なさそうなので、とりあえずそのままつけておけば問題なさそうですね。

また、type="submit"だと画像でログインボタンを作る事はできないようですね。
画像にするには、type="image"をtype="submit"にする必要が必須のようですね。
心配なのはこれでちゃんとログインできて、サーバサイドで問題がないかです。
一般的にname="commit"さえ代えなければサーバサイドの問題は起きないでしょうか？

[退会済みユーザー]

＞
また、このボタンのスタイル定義を#ui-btnとスタイルシート記述されているようですが、widthもできたら
スタイルシートに記述したほうがよいかと思います。

画像は、inputもimgも、HTMLを読みこんだ際に、読み込まれていない画像の領域を確保してから、表示するようにheightとwidthを指定しないと、一度崩れてから、画像が入り、ちゃんとした形に戻る現象が起きるという事でしょうか？

よくimgは属性で指定しているサイトを見ますが、CSSでも読み込み順などによる問題は起きないということでよろしいでしょうか？

[KazutoshiOhashi]

何か、ログインが特別なものと思われているように伺われますが、何ら変わりはないです。
心配しているより、やってみれば、わかります。それをやって命をとられることは、サーバーが壊れることもない。間違ったら、親切にエラーを出して違っていることを教えてくれます。
だから、私の書いたものを、そのまま、置き換えてみて、どう動くか観察してみてください。

確実に動くはずです。
ログインのプログラムに渡す必要なデータはnameとvalueの値だけです。
それさえ正しく設定されていれは、後は表示方法をどうするかだけの問題。
何度も、やってみることで、覚えられますよ。
論より証拠です。

[退会済みユーザー]

ありがとうございます。
それではチャレンジしてみます。

[退会済みユーザー]

教えていただいた通り、行いログインができました。
ありがとうございました。