フォーム基本レイアウト

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

ラベル上・入力下の縦積み。必須は文字で示し色だけに頼らない

プレビュー#

コピーする#

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

<form class="form-layout" action="/contact/confirm/" method="post" novalidate>
  <!-- 入力画面の h1 は、骨格であるこの節が持つ。あとから足す章分け・
       エラー表示・サマリー・同意・ボタン行は、どれも見出しを持たない -->
  <h1>お問い合わせ</h1>
  <p class="form-note">「必須」の付いた項目は入力が必要です。</p>
  <!-- 各欄の末尾には、空のエラー文の置き場を先に置く。
       「エラーサマリー」を足したとき、ここへ同じ文言が書き込まれる -->
  <div class="field">
    <label for="name">お名前 <span class="req" aria-hidden="true">必須</span></label>
    <input id="name" name="name" type="text" autocomplete="name"
      aria-describedby="name-msg" required>
    <p class="field__error" id="name-msg" hidden></p>
  </div>
  <div class="field">
    <label for="email">メール <span class="req" aria-hidden="true">必須</span></label>
    <input id="email" name="email" type="email" autocomplete="email"
      aria-describedby="email-msg" required>
    <p class="field__error" id="email-msg" hidden></p>
  </div>
  <div class="field">
    <label for="msg">内容</label>
    <textarea id="msg" name="msg" rows="4" aria-describedby="msg-msg"></textarea>
    <p class="field__error" id="msg-msg" hidden></p>
  </div>
  <!-- 塗りの送信ボタンは、この画面に1つだけ。章分け・エラー表示・ボタン行を
       重ねて組むときは、残す1つを決めてほかを消す -->
  <button class="button button--primary" type="submit">送信</button>
</form>

.form-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-inline-size: 32rem;
}
/* 入力画面でただ1つの見出し。確認画面と完了画面は、それぞれ自分の h1 を持つ */
.form-layout h1 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
}
/* 必須の凡例。項目が3つでも置く。印と同じ言葉「必須」で書く */
.form-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field label {
  font-size: var(--text-sm);
  font-weight: 700;
}
.req {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.field input,
.field textarea {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 0;
  min-block-size: 2.75rem;
}
.field textarea {
  min-block-size: 6rem;
  resize: vertical;
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}
/* 不備が出たときだけ文字が入る。名前は全パターン共通の .field__error */
.field__error {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-danger);
}
.field--error input,
.field--error textarea {
  border-color: var(--color-danger);
  outline-color: var(--color-danger);
}
/* .button の基底と派生は「出発点のCSS」にある */
.form-layout .button {
  align-self: start;
}

確認する#

• ラベルと入力がプログラム的に紐づいている
• タップ領域が2.75rem以上
• 必須は色だけでなく文字でも示している
• 凡例と各欄の印が同じ言葉（必須）で、フォームの先頭に凡例がある
• 入力画面の h1 はこの骨格が持つ（章分けと二重に貼らない）
• 塗りのボタンが画面に1つ（ほかのフォームのパターンと重ねたら、片方を消す）

関連#

• フォームの検証
• フォームの検証
• 余白