1行の入力グループ

フォーム ／ パターン集トップ

郵便番号と住所・姓と名を1行に並べる。欄ごとに label と autocomplete を付ける

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<div class="input-group">
  <fieldset class="input-group__set">
    <legend>お名前 <span class="req" aria-hidden="true">必須</span></legend>
    <!-- 横に並べても、知らせる場所はほかのフォームと同じ。欄ごとに
         空のエラー文の置き場を先に置き、aria-describedby で結んでおく -->
    <div class="input-group__row">
      <div class="field field--inline">
        <label for="ig-sei">姓</label>
        <input id="ig-sei" name="family-name" type="text" autocomplete="family-name"
          aria-describedby="ig-sei-msg" required>
        <p class="field__error" id="ig-sei-msg" hidden></p>
      </div>
      <div class="field field--inline">
        <label for="ig-mei">名</label>
        <input id="ig-mei" name="given-name" type="text" autocomplete="given-name"
          aria-describedby="ig-mei-msg" required>
        <p class="field__error" id="ig-mei-msg" hidden></p>
      </div>
    </div>
  </fieldset>
  <fieldset class="input-group__set">
    <legend>ご住所 <span class="req" aria-hidden="true">必須</span></legend>
    <div class="input-group__row input-group__row--address">
      <div class="field field--inline">
        <label for="ig-zip">郵便番号</label>
        <!-- 書き方の補助とエラー文の両方を結ぶ。並べた順に読み上げられる -->
        <input id="ig-zip" name="postal-code" type="text" inputmode="numeric"
          autocomplete="postal-code" aria-describedby="ig-zip-hint ig-zip-msg" required>
        <p class="field__error" id="ig-zip-msg" hidden></p>
      </div>
      <div class="field field--inline">
        <label for="ig-addr">住所（番地まで）</label>
        <input id="ig-addr" name="address" type="text" autocomplete="street-address"
          aria-describedby="ig-addr-msg" required>
        <p class="field__error" id="ig-addr-msg" hidden></p>
      </div>
    </div>
    <p class="form-hint" id="ig-zip-hint">郵便番号はハイフンなしの7桁で入力してください。</p>
  </fieldset>
</div>

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-inline-size: 32rem;
}
.input-group__set {
  margin: 0;
  padding: 0;
  border: 0;
}
.input-group__set legend {
  padding: 0;
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}
/* 必須の印は他のフォームと同じ .req。ここではグループの legend に1つ置く */
.req {
  font-weight: 400;
  color: var(--color-text-muted);
}
.input-group__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.input-group__row--address {
  grid-template-columns: 8rem minmax(0, 1fr);
}
/* 欄の名前は他のフォームと同じ .field。横に並べるときだけ --inline を重ねる */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field label {
  font-size: var(--text-sm);
  font-weight: 700;
}
.field input {
  inline-size: 100%;
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  min-block-size: 2.75rem;
}
.field input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* 1行に並べた欄。名前はグループの legend が持つので、欄の label は補助にする */
.field--inline {
  gap: var(--space-1);
}
.field--inline label {
  font-weight: 400;
  color: var(--color-text-muted);
}
/* 不備が出たときだけ文字が入る。名前は全パターン共通の .field__error */
.field__error {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-danger);
}
.field--error input {
  border-color: var(--color-danger);
  outline-color: var(--color-danger);
}
.form-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

確認する#

• 郵便番号は type=text と inputmode=numeric の組にする（type=number では先頭の 0 が消える）
• グループ名だけで済ませず、1欄ずつに label を付ける
• 必須の印はグループの legend に1つ置き、欄ごとに繰り返さない
• 4つの欄それぞれに .field__error の置き場があり、aria-describedby で結ばれている
• 郵便番号は補助文とエラー文の両方を aria-describedby に並べている
• この節は h1 を持たない（入力画面の見出しは骨格が1つだけ持つ）
• autocomplete が姓=family-name・名=given-name の対で合っている

関連#

• 入力
• 余白
• 出発点のCSS