HTML5 原质化设计表单简单实例学习

我们结合实例来感受和学习Material Design设计规范。

本例包含的原质化设计元素有如下几个：

1. 文本输入框

用户未输入时，文本输入框的位置显示为Label（而不是通常的空白输入框+左侧Label），

用户点击Label后，Label文本渐变缩小到左上角，文本输入处的下划线高亮显示。

输入为空时，出现带箭头的提示框（几秒后自动消失），这是通过require属性实现的。

2.单选框、复选框

点击选择框时，有一个圆点（或方块）扩散填充的渐变动效，这样显得选择过程比较柔和。

3.滑动条

可拖拉（也可以通过键盘左右键操作）的分级滑动条

4.有感知的按钮

快按（轻按）和长按（重按）的按钮动效有所不同，让用户感觉按钮的材料能感知操作力度。

完整的实现请访问wow.techbrood.com网站：

http://wow.techbrood.com/fiddle/3507

by iefreer