`

移动端安卓和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教程- ...
评论
发表评论

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

相关推荐

    iOS开发视频教程

    资源名称：iOS开发视频教程资源目录：【】iOS开发视频教程-第01讲-iOS历史介绍【】iOS开发视频教程-第02讲-XCode安装【】iOS开发视频教程-第03讲-UIView_PPT【】iOS开发视频教程-第04讲-UILabel【】iOS开发视频教程-...

    HTML移动端框架Framework7.zip

    Framework7 是免费开源的 HTML 移动端框架，用来开发混合移动端应用或者 iOS 7 的 Web 应用，并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。Framework7 使用 Javascript，CSS 和 HTML 来...

    Framework7Vue使用Framework7和Vue构建完整的iOS和Android应用程序

    Framework7是一款免费、开源的移动应用框架，旨在为开发者提供构建iOS和Android应用的全套工具。它提供了丰富的组件库，包括导航、表单、视图、滑块等，使开发者能够轻松实现原生应用的界面和交互效果。 二、Vue.js...

    framework7-icons, Framework7的免费iOS图标字体.zip

    framework7-icons, Framework7的免费iOS图标字体 Framework7图标Framework7的高级和免费ios图标字体。这种字体可以用在 Framework7插件中，但是你可以在任何地方看到它适合它，个人或者商业。 它是免费的使用和许可...

    ios开发 AES-128-ECB加密

    之前遇到的需求，ios上没有类似的实现。搞了好久在网上搜了很多资料都不能解决最后找到了一个c/c++的底层源码，才实现了最后整理了下上传了。是个ios的demo很详细你定能看懂的。运行在xcode环境下，关键算法的文件是...

    PyPI 官网下载 | pyobjc-framework-Cocoa-6.0.1.tar.gz

    Objective-C是苹果公司开发的一种面向对象的编程语言，广泛应用于MacOS和iOS平台的软件开发。Cocoa是Apple为这两种操作系统提供的原生开发框架，包含了大量用于构建图形用户界面、处理事件、管理文件系统等任务的...

    Framework7用于构建iOS和Android应用全功能移动HTML框架

    Framework7是一款强大的、免费的HTML5移动应用框架，专为构建具有原生iOS和Android界面风格的混合式移动应用而设计。它允许开发者使用Web技术（如HTML, CSS, JavaScript）来创建高度交互且功能丰富的应用程序，同时...

    iPhone开发入门到精通视频教程

    iPhone开发入门到精通视频教程资源目录：【】iOS开发源码系列---工具【】iOS开发源码系列---应用【】iOS开发源码系列---游戏【】iOS开发源码系列---类库与框架【】iOS开发真机测试与发布【】iOS开发视频教程01~05...

    WebRTC.framework iOS Debug arm64与x86-64架构

    iOS Debug环境 arm64与x86_64架构 WebRTC.framework Mach-O universal binary with 2 architectures: [x86_64:Mach-O 64-bit dynamically linked shared library x86_64] [arm64] Mach-O 64-bit dynamically linked ...

    ios-LMForm - iOS表单配置框架.zip

    LMForm是一款专为iOS开发设计的表单配置框架，它极大地简化了在iOS应用中创建和管理各种表单的过程。这个框架的核心理念是通过代码配置而非手动布局来构建表单，提高了开发效率并降低了出错的可能性。下面我们将深入...

    IOS应用源码Demo-iOS framework 制作教程【非静态包】-毕设学习.zip

    提供的【应用】★★★★-iOS framework 制作教程【非静态包】源码示例，应该包含了完整的框架创建过程和相关代码，你可以通过阅读和运行这个项目来加深理解。在实践中，你可以尝试修改源代码，添加新的功能，或者...

    移动端兼容安卓IOS的高仿支付密码输入功能

    移动端兼容安卓IOS的高仿支付密码输入功能。 类似支付宝，微信的支付密码功能。

    手机移动端电商,IOS,Android

    总之，手机移动端电商在iOS和Android平台上的实现涉及多方面的技术和策略。从H5页面的构建到原生功能的集成，再到用户体验的优化，每一个环节都需要精心设计和实施。随着技术的不断发展，未来的移动端电商将更加智能...

    Framework7是一个用于构建iOS和Android应用的全功能HTML框架

    Framework7 是免费开源的 HTML 移动端框架，用来开发混合移动端应用或者 iOS 7 的 Web 应用，并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。

    Delphi XE8开发iOS和Android移动应用开发教程[完整中文版]

    ### Delphi XE8 开发 iOS 和 Android 移动应用知识点总结 #### 一、Delphi XE8 概述 - **RAD Studio**: RAD Studio 是 Embarcadero 公司旗下的集成开发环境 (IDE)，它支持多种编程语言，包括 Delphi、C++Builder ...

    iOS通用开发框架

    7. **自动布局和动态类型**：为了适应不同屏幕尺寸和辅助功能设置，框架可能会包含自动布局的解决方案，支持动态字体大小和间距。 8. **依赖注入**：通过依赖注入容器（如Swift中的Dependency Injection或Obj-C的...

    ios开发-使用mpass移动开发框架在ios端抓包hook脚本.zip

    "ios开发-使用mpass移动开发框架在ios端抓包hook脚本.zip"是一个针对iOS开发者的重要资源，它包含了一套利用mpass移动开发框架在iOS设备上实现抓包功能的hook脚本。本文将详细介绍如何使用这个框架和脚本来实现iOS端...

    road-ios-framework, 道路- 快速 Objective C 应用程序开发.zip

    road-ios-framework, 道路- 快速 Objective C 应用程序开发 一组重用组件利用额外的维度属性定向程序 。##Components基础类的属性。反射和辅助扩展支持核心 。服务 implementation服务定位器 Pattern的实现，集中...

    精通iOS框架 第2版 Objective-C

    总之，《精通iOS框架 第2版》是一本全面且深入的教程，适合希望在iOS开发领域更上一层楼的开发者。无论你是想增强Objective-C编程技能，还是想更好地掌握iOS框架的使用，这本书都能为你提供宝贵的知识和实践经验。

    Framework7-Vue-使用Framework7＆Vue构建功能全面的iOS和Android应用程序。-Vue.js开发

    Framework7用于构建iOS和Android应用程序支持的全功能移动HTML框架Framework7 Framework7是用于MIT授权的开源项目Project7用于构建iOS和Android应用程序的全功能移动HTML框架Framework7 Framework7是MIT许可的开放源...

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