【代码笔记】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="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>
复制代码

 

参考资料：《菜鸟教程》

posted @ 2018-07-20 09:33  花儿迎风笑  阅读(553)  评论(0)  编辑  收藏  举报