iOSのバージョンによって、labelタグの挙動は異なる
公開日:
こんにちは。x-fitチーム・エバンジェリストの渡辺です。webサイトで、ユーザに入力を促すフォーム。フォームの要素に対して、ラベルを指定するため、一般にはlabelタグが使われます。このlabelタグ、iOSのバージョンによって、タップ時の挙動が異なりますのでちょっとまとめてみます。
labelタグの使用方法
labelタグは、特定のフォーム要素と関連付けを行う方法が2種類あります。
- for属性にidを指定する
labelタグにはfor属性が指定できます。属性値は関連付けを行うフォーム要素のidです。 - 関連付けする要素をタグで挟む
labelタグで、関連付けする要素自体を挟みます。
上記のように指定されたlabel要素は、通常タップされると関連付けられたフォーム要素へのタップと認識され、ラジオボタンやチェックボックスであれば、チェックが入るようになります。iOSでは、5.1.1以前のバージョンの場合、このlabel要素へのタップがフォームへのタップとして認識されません。
サンプルHTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>label test</title> <style type="text/css"> .first{ line-height : 30px; padding : 10px; border: solid 1px blue; border-radius: 5px 5px 5px 5px/5px 5px 5px 5px; background-color: skyblue; } .second{ line-height : 30px; padding : 10px; border: solid 1px red; border-radius: 5px 5px 5px 5px/5px 5px 5px 5px; background-color: orange; } </style> </head> <body> <form name="aform" method="post" action=""> <p>for属性を使って関連付ける</p><br /> <input type="radio" name="test1" id="m1" value="m1" /><label class="first" for="m1">男</label> <br /> <br /> <input type="radio" name="test1" id="m2" value="m2" /><label class="second" for="m2">女</label> <br /> <br /> <br /> <p>labelタグで挟む</p><br /> <label class="first"><input type="radio" name="test2" value="a1" />はい</label> <br /> <br /> <label class="second"><input type="radio" name="test2" value="a2" />いいえ</label> <br /> <br /> </form> </body> </html>
上記の例のように、label要素にスタイルをあててボタンのようなデザインにしている場合、iOS5.1.1以前のバージョンでは、label要素をタップしてもチェックが入らないため、フォームが機能していないような印象を与える可能性があります。iOS6以降であればlabel要素のタップでもフォーム要素が反応するようになります。
回避策
回避するためには、iOSのバージョンを見て、必要に応じてlabel要素のタッチを監視、フォーム要素を制御するようなJavaScriptを実装する必要があるでしょう。
フォーム設計は、webサイトのコンバージョンに大きな影響を与えます。label要素を使ったフォームを利用している場合は、是非実機で使い勝手を確認してみることをお勧めします。
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。