文档章节

CSS3 表单验证

m
 musishui
发布于 2016/06/22 17:00
字数 362
阅读 9
收藏 0

今天从网上看到一篇介绍CSS表单验证的文章,感觉很有意思,摘抄下来,学习学习。

// html 代码
<form action="#0">

  <div>
    <input type="text" id="first_name" name="first_name" required placeholder=" " />
    <label for="first_name">First Name</label>
  </div>
  
  <div>
    <input type="text" id="last_name" name="last_name" required placeholder=" " />
    <label for="last_name">Last Name</label>
  </div>
  
  <div>
    <input type="email" id="email" name="email" required placeholder=" " />
    <label for="email">Email Address</label>
    <div class="requirements">
      Must be a valid email address.
    </div>
  </div>
  
  <div>
    <input type="password" id="password" name="password" required placeholder=" " pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" />
    <label for="password">Password</label>
    <div class="requirements">
      Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.
    </div>
  </div>
  
  <input type="submit" value="Sign Up" />

</form>
// scass 代码
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

form {
  max-width: 450px;
  margin: 0 auto;
  
  // positioning context
  > div {
    position: relative;
    background: white;
    border-bottom: 1px solid #ccc;
    
    // Looks like placeholder
    > label {
      opacity: 0.3;
      font-weight: bold;
      position: absolute;
      top: 22px;
      left: 20px;
    }
    
    > input[type="text"],
    > input[type="email"],
    > input[type="password"] {
      width: 100%;
      border: 0;
      padding: 20px 20px 20px 50px;
      background: #eee;
      
      &:focus {
        
        // removing default focus style
        outline: 0;
        // adding new one
        background: white;
        
        & + label {
          opacity: 0;
        }
      }
      
      &:valid {
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/check.svg);
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 20px 20px;
        & + label {
          opacity: 0;
        }
      }
      
      &:invalid:not(:focus):not(:placeholder-shown) {
        background: pink;
        & + label {
          opacity: 0;
        }
      }
      
      &:invalid:focus:not(:placeholder-shown) {
        & ~ .requirements {
          max-height: 200px;
          padding: 0 30px 20px 50px;
        }
      }
      
    }
    
    .requirements {
      padding: 0 30px 0 50px;
      color: #999;
      max-height: 0;
      transition: 0.28s;
      overflow: hidden;
      color: red;
      font-style: italic;
    }
    
  }
  
  input[type="submit"] {
    display: block;
    width: 100%;
    margin: 20px 0;
    background: #41D873;
    color: white;
    border: 0;
    padding: 20px;
    font-size: 1.2rem;
  }
  
}

body {
  background: #333;
  font-family: 'PT Sans', sans-serif;
  padding: 20px;
}
* {
  box-sizing: border-box;
}

本文转载自:http://codepen.io/chriscoyier/pen/JXgKjb

共有 人打赏支持
m
粉丝 1
博文 18
码字总数 13887
作品 0
朝阳
私信 提问
10 款简单精美的 jQuery 和 CSS3 表单

表单在网页中扮演着十分重要的作用,从用户登录注册到留言评论,都离不开表单。一个设计精美方便的表单,可以提高用户交互的质量。下面给大家介绍10款设计简单但是外观精美的jQuery和CSS3表单...

android哥哥
2012/08/06
8.9K
10
21 个新鲜的 CSS 3 教程与技巧

CSS3 已经变得很流行。大部分的浏览器比如IE7、IE8、Safari、Firefox和Chrome,都支持新的CSS3属性。CSS3有非常多的web和移动方面的功能。 本文列出21个新鲜的CSS3教程和技巧,供大家学习、交...

老枪
2011/05/25
3.8K
5
10 个新颖而且流行的 jQuery 插件

这 10 个插件主要解决了文本效果、本地化、表单处理、地图处理等等,平时不太常见,但效果不错。 1. Lingua Localization 该插件可让你快速的切网站的不同语言,在线演示: here 2. eComboBo...

红薯
2011/05/24
3K
10
实战jQuery和PHP CodeIgniter表单验证

前言   在Web建站中,表单的合法性验证是十分重要的一个环节,其中包括客户端浏览器的Javascript的验证和服务端的验证。在本文中将指导读者使用jQuery中的validate验证框架实现浏览器端的验...

彼得
2014/03/08
0
0
22 非常有用 HTML5 + CSS3 表单教程

使用 HTML5 和 CSS3 你可以创建各种创新的 Web 表单,在接下来的内容中我们将为你推荐 22 个这样的教程。 登录表单 HTML5 & CSS3 联系表单 构建一个简单的联系表单 样式漂亮的联系表单 用户注...

小编辑
2011/10/24
6.4K
3

没有更多内容

加载失败,请刷新页面

加载更多

day178-2018-12-15-英语流利阅读-待学习

“真蛛奶茶”了解一下?蜘蛛也会产奶了 Lala 2018-12-15 1.今日导读 “蛋白质含量是牛奶的 4 倍,并有着更低的脂肪和含糖量”,听起来诱人又美味的并不是羊奶或豆奶,而是你可能打死都想不到...

飞鱼说编程
16分钟前
3
0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents

场景重现 npm install --verbose 安装依赖的时,出现如下警告 强迫症患者表示不能接受 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):npm WARN......

taadis
21分钟前
1
0
MySQL自增id超大问题查询

引言 小A正在balabala写代码呢,DBA小B突然发来了一条消息,“快看看你的用户特定信息表T,里面的主键,也就是自增id,都到16亿了,这才多久,在这样下去过不了多久主键就要超出范围了,插入...

dragon_tech
33分钟前
3
0
OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
279
6
Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部