郵便番号フォームなどでinput要素が複数ある場合のlabelのfor属性ってどうしてますか？

Question

郵便番号フォームなどでinput要素が複数ある場合のlabelのfor属性ってどうしてますか？

これなら良いのですが
郵便番号(label for="hoge") 〇〇◯◯◯◯◯(input2 id="hoge")

<label for="hoge">郵便番号</label>
<input id="hoge" type="text" maxlength="7">

例えばこんなとき
郵便番号(label) 〇〇◯(input1)-◯◯◯◯(input2)

<label for="hoge">郵便番号</label>
<input id="hoge" type="text" maxlength="3">-<input id="hoge2" type="text" maxlength="4">

入力欄が二枠ある場合
最初のinputにフォーカスするのが正しいのでしょうか？
IDは2つ振れないですもんね

素朴な質問ですみません

Comments

[kei344]

例はHTMLでかかれてはいかがでしょう。

Answer 1

２つあったら最初につけます。

ただ、フォームの個数はストレスだと思っているので、可能な限りまとめてしまいます。
入力側の心理としてはそれ以前に二つに分けないで欲しいっていうところで…

郵便番号なら数字7文字で入力して貰うし、住所で折り返しが必要な場合でも

住所
フォーム１
フォーム２
フォーム３

ではなくて

住所
フォーム１（郵便番号がから逆引きで入るところ）
番地
フォーム２（残りを書くところ）
マンション名
フォーム３（マンション名以下をかくところ）

みたいにわざとラベルが付く形でデザインします。

Answer 2

自分がラベルをクリックした時に、どこに飛んで欲しいと思いますか？
まず、最初の欄だと思いますけど、違いますか？

もしふたつ目が指定されていたら、イラっとしますよね。
「なんで戻らなきゃなんないんだよっ！」って突っ込みますよ、きっと。

Comments

[hyksm]

やはり一つ目に設定するのがスタンダードなんですね

Answer 3

こうとか。

<div><label><div>郵便番号</div>
<input id="a" type="text" maxlength="7">
</label></div>
<div><label><div>郵便番号</div>
<input id="b" type="text" maxlength="3">-<input id="c" type="text" maxlength="4">
</label></div>
```**動くサンプル：**[https://jsfiddle.net/gyvd4qje/](https://jsfiddle.net/gyvd4qje/)