Учебники

Pure.CSS — Формы

Январь 5, 2019

Pure.CSS имеет очень красивый и отзывчивый CSS для дизайна форм. Используются следующие CSS —

Sr.No. Имя класса и описание
1

чисто-формы

Представляет компактную встроенную форму.

2

чисто-формы стеками

Представляет сложенную форму с элементами ввода под метками. Для использования в чистом виде.

3

чисто-форма выровнены

Представляет выровненную форму с элементами ввода под метками. Для использования в чистом виде.

4

чистый ввод-закругленный

Отображает элемент управления формы с закругленными углами

5

чисто кнопки

Украшает пуговицу.

6

чисто-флажок

Украшает флажок.

7

чисто-радио

Украшает радио.

чисто-формы

Представляет компактную встроенную форму.

чисто-формы стеками

Представляет сложенную форму с элементами ввода под метками. Для использования в чистом виде.

чисто-форма выровнены

Представляет выровненную форму с элементами ввода под метками. Для использования в чистом виде.

чистый ввод-закругленный

Отображает элемент управления формы с закругленными углами

чисто кнопки

Украшает пуговицу.

чисто-флажок

Украшает флажок.

чисто-радио

Украшает радио.

пример

purecss_forms.htm

Live Demo

<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/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" 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 = "married" class = "pure-checkbox">
                  <input id = "married" type = "checkbox" checked = "checked">
                  Married
               </label>
               <br>
			   
               <label  for = "single" class = "pure-checkbox">
                  <input id = "single" type = "checkbox">
                  Single
               </label>
               <br>
			   
               <label for = "dontknow" class = "pure-checkbox">
                  <input id = "dontknow" type = "checkbox" disabled>
                  Don't know (Disabled)
               </label>               
               <br>
               <br>
            </div>
			
            <div class = "pure-controls">
               <label for = "male" class = "pure-radio">
                  <input id = "male" type = "radio" name = "gender" value = "male" checked>
                  Male
               </label>
               <br>
			   
               <label for = "female" class= "pure-radio">
                  <input id = "female" type = "radio" name = "gender" value = "female">
                  Female
               </label>
               <br>
			   
               <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>

Результат

Проверьте результат.

39
Share: