Pure.CSS имеет очень красивый и отзывчивый CSS для дизайна форм. Используются следующие CSS —
Sr.No. | Имя класса и описание |
---|---|
1 |
чисто-формы Представляет компактную встроенную форму. |
2 |
чисто-формы стеками Представляет сложенную форму с элементами ввода под метками. Для использования в чистом виде. |
3 |
чисто-форма выровнены Представляет выровненную форму с элементами ввода под метками. Для использования в чистом виде. |
4 |
чистый ввод-закругленный Отображает элемент управления формы с закругленными углами |
5 |
чисто кнопки Украшает пуговицу. |
6 |
чисто-флажок Украшает флажок. |
7 |
чисто-радио Украшает радио. |
чисто-формы
Представляет компактную встроенную форму.
чисто-формы стеками
Представляет сложенную форму с элементами ввода под метками. Для использования в чистом виде.
чисто-форма выровнены
Представляет выровненную форму с элементами ввода под метками. Для использования в чистом виде.
чистый ввод-закругленный
Отображает элемент управления формы с закругленными углами
чисто кнопки
Украшает пуговицу.
чисто-флажок
Украшает флажок.
чисто-радио
Украшает радио.
пример
purecss_forms.htm
<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>
Результат
Проверьте результат.