`

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

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

  1. ...
  2.   <div class="item-input">
  3.     <input type="text">
  4.   </div>                    
  5. ...
复制
  1. ...
  2.   <div class="item-input">
  3.     <input type="email">
  4.   </div>                    
  5. ...
复制
 

Select
  1. ...
  2.   <div class="item-input">
  3.     <select>...</select">
  4.   </div>                    
  5. ...
复制
 

Textarea
  1. ...
  2.   <div class="item-input">
  3.     <textarea></textarea>
  4.   </div>                    
  5. ...
复制

Note that List View element with textarea should have additional "align-top" class on <li>:

  1. <div class="list-block">
  2.   <ul>
  3.     ...
  4.     <!-- Additional "align-top" class for correct textarea alignment -->
  5.     <li class="align-top">
  6.       <div class="item-content">
  7.         <div class="item-inner">
  8.           <div class="item-title label">Textarea</div>
  9.           <div class="item-input">
  10.               <textarea></textarea>
  11.           </div>
  12.         </div>
  13.       </div>
  14.     </li>
  15.     ...
  16.   </ul>
  17. </div>
复制
 

Resizable Textarea

Resiable textarea. Just add "resizable" class to textarea and it will resize automatically depending on its content

  1. ...
  2.   <div class="item-input">
  3.     <textarea class="resizable"></textarea>
  4.   </div>                    
  5. ...
复制
 

Switch (Checkbox)

Switch (Checkbox) requires additional wrapper:

  1. ...
  2.   <label class="label-switch">
  3.     <input type="checkbox">
  4.     <div class="checkbox"></div>
  5.   </label>
  6. ...
复制
 

Slider (Range input)

Slider (Range input) requires additional wrapper:

  1. ...
  2.   <div class="item-input">
  3.     <div class="range-slider">
  4.       <input type="range" min="0" max="100" step="0.1">
  5.     </div>
  6.   </div>                    
  7. ...
复制
 

示例

完整的布局

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

实例预览

 

1
顶
0
踩
分享到：
| 移动端安卓和IOS开发框架Framework7教程- ...
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    HTML移动端框架Framework7 1.6.4.zip

    Framework7是一款强大的HTML5移动应用框架，专为构建原生感觉的iOS和Android应用而设计。这个1.6.4版本的压缩包包含了用于开发移动端Web应用的所有必要资源和文件，使得开发者能够利用HTML、CSS和JavaScript技术创建...

    framework7-recipes:Framework7概念证明模板，布局和脚本

    这个"framework7-recipes"项目是一个丰富的资源库，提供了多种基于Framework7的概念证明模板、布局和脚本，旨在帮助开发者更好地理解和利用Framework7进行应用开发。 一、Framework7基础 Framework7 是由Ilya ...

    常用的移动端和前端的资源

    React Native是由Facebook开发的开源框架，它允许开发者用JavaScript和React语法构建原生的iOS和Android应用。通过React的声明式编程模型和组件化思想，开发者可以实现高效且可复用的代码，大大简化了移动应用的开发...

    AureliaFramework7一个轻量级的移动应用平台

    Framework7则是一款流行的移动应用UI框架，它提供了一套完整的iOS和Android风格的组件，包括导航栏、侧滑菜单、表单元素等，使得开发者可以快速构建出原生感观的应用界面。当Aurelia与Framework7结合时，开发者可以...

    meteor-framework7

    Framework7 是一款强大的HTML5移动应用框架，模仿原生iOS和Android的界面风格，提供了丰富的组件和API，使得开发者能够用HTML、CSS和JavaScript构建出与原生应用体验相近的Web应用。它特别适合构建单页应用（SPA）和...

    h5制作移动端专题活动页面可视化编辑

    4. **Quasar Framework**：除了提供UI组件，还支持PWA（渐进式Web应用）和多平台应用开发，如iOS、Android原生应用。 四、H5页面构建流程 1. **需求分析**：明确页面目标、交互设计和视觉风格。 2. **原型设计**：...

    vue-todolist-f7:F2E周1待办事项清单

    在本项目“vue-todolist-f7”中，开发者使用了Vue.js来构建一个待办事项清单应用，结合了Framework7和Webpack，旨在提供一个移动端应用的实践模板。 Framework7 是一个开源的HTML5移动应用框架，它模仿了iOS和...

    常用的控件

    4. Android和iOS：在移动应用开发中，Android使用XML布局定义控件，如EditText（文本输入）、Button（按钮），iOS则使用Storyboard或XIB文件。 5. JavaScript和HTML5：在前端开发中，HTML5引入了新的标签，如（日期...

Magicbox
Global site tag (gtag.js) - Google Analytics