标签也可以与Framework7中的Inputs一起使用。
例
【Framework7标签和输入完整实例】让我们以一个示例来演示标签和输入的用法：
<
!DOCTYPE html>
<
html>
<
head>
<
meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<
meta name = "apple-mobile-web-app-capable" content = "yes" />
<
meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<
title>
Labels and Input<
/title>
<
link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<
link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<
/head>
<
body>
<
div class = "views">
<
div class = "view view-main">
<
div class = "pages">
<
div data-page = "home" class = "page navbar-fixed">
<
div class = "navbar">
<
div class = "navbar-inner">
<
div class = "left">
<
/div>
<
div class = "center">
Form Elements<
/div>
<
div class = "right">
<
/div>
<
/div>
<
/div>
<
div class = "page-content">
<
div class = "content-block-title">
Labels and Input<
/div>
<
div class = "list-block">
<
ul>
<
li>
<
div class = "item-content">
<
div class = "item-inner">
<
div class = "item-title label">
Name<
/div>
<
div class = "item-input">
<
input type = "text" placeholder = "Enter your name">
<
/div>
<
/div>
<
/div>
<
/li>
<
li>
<
div class = "item-content">
<
div class = "item-inner">
<
div class = "item-title label">
E-mail<
/div>
<
div class = "item-input">
<
input type = "email" placeholder = "Enter your e-mail">
<
/div>
<
/div>
<
/div>
<
/li>
<
li>
<
div class = "item-content">
<
div class = "item-inner">
<
div class = "item-title label">
Password<
/div>
<
div class = "item-input">
<
input type = "password" placeholder = "Enter your password">
<
/div>
<
/div>
<
/div>
<
/li>
<
li>
<
div class = "item-content">
<
div class = "item-inner">
<
div class = "item-title label">
Phone<
/div>
<
div class = "item-input">
<
input type = "tel" placeholder = "Enter your phone number">
<
/div>
<
/div>
<
/div>
<
/li>
<
li>
<
div class = "item-content">
<
div class = "item-inner">
<
div class = "item-title label">
Gender<
/div>
<
div class = "item-input">
<
select>
<
option>
Male<
/option>
<
option>
Female<
/option>
<
/select>
<
/div>
<
/div>
<
/div>
<
/li>
<
li>
<
div class = "item-content">
<
div class = "item-inner">
<
div class = "item-title label">
Birth date<
/div>
<
div class = "item-input">
<
input type = "date" placeholder = "Birth day" value = "http://www.srcmini.com/2014-04-30">
<
/div>
<
/div>
<
/div>
<
/li>
<
li>
<
div class = "item-content">
<
div class = "item-inner">
<
div class = "item-title label">
Date time<
/div>
<
div class = "item-input">
<
input type = "datetime-local">
<
/div>
<
/div>
<
/div>
<
/li>
<
li>
<
div class = "item-content">
<
div class = "item-inner">
<
div class = "item-title label">
Switch<
/div>
<
div class = "item-input">
<
label class = "label-switch">
<
input type = "checkbox">
<
div class = "checkbox">
<
/div>
<
/label>
<
/div>
<
/div>
<
/div>
<
/li>
<
/ul>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
/div>
<
script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js">
<
/script>
<
script>
// here initialize the appvar myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variablevar $$ = Dom7;
// Add the viewvar mainView = myApp.addView('.view-main', {// enable the dynamic navbar for this viewdynamicNavbar: true});
<
/script>
<
/body>
<
/html>
立即测试
推荐阅读
- Framework7选项卡
- Framework7标签和输入
- Framework7插入表单元素
- Framework7图标和输入
- Framework7完整布局表格
- Framework7智能选择
- Framework7表单元素
- Framework7表单存储
- Framework7表单数据