<label htmlFor="">って何？

今回記述する内容

• React
• tailwindCSS
• htmlForについて

---

フォームを作成する時に見つけた

<label htmlFor="">

これってなんだろうと思ってたら意外と便利だったというお話。
Forもありますが、詳しくは分かりません。

htmlForなし

まずhtmlForなしのフォームを作成します。

const Forms = () => {
  return (
    <>
      <div className='w-10/12 mx-auto md:max-w-md'>
        <form action=''>
          <div className='mb-8'>
            <label className='text-sm block'>
              お名前
            </label>
            <input
              type='text'
              className='border-b w-full py-2 focus:outline-none focus:border-b-2 focus:border-blue-500'
              placeholder='○○ △△'
            />
          </div>
          <div className='mb-8'>
            <label className='text-sm block'>
              メールアドレス
            </label>
            <input
              type='email'
              className='border-b w-full py-2 focus:outline-none focus:border-b-2 focus:border-blue-500'
              placeholder='[e-mail]'
            />
          </div>
          <button
            type='button'
            className='bg-blue-500 text-white font-semibold py-2 px-8 rounded-md focus:outline-none'
          >
            登録する
          </button>
        </form>
      </div>
    </>
  );
};

export default Forms;

こんな感じのよくあるフォームです

---

htmlForあり

const Forms = () => {
  return (
    <>
      
      <div className='w-10/12 mx-auto md:max-w-md'>
        <form action=''>
          <div className='mb-8'>
            {/* htmlFor追加 */}
            <label htmlFor='your_name' className='text-sm block'>
              お名前
            </label>
	     {/* id追加 */}
            <input
              id='your_name'
              type='text'
              className='border-b w-full py-2 focus:outline-none focus:border-b-2 focus:border-blue-500'
              placeholder='○○ △△'
            />
          </div>
          <div className='mb-8'>
	   {/* htmlFor追加 */}
            <label htmlFor='email' className='text-sm block'>
              メールアドレス
            </label>
	     {/* id追加 */}
            <input
              id='email'
              type='email'
              className='border-b w-full py-2 focus:outline-none focus:border-b-2 focus:border-blue-500'
              placeholder='[e-mail]'
            />
          </div>
          <button
            type='button'
            className='bg-blue-500 text-white font-semibold py-2 px-8 rounded-md focus:outline-none'
          >
            登録する
          </button>
        </form>
      </div>
    </>
  );
};

export default Forms;

見た目は変わりません

ありなしで動作比較

各ラベルをクリックするとインプットにフォーカスが移ります。
labelタグ内のhtmlForで指定したidに紐づいてフォーカスが当たっている事が分かります。
もちろん指定するidを変えれば関係ない所と紐づけたりもできます。

以上、
htmlForってなんだ？
なくても問題ないけどあったら便利かも？
というお話でした。