読者です 読者をやめる 読者になる 読者になる

label要素のfor属性のためだけにid入れたくない

ただの愚痴でしかないのですが、言いたいことはタイトルが全てです。

label要素を適切に使う場合、label要素のfor属性に関連づけたいフォーム部品(input要素とか)のidを入れるか、label内に部品を書くのが基本となります。問題なのは前者の方法のidを入れないといけないという部分で、1つのページで複数のformがある場合とか、そうでなくても他の要素と被る可能性があるのは嫌なので適当な名前は付けれず、私は良くinputを包含するformにつけたid*1をプレフィックスで入れてます。

<form id="hoge-form">
  <label for="hoge-form-email">Email</label>
  <input type="email" id="hoge-form-email" name="email" placeholder="hoge@example.com" />
</form>

でコード見れば分かるのですが、長いし面倒だし見栄えが悪いしで、どうにも微妙な気分にさせられ続けて数周年なわけです。

そもそも何で気に食わないのか考えてみると、form要素使って入力フォームを作る場合、各部品はform内で完結するのですね。なのに、グローバルな識別子を要求するのがもやもやします。上記の例ならforにnameを指定できればスッキリ爽やかなのに。

<form id="hoge-form">
  <label for="email">Email</label>
  <input type="email" name="email" placeholder="スッキリ爽やか :)" />
</form>

ラジオボタンの時はどうするんだ!」という問いには「素直にlabelで囲め」で一蹴、そんな幸せなフォーム作成ライフが待ち遠しいです。

*1:formはidがしっくりくる