WEB DESIGN (B)LOG

ノンプログラマーなWebデザイナーによるWordpress、HTML5、スマートフォンサイト制作関連などWebサイト制作に関するブログ

iPhone、iPadでフォームのlabelが効かない現象の対処法

:iPhone•iPad•スマートフォン

htmlのフォームをコーディングする際、
labelタグのforとinputタグのidを同じ名前にし、テキスト部分をクリックできるようにしますが、
iPhoneやiPadの場合通常の制作と同じようにしても反応しません。

いろいろと試したところ、
以下のようにlabelにoncliclk属性を入れることで対応できました。

<input type="radio" id="hoge" name="hoge" /><label for="hoge" onclick="">テキスト部分</label>

ユーザビリティを考えるとほぼ必須だと思うので、
スマートではないですが上記のように対応するのも良いのではないかと思います。


【送料無料】今さら聞けないiPhone&スマートフォン・Wi-Fiの常識

pagetop