HTMLのid属性とname属性の違いは何ですか

HTML では、id 属性と name 属性の両方が HTML 要素タグを表す識別子を提供します。それでは、それらの違いは何でしょうか？この記事では、id 属性と name 属性の簡単な比較と、id 属性と name 属性の違いについて紹介します。

#html の id 属性

id ​​属性を使用して、一意の HTML 要素を識別します。 URL (# 記号が付いた URL) のアンカー参照として使用したり、CSS の ID セレクターとして使用して、その要素をスタイル設定したりできます。 JavaScript で getElementById() を使用して、id 属性値を通じて要素を検索し、その要素を操作することもできます。例:

<p id="p1">测试文本！测试文本！</p>
<p id="p2">测试文本！测试文本！</p>

<script>
document.getElementById("p2").style.color="red";
</script>

id ​​属性は普遍的に互換性があり、どの要素に対しても有効です。また、id 属性の値は大文字と小文字が区別され、各 id 値は一意である必要があります。例:

<div id="demo">
	<div id="a">div标签，id值为a</div>
	<p id="A">p标签，id值为A</p>
</div>

#a{ color: red;}
#A{ color: pink;}

レンダリング:

html の name 属性

名前属性は HTML 要素を識別するためにも使用されますが、その値は再利用できません。例: ラジオ ボタン

<form action="" method="get"> 
	最喜欢水果？<br /><br /> 
	<label><input name="Fruit" type="radio" value="" />苹果 </label> <br /> 
	<label><input name="Fruit" type="radio" value="" />桃子 </label> <br /> 
	<label><input name="Fruit" type="radio" value="" />香蕉 </label> <br /> 
	<label><input name="Fruit" type="radio" value="" />梨 </label> <br /> 
	<label><input name="Fruit" type="radio" value="" />其它 </label> <br /> 
</form>

効果図:

上記の例に示すように、name 属性は情報を送信するためにフォームでよく使用されます。この属性は、a、form、iframe、img、map、input、select、textarea などのラベル要素に対してのみ有効です。 、など。

name 属性は、JavaScript で getElementsByName(); を使用して要素を検索するために使用できますが、CSS または URL で参照することはできません。例:

<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>


<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名为 &#39;myInput&#39; 的元素有多少个？" />

レンダリング:

説明:

ID は 1 つに属すると言えます。個人 ID 番号、名前は個人の名前です。両方が同時に存在し、同じ名前空間を共有できます (両方の値が同じである可能性があります)。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上がHTMLのid属性とname属性の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。