个性化阅读
专注于IT技术分析

Pure.CSS表单实现示例

Pure.CSS为表单设计提供了非常漂亮且响应迅速的CSS。你必须在<form>元素中添加类名称” pure-form”以创建表单。

以下是可用于使用Pure创建表单的CSS类列表。

Index Class Name Description
1) pure-form 它用于指定紧凑的嵌入式表单。
2) pure-form-stacked 它用于表示标签下方具有输入元素的堆叠形式。它与纯格式一起使用。
3) pure-form-aligned 它用于表示带有对齐方式的表单, 其中输入元素位于标签下方。与纯格式一起使用。
4) pure-input-rounded 用于显示带有圆角的表单控件
5) pure-button 用于美化按钮。
6) pure-checkbox 它用于美化复选框。
7) pure-radio 它用于美化收音机。

例子

让我们举一个使用上述所有类创建表单的示例。

<html>
   <head>
<title>The PURE.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
crossorigin="anonymous">
      
</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>

立即测试

输出

PureCSS表单1

Pure.CSS表单的类型

以下是不同类型的Pure.CSS形式:

  • 预设表格
  • 堆叠形式
  • 对齐形式
  • 多栏式
  • 分组输入
  • 输入尺寸表
赞(0) 打赏
未经允许不得转载:srcmini » Pure.CSS表单实现示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏