- ベストアンサー
HTMLのバリデーションでエラーが出る理由とinputタグに画像を使う方法
- HTMLのバリデーションでエラーが出る理由は、inputタグのtype属性にimageが指定されているためです。
- inputタグに画像を使いたい場合は、CSSで背景を設定する方法があります。
- ただし、inputタグのtype属性にimageを指定した場合には、画像として表示されることに注意が必要です。
- reggaepunc
- お礼率50% (57/113)
- HTML
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>#1 HTML 4.01のinput要素には必須属性ないよ ============ ●システム識別子相当の部分がないことからHTML5として解釈して欲しいのだろう(SGMLでない、って言い切っているので「相当」) ●実験的な機能なので完全ではなく、事実質問文で掲示されたソースを検証しても Error Line 10, Column 23: Required attributes missing on element input. <p><input type="image"></p> Element-specific attributes for element input: (以下略) というだけで、どの属性が必須属性なのかについてはちっとも述べてくれず、暴れたくなりました。 仕様書 http://dev.w3.org/html5/spec/Overview.html#image-button-state を漁ると、 >The image is given by the src attribute. The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted. >The alt attribute provides the textual label for the alternative button for users and user agents who cannot use the image. The alt attribute must also be present, and must contain a non-empty string. という記述が見つかるため、src属性とalt属性をとりあえずいい加減に補って検証すると通りました。まぁいい加減なままじゃ困るんですが(笑)。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>あげ</title> <meta name="description" content=""> </head> <body><p><input type="image" src="http://cmm001.goo.ne.jp/img/logo/goo.gif" alt="xxx"></p> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
せっかくエラーチェックして、なぜ聞かれるのかわかりません。 エラーの原因もチェックする限りは表示されるはずです。 Required attributes missing on element input. 17.4 INPUT要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#edef-INPUT ) →type ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#adef-type-INPUT ) →17.4.1 INPUT要素で作成するコントロールの形式 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#input-control-types )
お礼
input + altの方ですが、 ご提示のurlに答えがありました。 ありがとうございました。
お礼
あ、なんかダブルクォーテーションに見えないゴミがついてました。 このゴミを消してバリデーションかけると通りますね！www あと、inputタグにaltはOKなんでしょうか？www 何はともあれ、表題の目的は遂げられました。 ありがとうございました。 input + alt に関しては、気になるので引き続き調べますw
補足
丁寧なご意見ありがとうございます。 記載頂いたソースを、下記にて確認してみたのですが、 http://validator.w3.org/ エラーが出てしまいました。 設定とかが違うのでしょうか。。 --- 別の実現方法として、cssで背景に画像を適用すればやりたい事は実現しますが、IE8でクリックしたときに背景がずれる現象が出ます。背景がずれる現象もCSSハックで解消出来ますが、IE8だとどうしても背景画像の動きが不安定になってしまう状況です。 ですので、このバリデーションさえ通れば堂々と<input type="image" src="hoge.gif">を使いたいという状況です。