お問い合わせフォーム – ケケンタの独学ITブログ https://kekenta-it-blog.com プログラミングやWeb制作の情報を発信 Wed, 13 Aug 2025 07:49:40 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://kekenta-it-blog.com/wp-content/uploads/2023/07/cropped-KEKENTA-BLOG-32x32.png お問い合わせフォーム – ケケンタの独学ITブログ https://kekenta-it-blog.com 32 32 【コピペOK】入力フォーム・ラジオボタン・セレクタなどのレイアウト紹介【Web制作】 https://kekenta-it-blog.com/form-patterns-complete-guide/ https://kekenta-it-blog.com/form-patterns-complete-guide/#respond Wed, 13 Aug 2025 07:36:34 +0000 https://kekenta-it-blog.com/?p=16516

このようなお悩みにお応えするため、Webサイトのフォーム作成ですぐご活用いただけるレイアウトパターンをご紹介！   紹介するフォーム要素 各レイアウトのHTML・CSSコードをプレビュー付きで紹介しています。 基本フォー […]]]>

ケケンタ

お問い合わせフォームのコーディングするの大変だな……

ケケンタ

パーツだけサクッとコピーして使いたいな……

このようなお悩みにお応えするため、Webサイトのフォーム作成ですぐご活用いただけるレイアウトパターンをご紹介！

紹介するフォーム要素

  • テキストフォーム
  • ラジオボタン
  • チェックボックス
  • テキストエリア
  • 電話番号、メールアドレス、都道府県

各レイアウトのHTML・CSSコードをプレビュー付きで紹介しています。

ケケンタ

コピペで簡単にサクッとご活用いただけます！
お役に立てば何よりです！

基本フォームセクション

まずは簡単に、基本的なフォーム要素を含むサンプルフォームをご紹介します。こちらは、実際のWebサイトでよく使用される基本的なフォーム構成です。

ソースコード
<form class="sample-form">
    <div class="form-group">
        <label class="form-label">
            お名前
            <span class="required-text">必須</span>
        </label>
        <input type="text" 
               class="form-input" 
               name="name" 
               placeholder="山田 太郎"
               required>
    </div>

    <div class="form-group">
        <label class="form-label">お問い合わせ種別</label>
        <select class="form-input" name="inquiry_type">
            <option value="">選択してください</option>
            <option value="general">一般的なお問い合わせ</option>
            <option value="technical">技術的なお問い合わせ</option>
            <option value="billing">料金に関するお問い合わせ</option>
        </select>
    </div>

    <div class="form-group">
        <label class="form-label">お問い合わせ内容</label>
        <textarea class="form-textarea" 
                  name="message" 
                  rows="5" 
                  placeholder="お問い合わせ内容を詳しくお書きください"></textarea>
    </div>

    <div class="form-group">
        <label class="form-label">ご希望の連絡方法</label>
        <div class="radio-group">
            <div class="radio-item">
                <input type="radio" name="contact_method" id="email" value="email" checked>
                <label for="email">メール</label>
            </div>
            <div class="radio-item">
                <input type="radio" name="contact_method" id="phone" value="phone">
                <label for="phone">お電話</label>
            </div>
            <div class="radio-item">
                <input type="radio" name="contact_method" id="both" value="both">
                <label for="both">どちらでも可</label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="form-label">追加サービス</label>
        <div class="checkbox-group">
            <div class="checkbox-item">
                <input type="checkbox" name="services[]" id="newsletter" value="newsletter">
                <label for="newsletter">ニュースレター配信を希望する</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" name="services[]" id="updates" value="updates">
                <label for="updates">製品アップデート情報を受け取る</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" name="services[]" id="events" value="events">
                <label for="events">イベント・セミナー情報を受け取る</label>
            </div>
        </div>
    </div>
</form>

/* 基本スタイル */
.sample-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input,
.form-textarea,
select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus,
.form-textarea:focus,
select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* ラジオボタン・チェックボックス */
.radio-group,
.checkbox-group {
    margin-bottom: 15px;
}

.radio-item,
.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.radio-item label,
.checkbox-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

/* ボタン */
.form-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #667eea;
    color: white;
}

.btn-primary:hover {
    background: #5a6fd8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

基本的なお問い合わせフォームであれば、このサンプルフォームのコードをそのままお使いいただけるかと思います。

ケケンタ

それでは以下より、テキストフォームやラジオボタンなど、入力フォーム要素ごとのレイアウトパターンをご紹介していきます。

「必須」アイコンの有無や縦並び・横並びなど、わずかな違いではありますが、すべてイチから作成しようとすると意外と手間がかかります。ぜひコピペでサクッとご活用いただければと思います！

記事の後半ではpattern属性による入力制御機能付きの電話番号・郵便番号フォームもご紹介しています。ぜひご覧いただけるとうれしいです！

テキストフォーム

通常パターン

ラベルを上に配置し、その下にテキスト入力フィールドを配置する基本的なパターン

ソースコード
<div class="form-group">
    <label class="form-label">
        お名前
        <span class="required-text">必須</span>
    </label>
    <input type="text" 
           class="form-input" 
           name="name" 
           placeholder="山田 太郎"
           required>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

横並び

ラベルと入力フィールドを横に並べて配置し、スペースを効率的に使用するパターン

ソースコード
<div class="form-group horizontal-layout">
    <label class="form-label">
        お名前
        <span class="required-text">必須</span>
    </label>
    <input type="text" 
           class="form-input" 
           name="name" 
           placeholder="山田 太郎"
           required>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 横並びレイアウト */
.horizontal-layout {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.horizontal-layout .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-layout .form-input {
    flex: 1;
}

苗字・名前分割

姓名を別々のフィールドに分けて入力してもらうパターン

ソースコード
<div class="name-split">
    <div class="form-group">
        <label class="form-label">
            苗字
            <span class="required-text">必須</span>
        </label>
        <input type="text" 
               class="form-input" 
               name="lastname" 
               placeholder="山田"
               required>
    </div>

    <div class="form-group">
        <label class="form-label">
            名前
            <span class="required-text">必須</span>
        </label>
        <input type="text" 
               class="form-input" 
               name="firstname" 
               placeholder="太郎"
               required>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 苗字・名前分割 */
.name-split {
    display: flex;
    gap: 30px;
}

.name-split .form-group {
    flex: 1;
    margin-bottom: 0;
}

苗字・名前分割＋横並び

姓名分割と横並びレイアウトを組み合わせたパターン

ソースコード
<div class="name-split">
    <div class="form-group horizontal-layout">
        <label class="form-label">
            苗字
            <span class="required-text">必須</span>
        </label>
        <input type="text" 
               class="form-input" 
               name="lastname" 
               placeholder="山田"
               required>
    </div>

    <div class="form-group horizontal-layout">
        <label class="form-label">
            名前
            <span class="required-text">必須</span>
        </label>
        <input type="text" 
               class="form-input" 
               name="firstname" 
               placeholder="太郎"
               required>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 横並びレイアウト */
.horizontal-layout {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.horizontal-layout .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-layout .form-input {
    flex: 1;
}

/* 苗字・名前分割 */
.name-split {
    display: flex;
    gap: 30px;
}

.name-split .form-group {
    flex: 1;
    margin-bottom: 0;
}

.name-split .horizontal-layout .form-label {
    min-width: 50px;
}

苗字・名前分割＋縦並び

姓名分割と縦並びレイアウトを組み合わせたパターン

ソースコード
<div class="name-split-vertical">
    <div class="form-group">
        <label class="form-label">
            苗字
            <span class="required-text">必須</span>
        </label>
        <input type="text" 
               class="form-input" 
               name="lastname" 
               placeholder="山田"
               required>
    </div>

    <div class="form-group">
        <label class="form-label">
            名前
            <span class="required-text">必須</span>
        </label>
        <input type="text" 
               class="form-input" 
               name="firstname" 
               placeholder="太郎"
               required>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 苗字・名前分割（縦並び） */
.name-split-vertical {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.name-split-vertical .form-group {
    flex: 1;
    margin-bottom: 0;
}

ラジオボタン

通常パターン

ラベルを上に配置し、その下にラジオボタンを縦並びで配置するパターン

ソースコード
<div class="form-group">
    <label class="form-label">ご希望の連絡方法</label>
    <div class="radio-group">
        <div class="radio-item">
            <input type="radio" name="contact_method" id="email" value="email" checked>
            <label for="email">メール</label>
        </div>
        <div class="radio-item">
            <input type="radio" name="contact_method" id="phone" value="phone">
            <label for="phone">お電話</label>
        </div>
        <div class="radio-item">
            <input type="radio" name="contact_method" id="both" value="both">
            <label for="both">どちらでも可</label>
        </div>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* ラジオボタン */
.radio-group {
    margin-bottom: 15px;
}

.radio-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.radio-item input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.radio-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

横並び＋ラジオ要素が縦並び

ラベルとラジオボタン全体を横に並べ、各ラジオボタンは縦に配置するパターン

ソースコード
<div class="form-group horizontal-options">
    <label class="form-label">ご希望の連絡方法</label>
    <div class="radio-group vertical-options">
        <div class="radio-item">
            <input type="radio" name="contact_method" id="email" value="email" checked>
            <label for="email">メール</label>
        </div>
        <div class="radio-item">
            <input type="radio" name="contact_method" id="phone" value="phone">
            <label for="phone">お電話</label>
        </div>
        <div class="radio-item">
            <input type="radio" name="contact_method" id="both" value="both">
            <label for="both">どちらでも可</label>
        </div>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* ラジオボタン */
.radio-group {
    margin-bottom: 15px;
}

.radio-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.radio-item input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.radio-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

/* 横並びレイアウト */
.horizontal-options {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.horizontal-options .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-options .radio-group {
    flex: 1;
    margin-bottom: 0;
}

.vertical-options .radio-item {
    display: block;
    margin-bottom: 8px;
}

縦並び＋ラジオ要素が横並び

ラベルを上に配置し、その下にラジオボタンを横並びで配置するパターン

ソースコード
<div class="form-group">
    <label class="form-label">ご希望の連絡方法</label>
    <div class="radio-group horizontal-items">
        <div class="radio-item">
            <input type="radio" name="contact_method" id="email" value="email" checked>
            <label for="email">メール</label>
        </div>
        <div class="radio-item">
            <input type="radio" name="contact_method" id="phone" value="phone">
            <label for="phone">お電話</label>
        </div>
        <div class="radio-item">
            <input type="radio" name="contact_method" id="both" value="both">
            <label for="both">どちらでも可</label>
        </div>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* ラジオボタン */
.radio-group {
    margin-bottom: 15px;
}

.radio-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.radio-item input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.radio-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

/* 横並びアイテム */
.horizontal-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.horizontal-items .radio-item {
    margin-bottom: 0;
    margin-right: 20px;
}

横並び＋ラジオ要素が横並び

ラベルとラジオボタン全体を横に並べ、ラジオボタン自体も横並びにするパターン

ソースコード
<div class="form-group horizontal-options">
    <label class="form-label">ご希望の連絡方法</label>
    <div class="radio-group horizontal-items">
        <div class="radio-item">
            <input type="radio" name="contact_method" id="email" value="email" checked>
            <label for="email">メール</label>
        </div>
        <div class="radio-item">
            <input type="radio" name="contact_method" id="phone" value="phone">
            <label for="phone">お電話</label>
        </div>
        <div class="radio-item">
            <input type="radio" name="contact_method" id="both" value="both">
            <label for="both">どちらでも可</label>
        </div>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* ラジオボタン */
.radio-group {
    margin-bottom: 15px;
}

.radio-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.radio-item input[type="radio"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.radio-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

/* 横並びレイアウト */
.horizontal-options {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.horizontal-options .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-options .radio-group {
    flex: 1;
    margin-bottom: 0;
}

/* 横並びアイテム */
.horizontal-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.horizontal-items .radio-item {
    margin-bottom: 0;
    margin-right: 20px;
}

チェックボックス

通常パターン

ラベルを上に配置し、その下にチェックボックスを縦並びで配置するパターン

ソースコード
<div class="form-group">
    <label class="form-label">追加サービス</label>
    <div class="checkbox-group">
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="newsletter" value="newsletter">
            <label for="newsletter">ニュースレター配信を希望する</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="updates" value="updates">
            <label for="updates">製品アップデート情報を受け取る</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="events" value="events">
            <label for="events">イベント・セミナー情報を受け取る</label>
        </div>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* チェックボックス */
.checkbox-group {
    margin-bottom: 15px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.checkbox-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

縦並び＋チェックボックスが横並び

ラベルを上に配置し、その下にチェックボックスを横並びで配置するパターン

ソースコード
<div class="form-group">
    <label class="form-label">追加サービス</label>
    <div class="checkbox-group horizontal-items">
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="newsletter" value="newsletter">
            <label for="newsletter">ニュースレター配信を希望する</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="updates" value="updates">
            <label for="updates">製品アップデート情報を受け取る</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="events" value="events">
            <label for="events">イベント・セミナー情報を受け取る</label>
        </div>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* チェックボックス */
.checkbox-group {
    margin-bottom: 15px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.checkbox-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

/* 横並びアイテム */
.horizontal-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.horizontal-items .checkbox-item {
    margin-bottom: 0;
    margin-right: 20px;
}

横並び＋チェックボックスが縦並び

ラベルとチェックボックス全体を横に並べ、各チェックボックスは縦に配置するパターン

ソースコード
<div class="form-group horizontal-options">
    <label class="form-label">追加サービス</label>
    <div class="checkbox-group vertical-options">
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="newsletter" value="newsletter">
            <label for="newsletter">ニュースレター配信を希望する</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="updates" value="updates">
            <label for="updates">製品アップデート情報を受け取る</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="events" value="events">
            <label for="events">イベント・セミナー情報を受け取る</label>
        </div>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* チェックボックス */
.checkbox-group {
    margin-bottom: 15px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.checkbox-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

/* 横並びレイアウト */
.horizontal-options {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.horizontal-options .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-options .checkbox-group {
    flex: 1;
    margin-bottom: 0;
}

.vertical-options .checkbox-item {
    display: block;
    margin-bottom: 8px;
}

横並び＋チェックボックスが横並び

ラベルとチェックボックス全体を横に並べ、チェックボックス自体も横並びにするパターン

ソースコード
<div class="form-group horizontal-options">
    <label class="form-label">追加サービス</label>
    <div class="checkbox-group horizontal-items">
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="newsletter" value="newsletter">
            <label for="newsletter">ニュースレター配信を希望する</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="updates" value="updates">
            <label for="updates">製品アップデート情報を受け取る</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="services[]" id="events" value="events">
            <label for="events">イベント・セミナー情報を受け取る</label>
        </div>
    </div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* チェックボックス */
.checkbox-group {
    margin-bottom: 15px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.checkbox-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

/* 横並びレイアウト */
.horizontal-options {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.horizontal-options .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-options .checkbox-group {
    flex: 1;
    margin-bottom: 0;
}

/* 横並びアイテム */
.horizontal-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.horizontal-items .checkbox-item {
    margin-bottom: 0;
    margin-right: 20px;
}

縦並び＋チェックボックスが縦並び＋必須アイコン

ラベルを上に配置し、その下にチェックボックスを縦並びで配置

最低1つは選択してください
ソースコード
<div class="form-group">
    <label class="form-label">
        必須サービス選択
        <span class="required-text">必須</span>
    </label>
    <div class="checkbox-group">
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service1" value="service1" required>
            <label for="service1">基本サービス</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service2" value="service2" required>
            <label for="service2">プレミアムサービス</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service3" value="service3" required>
            <label for="service3">サポートサービス</label>
        </div>
    </div>
    <div class="help-text">最低1つは選択してください</div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.checkbox-group {
    margin-bottom: 15px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.checkbox-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

.help-text {
    color: #6c757d;
    font-size: 12px;
    margin-top: 5px;
    font-style: italic;
}

縦並び＋チェックボックスが横並び＋必須アイコン

ラベルを上に配置し、その下にチェックボックスを横並びで配置

最低1つは選択してください
ソースコード
<div class="form-group">
    <label class="form-label">
        必須サービス選択
        <span class="required-text">必須</span>
    </label>
    <div class="checkbox-group horizontal-items">
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service1" value="service1" required>
            <label for="service1">基本サービス</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service2" value="service2" required>
            <label for="service2">プレミアムサービス</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service3" value="service3" required>
            <label for="service3">サポートサービス</label>
        </div>
    </div>
    <div class="help-text">最低1つは選択してください</div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.checkbox-group {
    margin-bottom: 15px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.checkbox-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

.help-text {
    color: #6c757d;
    font-size: 12px;
    margin-top: 5px;
    font-style: italic;
}

/* チェックボックス横並び */
.horizontal-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.horizontal-items .checkbox-item {
    margin-bottom: 0;
    margin-right: 20px;
}

横並び+チェックボックスが縦並び＋必須アイコン

最低1つは選択してください
ソースコード
<div class="form-group horizontal-options">
    <label class="form-label">
        必須サービス選択
        <span class="required-text">必須</span>
    </label>
    <div class="checkbox-group vertical-options">
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service1" value="service1" required>
            <label for="service1">基本サービス</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service2" value="service2" required>
            <label for="service2">プレミアムサービス</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service3" value="service3" required>
            <label for="service3">サポートサービス</label>
        </div>
    </div>
    <div class="help-text">最低1つは選択してください</div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.checkbox-group {
    margin-bottom: 15px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.checkbox-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

.help-text {
    color: #6c757d;
    font-size: 12px;
    margin-top: 5px;
    font-style: italic;
}

/* 横並びレイアウト */
.horizontal-options {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.horizontal-options .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-options .checkbox-group {
    flex: 1;
    margin-bottom: 0;
}

/* 縦並びオプション */
.vertical-options .checkbox-item {
    display: block;
    margin-bottom: 8px;
}

.vertical-options input[type="checkbox"] {
    margin-right: 8px;
}

横並び+チェックボックスが横並び＋必須アイコン

ラベルとチェックボックス全体を横に並べ、チェックボックス自体も横並びにする

最低1つは選択してください
ソースコード
<div class="form-group horizontal-options">
    <label class="form-label">
        必須サービス選択
        <span class="required-text">必須</span>
    </label>
    <div class="checkbox-group horizontal-items">
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service1" value="service1" required>
            <label for="service1">基本サービス</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service2" value="service2" required>
            <label for="service2">プレミアムサービス</label>
        </div>
        <div class="checkbox-item">
            <input type="checkbox" name="required_services[]" id="service3" value="service3" required>
            <label for="service3">サポートサービス</label>
        </div>
    </div>
    <div class="help-text">最低1つは選択してください</div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.checkbox-group {
    margin-bottom: 15px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.checkbox-item label {
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
}

.help-text {
    color: #6c757d;
    font-size: 12px;
    margin-top: 5px;
    font-style: italic;
}

/* 横並びレイアウト */
.horizontal-options {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.horizontal-options .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-options .checkbox-group {
    flex: 1;
    margin-bottom: 0;
}

/* チェックボックス横並び */
.horizontal-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.horizontal-items .checkbox-item {
    margin-bottom: 0;
    margin-right: 20px;
}

テキストエリア

通常パターン

ラベルを上に配置し、その下にテキストエリアを配置する基本的なパターン

ソースコード
<div class="form-group">
    <label class="form-label">お問い合わせ内容</label>
    <textarea class="form-textarea" 
              name="message" 
              rows="5" 
              placeholder="お問い合わせ内容を詳しくお書きください"></textarea>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* テキストエリア */
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
    resize: vertical;
    min-height: 100px;
}

.form-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

横並び

ラベルとテキストエリアを横に並べて配置するパターン

ソースコード
<div class="form-group horizontal-layout">
    <label class="form-label">お問い合わせ内容</label>
    <textarea class="form-textarea" 
              name="message" 
              rows="5" 
              placeholder="お問い合わせ内容を詳しくお書きください"></textarea>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

/* テキストエリア */
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
    resize: vertical;
    min-height: 100px;
}

.form-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 横並びレイアウト */
.horizontal-layout {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.horizontal-layout .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-layout .form-textarea {
    flex: 1;
}

縦並び＋必須アイコン

テキストエリアは常にラベルを上に配置し、画面幅いっぱいに表示

500文字以内でご記入ください
ソースコード
<div class="form-group">
    <label class="form-label">
        お問い合わせ内容
        <span class="required-text">必須</span>
    </label>
    <textarea class="textarea" 
              name="message" 
              placeholder="お問い合わせ内容を詳しくお聞かせください。

例：
・具体的なご質問内容
・ご要望の詳細
・お困りの状況
・ご希望の対応方法"
              required></textarea>
    <div class="help-text">500文字以内でご記入ください</div>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: all 0.3s ease;
}

.textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.textarea::placeholder {
    color: #9ca3af;
}

.help-text {
    color: #6c757d;
    font-size: 12px;
    margin-top: 5px;
    font-style: italic;
}

固有パターンの入力フォーム

【郵便番号①】通常パターン

郵便番号の入力形式を制限し、ハイフンなしの7桁数字のみ受け付けるパターン

ソースコード
<div class="form-group postal-code-wrapper">
    <label class="form-label">
        郵便番号
        <span class="required-text">必須</span>
    </label>
    <input type="text" 
           class="form-input" 
           name="postal_code" 
           placeholder="1234567"
           pattern="[0-9]{7}"
           maxlength="7"
           required>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 郵便番号用の横幅制限 */
.postal-code-wrapper .form-input {
    width: 200px;
    max-width: 200px;
    flex-shrink: 0;
}

【郵便番号②】横並び

郵便番号でラベルと入力フィールドを横に並べ、適切な横幅制限を設けたパターン

ソースコード
<div class="form-group horizontal-layout postal-code-wrapper">
    <label class="form-label">
        郵便番号
        <span class="required-text">必須</span>
    </label>
    <input type="text" 
           class="form-input" 
           name="postal_code_horizontal" 
           placeholder="1234567"
           pattern="[0-9]{7}"
           maxlength="7"
           required>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 横並びレイアウト */
.horizontal-layout {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.horizontal-layout .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-layout .form-input {
    flex: 1;
}

/* 郵便番号用の横幅制限 */
.postal-code-wrapper .form-input {
    width: 200px;
    max-width: 200px;
    flex-shrink: 0;
}

【都道府県①】通常パターン

都道府県を選択するプルダウンメニューのパターン

ソースコード
<div class="form-group prefecture-wrapper">
    <label class="form-label">
        都道府県
        <span class="required-text">必須</span>
    </label>
    <select class="form-input" name="prefecture" required>
        <option value="">選択してください</option>
        <option value="tokyo">東京都</option>
        <option value="osaka">大阪府</option>
        <option value="kyoto">京都府</option>
        <option value="hokkaido">北海道</option>
        <option value="okinawa">沖縄県</option>
    </select>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input,
select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus,
select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 都道府県用の横幅制限 */
.prefecture-wrapper .form-input,
.prefecture-wrapper select {
    width: 200px;
    max-width: 200px;
    flex-shrink: 0;
}

【都道府県②】横並び

都道府県でラベルとプルダウンメニューを横に並べ、適切な横幅制限を設けたパターン

ソースコード
<div class="form-group horizontal-layout prefecture-wrapper">
    <label class="form-label">
        都道府県
        <span class="required-text">必須</span>
    </label>
    <select class="form-input" name="prefecture_horizontal" required>
        <option value="">選択してください</option>
        <option value="tokyo">東京都</option>
        <option value="osaka">大阪府</option>
        <option value="kyoto">京都府</option>
        <option value="hokkaido">北海道</option>
        <option value="okinawa">沖縄県</option>
    </select>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input,
select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus,
select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 横並びレイアウト */
.horizontal-layout {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.horizontal-layout .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-layout .form-input,
.horizontal-layout select {
    flex: 1;
}

/* 都道府県用の横幅制限 */
.prefecture-wrapper .form-input,
.prefecture-wrapper select {
    width: 200px;
    max-width: 200px;
    flex-shrink: 0;
}

【メールアドレス①】通常パターン

メールアドレスの形式を制限するパターン

ソースコード
<div class="form-group">
    <label class="form-label">
        メールアドレス
        <span class="required-text">必須</span>
    </label>
    <input type="email" 
           class="form-input" 
           name="email" 
           placeholder="example@example.com"
           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
           required>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

【メールアドレス②】横並び

ラベルとメールアドレス入力フィールドを横に並べて配置

ソースコード
<div class="form-group horizontal-layout">
    <label class="form-label">
        メールアドレス
        <span class="required-text">必須</span>
    </label>
    <input type="email" 
           class="form-input" 
           name="email_horizontal" 
           placeholder="example@domain.com"
           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
           required>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 横並びレイアウト */
.horizontal-layout {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.horizontal-layout .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-layout .form-input {
    flex: 1;
}

【電話番号①】通常パターン

電話番号の形式を制限するパターン

ソースコード
<div class="form-group phone-wrapper">
    <label class="form-label">
        電話番号
        <span class="required-text">必須</span>
    </label>
    <input type="tel" 
           class="form-input" 
           name="phone" 
           placeholder="09012345678"
           pattern="[0-9]{10,11}"
           maxlength="11"
           required>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 電話番号用の横幅制限 */
.phone-wrapper .form-input {
    width: 180px;
    max-width: 180px;
    flex-shrink: 0;
}

【電話番号②】横並び

電話番号でラベルと入力フィールドを横に並べ、適切な横幅制限を設けたパターン

ソースコード
<div class="form-group horizontal-layout phone-wrapper">
    <label class="form-label">
        電話番号
        <span class="required-text">必須</span>
    </label>
    <input type="tel" 
           class="form-input" 
           name="phone_horizontal" 
           placeholder="09012345678"
           pattern="[0-9]{10,11}"
           maxlength="11"
           required>
</div>
/* 共通スタイル */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2c3e50;
}

.required-text {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
    background: #e74c3c;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #c53030;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

/* 横並びレイアウト */
.horizontal-layout {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.horizontal-layout .form-label {
    min-width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.horizontal-layout .form-input {
    flex: 1;
}

/* 電話番号用の横幅制限 */
.phone-wrapper .form-input {
    width: 180px;
    max-width: 180px;
    flex-shrink: 0;
}

まとめ

この記事では、Webサイトのフォーム作成で頻出する様々なレイアウトパターンを紹介しました。

ケケンタ

電話番号や都道府県などの固有のフォームのサンプルコードも掲載していますので、ぜひご活用いただけるとうれしいです！

おすすめの記事

あわせて読みたい
【Web制作】フォーム・入力アニメーション完全ガイド｜4カテゴリ・22種類を網羅 Webサイトのフォームを魅力的で使いやすくするフォーム・入力アニメーションを4カテゴリ・22種類完全網羅！ 各カテゴリから厳選した代表的なアニメーションをCodePenデ…
]]> https://kekenta-it-blog.com/form-patterns-complete-guide/feed/ 0