【代码笔记】Web-ionic-表单和输入框
程序员文章站
2022-05-18 17:20:46
一，效果图。 二，代码。 Todo
一，效果图。
二，代码。
<!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>
参考资料：《菜鸟教程》
下一篇： 将两个列表中元素一一对应，并打乱顺序