Группы форм Prime CSS

Группы форм Primer CSS используются для создания групп форм с использованием заголовка и тела формы. Мы можем создать группу форм, используя класс form-group. В этой статье мы обсудим группы форм Primer CSS.

Классы групп форм Primer CSS:

form-group:этот класс используется для создания группы форм с некоторыми элементами.
form-group-header:этот класс используется для создания заголовка группы форм.
form-group-body:этот класс используется для создания тела группы форм.

Синтаксис:

<form>
  <div class="form-group">
    <div class="form-group-header">
       ....
    </div>
    <div class="form-group-body">
       ....
    </div>
  </div>
</form>

Пример 1: В следующем примере демонстрируются группы форм Primer CSS.

HTML

<!DOCTYPE html>

<html>

<head>

    <title> Primer CSS Form Groups </title>

    <link rel="stylesheet" href=

"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />

</head>

<body>

    <div class="text-center">

        <h1 class="color-fg-success"> GeeksforGeeks </h1>

        <h3> Primer CSS Form Groups </h3>



        <form>

            <div class="form-group">

                <div class="form-group-header">

                    <label for="firstname"> First Name </label>

                </div>

                <div class="form-group-body">

                    <input class="form-control" type="text"

                        placeholder="First Name" id="firstname" />

                </div>

            </div>

            <div class="form-group">

                <div class="form-group-header">

                    <label for="lastname"> Last Name </label>

                </div>

                <div class="form-group-body">

                    <input class="form-control" type="text"

                        placeholder="Last Name" id="lastname" />

                </div>

            </div>

            <div class="form-group">

                <div class="form-group-header">

                    <label class="c-label" for="gender">

                        Gender:

                    </label>

                </div>

                <div class="form-group-body">

                    <input id="gender" type="radio" name="gen" >

                        Male

                    <input id="gender" type="radio" name="gen" >

                        Female

                </div>

            </div>

        </form>

    </div>

</body>

</html>

Выход:

Группы форм Prime CSS

Пример 2. В следующем примере демонстрируются группы форм Primer CSS.

HTML

<!DOCTYPE html>

<html>

<head>

    <title> Primer CSS Form Groups </title>

    <link rel="stylesheet" href=

"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />

</head>

<body>

    <div class="text-center">

        <h1 class="color-fg-success"> GeeksforGeeks </h1>

        <h3> Primer CSS Form Groups </h3>



        <form>

            <div class="form-group">

                <div class="form-group-header">

                    <label for="address"> Address: </label>

                </div>

                <div class="form-group-body ml-6 mr-6">

                    <textarea class="form-control"

                        id="address"></textarea>

                </div>

            </div>

            <div class="form-group">

                <div class="form-group-header">

                    <label for="firstname"> Choices: </label>

                </div>

                <div class="form-group-body">

                    <label class="c-field c-field--choice">

                        <input type="checkbox" name="opt">

                        GFG 1

                    </label>



                    <label class="c-field c-field--choice">

                        <input type="checkbox" name="opt">

                        GFG 2

                    </label>



                    <label class="c-field c-field--choice">

                        <input type="checkbox" name="opt">

                        GFG 3

                    </label>

                </div>

            </div>

            <div class="form-group">

                <div class="form-group-header">

                    <label for="drop"> Choose any: </label>

                </div>

                <div class="form-group-body">

                    <select class="form-select" id="drop">

                        <option> Choose any </option>

                        <option> C++ </option>

                        <option> Java </option>

                        <option> Python </option>

                    </select>

                </div>

            </div>

        </form>

    </div>

</body>

</html>

Выход:

Группы форм Prime CSS