この記事にはプロモーションが含まれています。

【コピペOK】入力フォーム・ラジオボタン・セレクタなどのレイアウト紹介【Web制作】

2025-08-13

ケケンタ

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

ケケンタ

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

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

紹介するフォーム要素

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

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

ケケンタ

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

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/13 08:45:33時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/13 05:22:48時点 Amazon調べ-詳細)

基本フォームセクション

まずは簡単に、基本的なフォーム要素を含むサンプルフォームをご紹介します。こちらは、実際の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;
}