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

10 лучших проектов для начинающих по отработке навыков HTML и 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>

Выход:

Читайте также:  5 лучших практик для проверки кода

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

Группы форм 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>

Выход:

Читайте также:  Лучшие плагины Markdown для WordPress

ющем примере демонстрируются групп

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

Оцените статью
bestprogrammer.ru
Добавить комментарий