HTML で複数のフォームのテキストボックスを揃える方法

フォームのコードは図の通りです。スタイルシートがまだ追加されていないため、フォームが整列されておらず、見栄えが悪いです。ただし、HTML にはフォームの整列のためのタグや機能は用意されていません。

HTML ソースコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>マッサージボード</title>
</head>
<本文>
    <フォームアクション="board.php">
        <フィールドセット>
        <p>
            <label for="title">タイトル:</label>
            <input type="text" id="title" name="title" align="left">
        </p>
        <p>
            <label for="username">ユーザー名:</label>
            <input type="text" id="ユーザー名" name="ユーザー名" align="left">
        </p>
        <p>
            <label for="messageContent">メッセージの内容:</label>
            <textarea id="メッセージコンテンツ" name="メッセージコンテンツ" cols="40" rows="5" align="left"></textarea>
        </p>
        <p>
            <入力タイプ="送信">
        </p>
        </フィールドセット>
    </フォーム>
</本文>
</html>

フォーム表示効果画像:

フォームを揃えるには、次の CSS コードを HTML に追加すると、フォームが揃えられます。

<スタイル>
        フィールドセット{
            背景色: #f1f1f1;
            境界線: なし;
            境界線の半径: 2px;
            下部マージン: 12px;
            オーバーフロー: 非表示;
            パディング: 0.625em;
        }

        ラベル{
            カーソル: ポインタ;
            表示: インラインブロック;
            パディング: 3px 6px;
            テキスト配置: 右;
            幅: 150ピクセル;
            垂直方向の位置合わせ: 上;
        }

        入力{
            フォントサイズ: 継承;
        }
    </スタイル>

スタイルシート追加後のフォーム表示効果

フォームの配置を実現するための CSS コードスニペットは次のとおりです。

        ラベル{
            カーソル: ポインタ;
            表示: インラインブロック;
            パディング: 3px 6px;
            テキスト配置: 右;
            幅: 150ピクセル;
            垂直方向の位置合わせ: 上;
        }

各フォームの親要素は<p>タグ、 <label>タグはフォームの説明、つまりテキストボックスの左側のテキスト、 <input>タグはテキストボックスであると仮定します。ラベルを揃えるには、ラベルタグの幅を特定の値、この例では 150px に設定するだけです。ラベルタグと入力タグは同じ p タグに属しているため、左から右に表示されます。ラベルタグの長さを指定することにより、フォームのテキストボックスを揃えることができます。

これで、HTML の複数のフォームでテキストボックスを揃える方法についての記事は終了です。HTML の複数のフォームでテキストボックスを揃える方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Vue プロジェクトでの支払い機能の実装 (WeChat 支払いと Alipay 支払い)

>>: ベスト HTML/CSS デザインおよび開発フレームワーク 15 選を紹介します