form_section.html
4.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<section id="form_section" >
<header>
<nav class="left">
<a href="#" data-icon="previous" data-target="back">Back</a>
</nav>
<h1 class="title">Form</h1>
</header>
<footer>
<a href="#form_module_article" class="active" data-target="article" data-icon="stack">组件</a>
<a href="#form_article" data-target="article" data-icon="list" >表单</a>
</footer>
<article data-scroll="true" id="form_article" >
<div class="indented">
<!-- Input -->
<form>
<input type="date">
<input type="time">
<input type="month">
<input type="week">
<a class="button block" data-icon="cogs">保存</a>
</form>
<!-- Input group -->
<form class="input-group">
<input type="text" placeholder="真实姓名">
<input type="email" placeholder="电子邮箱">
<input type="text" placeholder="用户名">
</form>
<!-- Input group with labels-->
<form class="input-group">
<div class="input-row">
<label>姓名</label>
<input type="text" placeholder="张三">
</div>
<div class="input-row">
<label>邮箱</label>
<input type="email" placeholder="example@gmail.com">
</div>
<div class="input-row">
<label>用户名</label>
<input id="username_form" type="text" placeholder="字母、数字、下划线">
</div>
<div class="input-row">
<label>性别</label>
<div class="toggle active" data-on="男" data-off="女" name="sex"></div>
</div>
</form>
</div>
</article>
<article data-scroll="true" class="active " id="form_module_article" >
<div>
<ul class="list">
<li class="divider">checkbox</li>
<li>
<div data-checkbox="unchecked" id="checkbox_1">爱我你就勾勾我</div>
<div data-checkbox="checked" id="checkbox_2">爱我你就勾勾我</div>
</li>
<li class="divider">toggle</li>
<li>
<div class="demo-btn-group">
<div style="text-align: left">默认：</div>
<div class="toggle active" >
</div>
<div class="toggle" >
</div>
<div style="text-align: left">自定义文字 data-on="开启" data-off="关闭"</div>
<div style="text-align: left">
<label>测试：</label>
<div class="toggle active" data-on="开启" data-off="关闭"></div>
</div>
<div style="text-align: left">
<label>测试：</label>
<div class="toggle" data-on="是" data-off="否"></div>
</div>
</div>
</li>
<li class="divider">range</li>
<li>
<div class="demo-btn-group">
<div style="text-align: left">默认：</div>
<div>
<input type="range" min=4 max=10 value="7"/>
</div>
<div style="text-align: left">右侧显示值：</div>
<div data-rangeinput="right">
<input type="range" min=4 max=10 value="7"/>
</div>
<div style="text-align: left">左侧显示值：</div>
<div data-rangeinput="left">
<input type="range" min=4 max=10 value="8"/>
</div>
</div>
</li>
<li class="divider">progress</li>
<li>
<div class="demo-btn-group">
<div style="text-align: left">默认：</div>
<div data-progress="40"></div>
<div style="text-align: left">自定义文字：</div>
<div data-progress="80" data-title="已完成"></div>
</div>
</li>
</ul>
</div>
</article>
</section>