移动端安卓和IOS开发框架Framework7教程-表单布局

使用表单布局创建响应式的精美的表单布局。表单布局就是 列表，但是会有一些拓展。

简单的表单布局

让我们看一种最简单的表单布局：

1. <div class="list-block">
2.   <ul>
3.     ...
4.     <li>
5.       <div class="item-content">
6.         <div class="item-media">... icon here ...</div>
7.         <div class="item-inner">
8.           <div class="item-title label">Name</div>
9.           <div class="item-input">
10.               <input type="text" name="name">
11.           </div>
12.         </div>
13.       </div>
14.     </li>
15.     ...
16.   </ul>
17. </div>

复制

从上面的例子可以看出，表单布局几乎和 列表 一样，但是有如下一些不同：

• item-title - 单行的label，应该有一个额外的 label class。可选的。

• item-input - 包含了你的表单输入框等。 必选

对表单元素的支持

下面是所有你可以放进 item-input 中的表单元素：

All text inputs	Supported types: text, password, email, tel, url, date, number, datetime-local ...   <div class="item-input">     <input type="text">   </div>                     ... 复制 ...   <div class="item-input">     <input type="email">   </div>                     ... 复制
Select	...   <div class="item-input">     <select>...</select">   </div>                     ... 复制
Textarea	...   <div class="item-input">     <textarea></textarea>   </div>                     ... 复制 Note that List View element with textarea should have additional "align-top" class on <li>: <div class="list-block">   <ul>     ...     <!-- Additional "align-top" class for correct textarea alignment -->     <li class="align-top">       <div class="item-content">         <div class="item-inner">           <div class="item-title label">Textarea</div>           <div class="item-input">               <textarea></textarea>           </div>         </div>       </div>     </li>     ...   </ul> </div> 复制
Resizable Textarea	Resiable textarea. Just add "resizable" class to textarea and it will resize automatically depending on its content ...   <div class="item-input">     <textarea class="resizable"></textarea>   </div>                     ... 复制
Switch (Checkbox)	Switch (Checkbox) requires additional wrapper: ...   <label class="label-switch">     <input type="checkbox">     <div class="checkbox"></div>   </label> ... 复制
Slider (Range input)	Slider (Range input) requires additional wrapper: ...   <div class="item-input">     <div class="range-slider">       <input type="range" min="0" max="100" step="0.1">     </div>   </div>                     ... 复制

示例

完整的布局

1. <div class="content-block-title">Full Layout</div>
2. <div class="list-block">
3.   <ul>
4.     <!-- Text inputs -->
5.     <li>
6.       <div class="item-content">
7.         <div class="item-media"><i class="icon icon-form-name"></i></div>
8.         <div class="item-inner">
9.           <div class="item-title label">Name</div>
10.           <div class="item-input">
11.             <input type="text" placeholder="Your name">
12.           </div>
13.         </div>
14.       </div>
15.     </li>
16.     <li>
17.       <div class="item-content">
18.         <div class="item-media"><i class="icon icon-form-email"></i></div>
19.         <div class="item-inner">
20.           <div class="item-title label">E-mail</div>
21.           <div class="item-input">
22.             <input type="email" placeholder="E-mail">
23.           </div>
24.         </div>
25.       </div>
26.     </li>
27.     ...
28.     <!-- Select -->
29.     <li>
30.       <div class="item-content">
31.         <div class="item-media"><i class="icon icon-form-gender"></i></div>
32.         <div class="item-inner">
33.           <div class="item-title label">Gender</div>
34.           <div class="item-input">
35.             <select>
36.               <option>Male</option>
37.               <option>Female</option>
38.             </select>
39.           </div>
40.         </div>
41.       </div>
42.     </li>
43.     <!-- Date -->
44.     <li>
45.       <div class="item-content">
46.         <div class="item-media"><i class="icon icon-form-calendar"></i></div>
47.         <div class="item-inner">
48.           <div class="item-title label">Birth date</div>
49.           <div class="item-input">
50.             <input type="date" placeholder="Birth day" value="2014-04-30">
51.           </div>
52.         </div>
53.       </div>
54.     </li>
55.     <!-- Date time-->
56.     <li>
57.       <div class="item-content">
58.         <div class="item-media"><i class="icon icon-form-calendar"></i></div>
59.         <div class="item-inner">
60.           <div class="item-title label">Date time</div>
61.           <div class="item-input">
62.             <input type="datetime-local">
63.           </div>
64.         </div>
65.       </div>
66.     </li>
67.     <!-- Switch (Checkbox) -->
68.     <li>
69.       <div class="item-content">
70.         <div class="item-media"><i class="icon icon-form-toggle"></i></div>
71.         <div class="item-inner">
72.           <div class="item-title label">Switch</div>
73.           <div class="item-input">
74.             <label class="label-switch">
75.               <input type="checkbox">
76.               <div class="checkbox"></div>
77.             </label>
78.           </div>
79.         </div>
80.       </div>
81.     </li>
82.     <!-- Slider (Range input) -->
83.     <li>
84.       <div class="item-content">
85.         <div class="item-media"><i class="icon icon-form-settings"></i></div>
86.         <div class="item-inner">
87.           <div class="item-title label">Slider</div>
88.           <div class="item-input">
89.             <div class="range-slider">
90.               <input type="range" min="0" max="100" value="50" step="0.1">
91.             </div>
92.           </div>
93.         </div>
94.       </div>
95.     </li>
96.     <!-- Textarea -->
97.     <li class="align-top">
98.       <div class="item-content">
99.         <div class="item-media"><i class="icon icon-form-comment"></i></div>
100.         <div class="item-inner">
101.           <div class="item-title label">Textarea</div>
102.           <div class="item-input">
103.             <textarea></textarea>
104.           </div>
105.         </div>
106.       </div>
107.     </li>
108.   </ul>
109. </div>

复制

实例预览

图标和输入框

因为 item-title 是可选元素，所以可以不写:

1. <div class="content-block-title">Icons and inputs</div>
2. <div class="list-block">
3.   <ul>
4.     <!-- Text inputs -->
5.     <li>
6.       <div class="item-content">
7.         <div class="item-media"><i class="icon icon-form-name"></i></div>
8.         <div class="item-inner">
9.           <div class="item-input">
10.             <input type="text" placeholder="Your name">
11.           </div>
12.         </div>
13.       </div>
14.     </li>
15.     <li>
16.       <div class="item-content">
17.         <div class="item-media"><i class="icon icon-form-email"></i></div>
18.         <div class="item-inner">
19.           <div class="item-input">
20.             <input type="email" placeholder="E-mail">
21.           </div>
22.         </div>
23.       </div>
24.     </li>
25.     
26.     <!-- Select -->
27.     <li>
28.       <div class="item-content">
29.         <div class="item-media"><i class="icon icon-form-gender"></i></div>
30.         <div class="item-inner">
31.           <div class="item-input">
32.             <select>
33.               <option>Male</option>
34.               <option>Female</option>
35.             </select>
36.           </div>
37.         </div>
38.       </div>
39.     </li>
40.     
41.     <!-- Date -->
42.     <li>
43.       <div class="item-content">
44.         <div class="item-media"><i class="icon icon-form-calendar"></i></div>
45.         <div class="item-inner">
46.           <div class="item-input">
47.             <input type="date" placeholder="Birth day" value="2014-04-30">
48.           </div>
49.         </div>
50.       </div>
51.     </li>
52.     
53.     <!-- Switch (Checkbox) -->
54.     <li>
55.       <div class="item-content">
56.         <div class="item-media"><i class="icon icon-form-toggle"></i></div>
57.         <div class="item-inner">
58.           <div class="item-input">
59.             <label class="label-switch">
60.               <input type="checkbox">
61.               <div class="checkbox"></div>
62.             </label>
63.           </div>
64.         </div>
65.       </div>
66.     </li>
67.     
68.     <!-- Slider (Range input) -->
69.     <li>
70.       <div class="item-content">
71.         <div class="item-media"><i class="icon icon-form-settings"></i></div>
72.         <div class="item-inner">
73.           <div class="item-input">
74.             <div class="range-slider">
75.               <input type="range" min="0" max="100" value="50" step="0.1">
76.             </div>
77.           </div>
78.         </div>
79.       </div>
80.     </li>
81.   </ul>
82. </div>

复制

实例预览

label和输入框

因为 item-media 是可选元素，所以可以不写:

1. <div class="content-block-title">Labels and inputs</div>
2. <div class="list-block">
3.   <ul>
4.     <!-- Text inputs -->
5.     <li>
6.       <div class="item-content">
7.         <div class="item-inner">
8.           <div class="item-title label">Name</div>
9.           <div class="item-input">
10.             <input type="text" placeholder="Your name">
11.           </div>
12.         </div>
13.       </div>
14.     </li>
15.     <li>
16.       <div class="item-content">
17.         <div class="item-inner">
18.           <div class="item-title label">E-mail</div>
19.           <div class="item-input">
20.             <input type="email" placeholder="E-mail">
21.           </div>
22.         </div>
23.       </div>
24.     </li>
25.     
26.     <!-- Select -->
27.     <li>
28.       <div class="item-content">
29.         <div class="item-inner">
30.           <div class="item-title label">Gender</div>
31.           <div class="item-input">
32.             <select>
33.               <option>Male</option>
34.               <option>Female</option>
35.             </select>
36.           </div>
37.         </div>
38.       </div>
39.     </li>
40.     
41.     <!-- Date -->
42.     <li>
43.       <div class="item-content">
44.         <div class="item-inner">
45.           <div class="item-title label">Birth date</div>
46.           <div class="item-input">
47.             <input type="date" placeholder="Birth day" value="2014-04-30">
48.           </div>
49.         </div>
50.       </div>
51.     </li>
52.     
53.     <!-- Switch (Checkbox) -->
54.     <li>
55.       <div class="item-content">
56.         <div class="item-inner">
57.           <div class="item-title label">Switch</div>
58.           <div class="item-input">
59.             <label class="label-switch">
60.               <input type="checkbox">
61.               <div class="checkbox"></div>
62.             </label>
63.           </div>
64.         </div>
65.       </div>
66.     </li>
67.     
68.     <!-- Slider (Range input) -->
69.     <li>
70.       <div class="item-content">
71.         <div class="item-inner">
72.           <div class="item-title label">Slider</div>
73.           <div class="item-input">
74.             <div class="range-slider">
75.               <input type="range" min="0" max="100" value="50" step="0.1">
76.             </div>
77.           </div>
78.         </div>
79.       </div>
80.     </li>
81.   </ul>
82. </div>

复制

实例预览

只有输入框

1. <div class="content-block-title">Just inputs</div>
2. <div class="list-block">
3.   <ul>
4.     <li>
5.       <div class="item-content">
6.         <div class="item-inner">
7.           <div class="item-input">
8.             <input type="text" placeholder="Your name">
9.           </div>
10.         </div>
11.       </div>
12.     </li>
13.     <li>
14.       <div class="item-content">
15.         <div class="item-inner">
16.           <div class="item-input">
17.             <input type="email" placeholder="E-mail">
18.           </div>
19.         </div>
20.       </div>
21.     </li>
22.     <li>
23.       <div class="item-content">
24.         <div class="item-inner">
25.           <div class="item-input">
26.             <select>
27.               <option>Male</option>
28.               <option>Female</option>
29.             </select>
30.           </div>
31.         </div>
32.       </div>
33.     </li>
34.     <li>
35.       <div class="item-content">
36.         <div class="item-inner">
37.           <div class="item-input">
38.             <input type="date" placeholder="Birth day" value="2014-04-30">
39.           </div>
40.         </div>
41.       </div>
42.     </li>
43.   </ul>
44. </div>

复制

实例预览

Inset

因为表单也是 列表布局 的一种, 所以可以变成 inset:

1. <div class="content-block-title">Just inputs</div>
2. <!-- "inset" class on list-block -->
3. <div class="list-block inset">
4.   ...
5. </div>
   复制

实例预览