inputタグはformタグで必ず囲む必要がありますか？

解決済

質問者：kitty1000
質問日時：2008/08/31 15:20
回答数：5件

<input type="text">や< input type="button">などのinputタグは、入力欄に入力されたデータを他のファイルに送らずに同ファイル内で処理する場合も、必ず<form></form>で囲む必要があるのでしょうか？

例えば、<input type="text" id=”background_color”>に色（例：赤、青等）を入力し< input type="button" value=”変更” onClick=”change_background()”>ボタンを押すと、バックグラウンドの色が入力された色に変わるようなコードを書くとします。Javascript（change_background()）の内容は同ファイルの<header></header>内に記述しますが、ここでは関係ないので割愛します。

この場合、
<body>
<input type="text" id=”background_color”>
< input type="button" value=”変更” onClick=”change_background()”>
</body>
で良いのでしょうか?

それとも
<body>
<form>
<input type="text" id=”background_color”>
< input type="button" value=”変更” onClick=”change_background()”>
</form>
</body>
とする必要が、ありますか？

よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (5件)

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

No.5ベストアンサー

回答者： noname#100277
回答日時：2008/08/31 23:30

inputは要求した内容をファイルに受け渡す時に使用される要素ですね。

formの一部としての機能と云うのを考えるとformで囲むのが常道でしょう。
同じファイルだとしても同様です。

- 0
- 件

通報する

この回答へのお礼

aidesさん
ご回答、ありがとうございました。

了解しました。

通報する

お礼日時：2008/09/02 10:59

No.4

回答者： himajin100000
回答日時：2008/08/31 22:19

>#3

そっか，こういう問題があるのか…勉強になった。

自分用のメモ:
#form要素のaction属性は#REQUIREDなので，指定しなければならず，
Web標準普及プロジェクトのコードはそのままでは使えないので注意する必要がある。
#別々のfieldset...でもダメだったな。

- 0
- 件

通報する

この回答へのお礼

himajin100000さん
ご意見、ありがとうございました。

通報する

お礼日時：2008/09/02 10:57

No.3

回答者： Werner
回答日時：2008/08/31 18:58

私も、基本的にhimajin100000さんと同意見なのですが、

以下のリンク先のような問題もあるようなので留意しておいた方がよいかもしれません。

フォームコントロールはform要素内に書きましょう - Web標準普及プロジェクト
http://www.mozilla.gr.jp/standards/webtips0017.h …

- 0
- 件

通報する

この回答へのお礼

Wernerさん
ご回答、ありがとうございました。

参考にさせて頂きます。

通報する

お礼日時：2008/09/02 10:57

No.2

回答者： himajin100000
回答日時：2008/08/31 18:17

>それでは、himajin100000さんの推奨されるコードは以下のようなものでしょうか？

はい。その通りです。(何故か全角”になってますが半角"ですよね？)
まあ自分の場合
<body>
<dl>
<dt>背景色</dt>
<dd><input type="text" id="background_color" /></dd>
<dt>処理</dt>
<dd><input type="button" value="変更" onClick="change_background();" /></dd>
</dl>

</body>

とまあ，dl要素,dt要素,dd要素で表現しておいて
必要に応じてdisplay:none;で非表示にすることが多いですけど。

- 0
- 件

通報する

この回答へのお礼

himajin100000さん
ご回答、ありがとうございました。

了解しました。

通報する

お礼日時：2008/08/31 18:26

No.1

回答者： himajin100000
回答日時：2008/08/31 16:01

ご指摘の通り，どこにも送信しない場合，form要素を祖先に持つ必要はありません。

というか個人的な見解では「form要素を祖先に持つべきではない」とすら，思っています。(ここの回答でもどこにも送信しないのにform要素があるコードが見受けられ，歯がゆい思いをしています)

#XHTML 1.0 Strictではbody要素の子はブロックレベル要素(del要素など一部例外あり)であり，この場合，bodyの子としてinput要素は存在できません。

この回答への補足

himajin100000さん
ご回答、ありがとうございました。

＞#XHTML 1.0 Strictではbody要素の子はブロックレベル要素(del要素
＞など一部例外あり)であり，この場合，bodyの子としてinput要素は存
＞在できません。

なるほど、
それでは、himajin100000さんの推奨されるコードは以下のようなものでしょうか？
<body>
<p>
<input type="text" id=”background_color”>
< input type="button" value=”変更” onClick=”change_background()”>
</p>
</body>

又は

<body>
<div>
<input type="text" id=”background_color”>
< input type="button" value=”変更” onClick=”change_background()”>
</div>
</body>