説明
例えば、セレクトフォームにおけるselectedや、ラジオボタンにおけるcheckedが論理属性です。この属性は値を指定しなくても、「その属性が指定されているだけ」で、要素に影響を与えていますよね。論理属性を指定することによって、デフォルトじゃない働きをします。つまり、セレクトボックス、ラジオボタンでは、該当の選択肢が、通常はならない選択状態になります。
HTML
<!-- [selected]は論理属性 -->
<select name="number">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<!-- [checked]は論理属性 -->
<input type="radio" name="love" value="cat">猫
<input type="radio" name="love" value="dog" checked>犬
猫 犬
空の値を指定する
空の値を指定する場合がありますが、これには特に意味はありません。というのも、空の値というと通常は否定的な意味を持ちそうなところ、そうではありません。下記の例で言えば、空の値を指定したとしても、属性自体が存在しているので、該当の選択肢は選択状態になります。
HTML
<!-- [selected]は論理属性 -->
<select name="number">
<option value="1" selected="">1</option>
<option value="2">2</option>
</select>
<!-- [checked]は論理属性 -->
<input type="radio" name="love" value="cat">猫
<input type="radio" name="love" value="dog" checked="">犬属性名を指定する
値に属性名を指定するケースもあります。が、これも空の値と同じで特に意味はありません。属性名だけを指定した時と同様に真になり、その要素に影響を与えます。
HTML
<!-- [defer]は論理属性 -->
<script src="..." defer="defer"></script>
<!-- [async]は論理属性 -->
<script src="..." async="async"></script>間違った値の指定
論理属性には、空の値か、または、属性名を指定することができます。関係のない文字列を指定すると文法違反になります。ただし、文法違反になっても、ほとんどのブラウザでは正常に動作します。
HTML
<!-- 正しい指定方法 -->
<script src="..." defer></script>
<script src="..." defer=""></script>
<script src="..." defer="defer"></script>
<!-- 間違った指定方法 -->
<script src="..." defer="true"></script>下記は、論理属性の値に関係のない文字列を指定した例です。文法違反でも、あなたのブラウザでは正常に動作していますか？
HTML
<select name="number">
<option value="1">1</option>
<option value="2" selected="hoge">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>