formタグとinputタグに対する、id、name属性

今さらながら、ASP.NETではなく、ASPをゴリゴリ書いていて、しかもXHTML1.1準拠のドキュメントだったため、基本的なタグの知識が怪しげで、自分用にメモ。
今回は特にformタグとinputタグに対する、idとname属性のつけ方に関して。挙動はIE6で確認。


まず基本的知識。
http://www.marguerite.jp/Nihongo/WWW/RefHTML/_id.html

id属性は、HTML文書中の特定の一箇所を明示するための属性です。

id属性は、以下の要素以外で利用出来ます。
<html>要素
<head>要素
<meta>要素
<script>要素
<style>要素
<base>要素
<title>要素

http://www.awcs.org/xhtml/#base
より、

HTML4は、a, applet, form, frame, iframe, img, map 要素についてname属性を定義し、JavaScriptスタイルシートプロパティへの指定としてid属性が定義されています。しかしXHTMLでは要素のname属性は公式には廃止予定であり、後続バージョンのXHTMLでは取り除かれます。


ここまでで、formタグはHTML4ではname属性OKだけどXHTMLからはname廃止なんだな、nameは使わないようにしよう、という程度は分かる。しかし、inputタグに関してはなんとなくname属性をこれまで使ってきていて、あれ?inputもXHTMLではidの指定にしたほうがいいんだっけ?それともしなければならないのか、もしくはしてはならないのか、境界線が曖昧になってきたので整理しよう、と。
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html なども使いながら調べた結果が以下。

HTML 4.01 (Transitional)
formタグもinputタグもname属性を指定すること。idのみでもたぶん大丈夫。こうなるわけか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" >
</head>
<body>
<form name="form1" action="○○.asp" method="post">
<input type="text" name="text1" value="" >
<input type="submit" name="submit1" value="Go!" >
</form>
</body>
</html>
XHTML 1.0(Transitional)
formタグはnameのみは不可(HTML-lintで『<form> の属性 `name` はあまり薦められない属性です。id 属性を使いましょう。』と言われる)。よってid属性が望ましい。それに対してinputタグはname指定すること。idのみは不正です。間違えないように。inputタグをidのみ指定にするとget、post時に値を受け渡すことができませんでした、要注意。実際にはブラウザの互換性などを考慮してidとnameの両方併記が現実的。Transitionだと規制がゆるいのでそういう意味でも併記が現実的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
</head>
<body>
<form id="form1" name="form1" action="○○.asp" method="post">
<input type="text" id="text1" name="text1" value="" />
<input type="submit" name="submit1" value="Go!" />
</form>
</body>
</html>
XHTML 1.1
formタグはid、inputタグはnameという点はXHTML 1.0(Transitional)と同じ。inputタグに対してidとnameの両方指定するのはOK(たぶん)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
<form id="form1" action="○○.asp" method="post">
<p>
<input type="text" id="text1" name="text1" value="" />
<input type="submit" name="submit1" value="Go!" />
</p>
</form>
</body>
</html>

XHTML1.0と比較すると、htmlのlang属性が廃止されている、metaタグをなくしている。inputタグの外側をpタグで囲んでいる、などに違いが。XHTML1,0、1.1とも先頭行にXML宣言(<?xml version="1.0" encoding="Shift_JIS"?>)を書いていないのはIE6を標準モードで動かしたいため。標準モードって何?という方は
http://web8341.info/advanced/dtd.htm
http://www.dspt.net/html_tag/mode.html
あたりをご覧ください。


結局、今回XHTML1.1を使用しなければならなかった訳ですがformタグはid指定、inputタグはid、name併記することとしました。

おまけ

Visual Studio 2005ではaspxファイルがXHTML 1.0(Transitional)で作成され、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><form name="form1" method="post" action="Default.aspx" id="form1">
    <input name="TextBox1" type="text" id="TextBox1" />

となっています。formタグもinputタグもid、nameの両方が指定されています。XHTML 1.0 TransitinalだからこれはOKということですね。

参考

http://www.awcs.org/xhtml/#base
http://www.marguerite.jp/Nihongo/WWW/RefHTML/_id.html


詳解HTML&XHTML&CSS辞典 第三版

詳解HTML&XHTML&CSS辞典 第三版

大藤幹さんの本を買っとけば間違いない。