Web-ionic-表单和输入框
【摘要】 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Todo</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
<script src="js/app2.js"></script>
<script src="cordova.js"></script>
</head>
<body>
<!--输入框属性:placeholder-->
<div class="list">
<label class="item item-input">
<input type="text" placeholder="fist name">
</label>
<label class="item item-input ">
<input type="text" placeholder="last name">
</label>
<label class="item item-input">
<textarea placeholder="comments"></textarea>
</label>
</div>
<!--输入框属性：input-label-->
<div class="list">
<label class="item item-input">
<span class="input-label">用户名:</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">密码:</span>
<input type="password">
</label>
</div>
<!--堆叠标签-->
<div>
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text" placeholder="john">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last name</span>
<input type="text" placeholder="suhr">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">email</span>
<input type="text" placeholder="john@suhr.com">
</label>
</div>
<!--浮动标签-->
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">First name</span>
<input type="text" placeholder="first name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Last name</span>
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">email</span>
<input type="text" placeholder="email">
</label>
</div>
<!--内嵌表单-->
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="last Name" </label>
</div>
<!--内嵌输入域-->
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Email">
</label>
<button class="button button-small">Submit</button>
</div>
</div>
<!--带图标的输入框-->
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder"></i>
<input type="text" placeholder="Search">
</label>
</div>
<!--头部输入框-->
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder"></i>
<input type="search" placeholder="搜索">
</label>
<button class="button button-clear">取消</button>
</div>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）