to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

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の表示例

上記の例のように、label要素にスタイルをあててボタンのようなデザインにしている場合、iOS5.1.1以前のバージョンでは、label要素をタップしてもチェックが入らないため、フォームが機能していないような印象を与える可能性があります。iOS6以降であればlabel要素のタップでもフォーム要素が反応するようになります。

回避策

回避するためには、iOSのバージョンを見て、必要に応じてlabel要素のタッチを監視、フォーム要素を制御するようなJavaScriptを実装する必要があるでしょう。

フォーム設計は、webサイトのコンバージョンに大きな影響を与えます。label要素を使ったフォームを利用している場合は、是非実機で使い勝手を確認してみることをお勧めします。
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
タグ: 
このエントリーをはてなブックマークに追加