Поля ввода формы Pure CSS - httpdoc.ru

Поля ввода формы Pure CSS

В этом уроке мы узнаем о различных методах и классах стилизации элементов ввода формы. Форма HTML содержит элементы формы, такие как текстовые поля, флажки, переключатели, кнопки отправки и т. Д. Мы будем использовать чистый CSS в этих входных данных и проследим за результатом.

Стилизация входных данных формы:

Сгруппированные входы Purecss

Вы можете разделить входные данные формы на разные группы. Внешний вид создаст ощущение группы, как будто входные элементы одной и той же группы будут отделены от других элементов группы. Как и в примере ниже, есть группа текстовых элементов ввода, а другая - с остальными элементами.
Чтобы создать группу, оберните элементы ввода в <fieldset> элемент с pure-group классом. Вы можете увидеть пример ниже, чтобы точно знать, как использовать эти классы и теги.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Grouped Input </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 class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="Username">
        <input type="text" class="pure-input-1-2" placeholder="Password">
        <input type="email" class="pure-input-1-2" placeholder="Email">
    </fieldset>

    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="A title">
        <textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
    </fieldset>

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

Выход

Pure.CSS Grouped Input

Размер входа Pure.CSS

Размер входных элементов также можно изменить с помощью чистого CSS. Его ширину можно настроить с помощью класса pure-input-* , где * вместо дроби. Это похоже на установку ширины сеток. Откройте редактор, чтобы самостоятельно внести некоторые изменения в пример и наблюдать за результатами.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Input Sizing </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>
<body>
<form class="pure-form">
    <input class="pure-input-1" type="text" placeholder=".pure-input-1"><br><br>
    <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br><br>
    <input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br><br>
    <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br><br>
    <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br><br>
 </form>
</body>
</html>

Выход

Pure.CSS Input Sizing









Pure.CSS входы только для чтения

Элемент только для чтения - это тот, который немного похож на отключенный элемент, но по-прежнему доступен для фокусировки. Очевидно, вы не можете ничего изменить или написать в этом элементе ввода.
Чтобы сделать ввод доступным только для чтения, вы должны использовать read-only атрибут с элементом ввода. Таким же образом вы можете отключить элемент ввода с помощью disabled атрибута. Попытайся.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Read Only </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>
<body>
<form class="pure-form">
    <input type="text" value="Readonly input here..." readonly>
</form>
</body>
</html>

Выход

Pure.CSS Read Only

Закругленные входы Pure.CSS

Закругленные углы придают превосходное ощущение формы. Вы можете сделать углы входного элемента скругленными, используя в нем pure-input-rounded класс.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Rounded Inputs </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>
<body>
<form class="pure-form">
    <input type="text" class="pure-input-rounded">
    <button type="submit" class="pure-button">Search</button>
</form>
</body>
</html>

Выход

Pure.CSS Rounded Inputs

Флажки и радио в Pure.CSS

Флажки и радиокнопки, очень важная часть формы также должна быть немного стилизована, и угадайте, какие варианты для этого предлагает Pure. Используйте классы pure-checkboxe и pure-radio соответствующие элементы ввода. Если вам все еще непонятно, посмотрите на пример, посмотрите, как используются эти классы, и посмотрите на результаты.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Checkboxes and Radios </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>
<body>
<form class="pure-form">
    <label for="option-one" class="pure-checkbox">
        <input id="option-one" type="checkbox" value="">
        Here's option one.
    </label>

    <label for="option-two" class="pure-radio">
        <input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
        Here's a radio button. You can choose this one..
    </label>

    <label for="option-three" class="pure-radio">
        <input id="option-three" type="radio" name="optionsRadios" value="option2">
        ..Or this one!
    </label>
</form>
</body>
</html>

Выход

Pure.CSS Checkboxes and Radios

Форма Pure.CSS

Вот базовая форма с разными элементами ввода. Посмотри на это.

Пример
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Pure.CSS Form </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>
<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" required>
     </div>
     <div class = "pure-control-group"> 
       <label for = "email">Email</label>
        <input id = "email" type = "text" placeholder = "Email Address" required>       
     </div>
     <div class = "pure-control-group">   
       <label for = "comments">Comments</label>
       <input id = "comments" type="text" placeholder = "Comments">       
     </div>
     <div class = "pure-controls">
       <label  for = "Free" class = "pure-checkbox">
       <input id = "Free" type = "checkbox" checked = "checked">
       Free
       </label>
                
      <label  for = "Paid" class = "pure-checkbox">
      <input id = "Paid" type = "checkbox">
      Paid
      </label>
                
      <label for = "dontknow" class = "pure-checkbox">
      <input id = "dontknow" type = "checkbox" disabled>
      Don't know (Disabled)
      </label>               
                
                
     </div>
     <div class = "pure-controls">
      <label for = "male" class = "pure-radio">
      <input id = "male" type = "radio" name = "gender" value = "male" checked>
      Male
      </label>
                
      <label for = "female" class= "pure-radio">
      <input id = "female" type = "radio" name = "gender" value = "female">
      Female
      </label>
                
      <label for = "dontknow1" class = "pure-radio">
      <input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
      Don't know (Disabled)
      </label>
       <button type = "submit" class = "pure-button pure-button-primary">Submit</button>
     </div>
  </fieldset>
</form>
</body>
</html>

Выход

Pure.CSS Form