Формы на Pure CSS - httpdoc.ru

Формы Pure.CSS

Форма - это совокупность ярлыков и элементов ввода, которые позволяют веб-сайту получать информацию от пользователей для различных операций, например, для целей регистрации. Эти формы должны выглядеть привлекательно и для этого должны быть правильно спроектированы. Чистый CSS - это простой и эффективный способ сделать эти формы привлекательными, красивыми и отзывчивыми. Вам просто нужно добавить класс pure-form в <form> тег, и вы сразу получите разработанную форму. Наряду с pure-form классом есть и другие классы, смотрите ниже в таблице -


Имя класса Описание
pure-form Он отображает встроенную форму по умолчанию.
pure-form-stacked Он отображает сложенную форму с элементами ввода, расположенными под метками.
pure-form-aligned Он отображает выровненную форму с элементами ввода под метками.
pure-input-rounded Он отображает элемент ввода формы с закругленными углами.
pure-checkbox Это украшает чекбокс.
pure-radio Украшает радио.

Типы чистых CSS-форм:

Форма Purecss по умолчанию

Это форма по умолчанию, которая создает встроенную форму. Вам нужно добавить pure-form к <form> элементу основной класс . Посмотрите на вывод ниже.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Default Forms </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
<body>
  <style>
    form{
     margin: 20px;
     }
  </style>
<form class="pure-form">
    <fieldset>
        <legend>A compact inline form</legend>
        <input type="email" placeholder="Email">

        <input type="password" placeholder="Password">
        <label for="remember">
        
        <input id="remember" type="checkbox"> Remember me
        </label>
        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>
</body>
</html>

Выход

Pure.CSS Default Forms
Компактная встроенная форма

Сложенная форма Pure.CSS

Сложенная форма - это форма, в которой элементы ввода перечислены под метками. Чтобы создать составную форму в Pure, вам нужно добавить pure-form-stacked класс к <form> элементу. Не забудьте добавить этот класс вместе с pure-form классом. Посмотрите на вывод ниже, чтобы увидеть сложенную форму.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Stacked Forms </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
<body>
  <style>
    form{
     margin: 20px;
     }
  </style>
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>A Stacked Form</legend>

        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Email">
        <span class="pure-form-message">This is a required field.</span>

        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Password">

        <label for="state">State</label>
        <select id="state">
            <option>AL</option>
            <option>CA</option>
            <option>IL</option>
        </select>

        <label for="remember" class="pure-checkbox">
            <input id="remember" type="checkbox"> Remember me
        </label>

        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>
</body>
</html>

Выход

Pure.CSS Stacked Forms
Сложенная форма Это обязательное поле.

Согласованная форма Pure.CSS

Выровненная форма - это форма, в которой метки выровнены по правому краю относительно входных элементов. Чтобы создать этот тип формы, вы должны использовать pure-form-aligned класс вместе с pure-form классом. В этой форме есть отзывчивость, которая на небольших экранах возвращается в сложенную форму.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Aligned Forms </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
<body>
<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input id="name" type="text" placeholder="Username">
            <span class="pure-form-message-inline">This is a required field.</span>
        </div>

        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>

        <div class="pure-control-group">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Email Address">
        </div>

        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>

        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I've read the terms and conditions
            </label>

            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>
</body>
</html>

Выход

Pure.CSS Aligned Forms
Это обязательное поле.

Многоколоночная форма Pure.CSS (с чистыми сетками)

Форма с несколькими столбцами - это форма, в которой форма отображается в разных столбцах, а не в одном. Чтобы создать формы с несколькими столбцами, вам необходимо разделить элементы формы в сетках для разных экранов. Вы можете взглянуть на этот пример, чтобы полностью понять его и заметить использование в нем классов сетки. Просто не забудьте указать путь CDN для адаптивных сеток, если вы хотите, чтобы адаптивные сетки работали.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Multi-Colum Forms </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
  </head>
<body>
  <style>
    form{
     margin: 20px;
     }
  </style>
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Legend</legend>

        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="first-name">First Name</label>
                <input id="first-name" class="pure-u-23-24" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="last-name">Last Name</label>
                <input id="last-name" class="pure-u-23-24" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="email">E-Mail</label>
                <input id="email" class="pure-u-23-24" type="email" required>
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="city">City</label>
                <input id="city" class="pure-u-23-24" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="state">State</label>
                <select id="state" class="pure-input-1-2">
                    <option>AL</option>
                    <option>CA</option>
                    <option>IL</option>
                </select>
            </div>
        </div>

        <label for="terms" class="pure-checkbox">
            <input id="terms" type="checkbox"> I've read the terms and conditions
        </label>

        <button type="submit" class="pure-button pure-button-primary">Submit</button>
    </fieldset>
</form>
</body>
</html>

Выход

Pure.CSS Multi-Colum Forms
Легенда

В следующих уроках мы поговорим о стилизации элементов ввода формы. Щелкните следующую кнопку.