文本输入:使用占位符做标签有时可以将描述标签省略,这样可以获得一种简洁的效果: 
这是input元素原生的功能,设置其placeholder属性 即可实现: - <label class="item item-input">
- <input type="text" placeholder="label-text">
- </label>
<html> <head> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <link rel="stylesheet" type="text/css" href="ionic.min.css"> </head> <body> <div class="scroll-content"> <div class="list"> <div class="item item-thumbnail-left item-positive"> <img src="img/baymax.jpg"> <h1 class="light">user login</h1> </div> <label class="item item-input"> <i class="icon ion-ios-person-outline positive"></i> <input type="text" placeholder="请输入您的用户名"> </label> <label class="item item-input"> <i class="icon ion-ios-unlocked-outline positive"></i> <input type="password" placeholder="请输入您的密码"> </label> <label class="item item-checkbox"> <label class="checkbox"> <input type="checkbox" checked> </label> 记住密码 </label> </div> <div class="padding-left padding-right"> <button class="button button-block button-positive">登录系统</button> </div> </div> </body> </html>
|