frozen UI实现手机端移动端表单效果代码

代码语言:html

所属分类:表单美化

代码描述:frozen UI实现手机端移动端表单效果代码

代码标签: 手机 移动 表单 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>FrozenUI Demo</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto1.01.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/frozen.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/frozen.css">

</head>

<body ontouchstart="">

    <header class="ui-header ui-header-positive ui-border-b">
        <i class="ui-icon-return" onClick="history.back()"></i><h1>个人认证</h1><a target="_blank" href="/"><button class="ui-btn">回首页</button></a>
    </header>
    <section class="ui-container">
        <section id="tab">
            <div class="demo-item">

                <div class="demo-block">
                    <div class="ui-tab">
                        <ul class="ui-tab-nav ui-border-b">
                            <li class="current">正面信息</li>
                            <li>背面信息</li>

                        </ul>
                        <ul class="ui-tab-content" style="width:300%">
                            <li>
                                <div class="ui-form ui-border-t">
                                    <form method="post" onsubmit="return false;">
                                        <div class="ui-form-item ui-border-b">
                                            <label>
                                                姓名
                                            </label>
                                            <input type="text" placeholder="请输入姓名" name="xm">
                                            <a href="#" class="ui-icon-close">
                                            </a>
                                        </div>
                                        <div class="ui-form-item ui-border-b">
                                            <label>性别</label>
                                            <div class="ui-select-group">
                                                <div class="ui-select">
                                                    <select name="xba">
                                                        <option selected value="男">男</option>
                                                        <option value="女">女</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ui-form-item ui-border-b">
                                            <label>
                                                出生年月
                                            </label>
                                            <input type="text" placeholder="格式:1900-11-11" name="cs">
                                            <a href="#" class="ui-icon-close">
                                            </a>
                                        </div>
                                        <div class="ui-form-item ui-border-b">
                                            <label>
                                                民族
                                            </label>
                                            <input type="text" placeholder="民族" value="汉" name="mz">
                                            <a href="#" class="ui-icon-close">
                                            </a>
                                        </div>
                                        <div class="ui-form-item ui-form-item-textarea ui-border-b">
                                            <label>
                                                住址
               .........完整代码请登录后点击上方下载按钮下载查看

网友评论0