移动端安卓和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?中的表单元素：

示例

完整的布局

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>
   复制

实例预览

?

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

原文：http://zaixianshouce.iteye.com/blog/2305406