あげ ------------------------------------------------ ↑こちらのソースを ↓下記バリデーションでチェックすると、エラーが出ます。 http://validator.w3.org/ が原因なのですが、 inputタグに画像を使いたい場合は、CSSで背景を設定するしかないのでしょうか？よろしくお願いいたします。

せっかくエラーチェックして、なぜ聞かれるのかわかりません。エラーの原因もチェックする限りは表示されるはずです。 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 )

下記htmlでバリデーションをかけるとエラーがでるのですが、原因を教えてください。

解決済

質問者：reggaepunc
質問日時：2010/04/14 15:44
回答数：2件

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>あげ</title>
<meta name="description" content="">
</head>
<body>

<p><input type="image"></p>

</body>
</html>
------------------------------------------------
↑こちらのソースを
↓下記バリデーションでチェックすると、エラーが出ます。
http://validator.w3.org/

<input type="image"> が原因なのですが、
inputタグに画像を使いたい場合は、CSSで背景を設定するしかないのでしょうか？
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： himajin100000
回答日時：2010/04/14 16:21

>#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 …
を漁ると、

>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>

この回答への補足

丁寧なご意見ありがとうございます。

記載頂いたソースを、下記にて確認してみたのですが、
http://validator.w3.org/

エラーが出てしまいました。
設定とかが違うのでしょうか。。

---
別の実現方法として、cssで背景に画像を適用すればやりたい事は実現しますが、IE8でクリックしたときに背景がずれる現象が出ます。背景がずれる現象もCSSハックで解消出来ますが、IE8だとどうしても背景画像の動きが不安定になってしまう状況です。
ですので、このバリデーションさえ通れば堂々と<input type="image" src="hoge.gif">を使いたいという状況です。

補足日時：2010/04/15 01:27

通報する

- 0
- 件

通報する

この回答へのお礼

あ、なんかダブルクォーテーションに見えないゴミがついてました。
このゴミを消してバリデーションかけると通りますね！www
あと、inputタグにaltはOKなんでしょうか？www

何はともあれ、表題の目的は遂げられました。
ありがとうございました。
input + alt に関しては、気になるので引き続き調べますw

通報する

お礼日時：2010/04/15 01:34

No.1

回答者： ORUKA1951
回答日時：2010/04/14 16:17

せっかくエラーチェックして、なぜ聞かれるのかわかりません。

エラーの原因もチェックする限りは表示されるはずです。
Required attributes missing on element input.

17.4 INPUT要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　→type ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　　→17.4.1 INPUT要素で作成するコントロールの形式 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　　　