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>
<!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
- 作者: 大藤幹
- 出版社/メーカー: 秀和システム
- 発売日: 2007/03/19
- メディア: 単行本
- 購入: 1人 クリック: 37回
- この商品を含むブログ (24件) を見る