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要素を使ったフォームを利用している場合は、是非実機で使い勝手を確認してみることをお勧めします。
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
Tweet
