首页 > 技术文章 > html5 bootstrap pannel formgroup 模板

shaoing 2016-07-19 11:18 原文

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>

    <title>html5 bootstrap pannel formgroup</title>
    
    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div>
    <div class="panel panel-default">
        <div class="panel-heading text-center">签署文件</div>
        <div class="panel-body">
            <div class="col-lg-3"></div>
            <div class="col-lg-6 panel panel-default">
                <div style="margin-top: 15px;">
                    <form id="person" class="form-horizontal">
                        <div class="form-group">
                            <label for="accountId" class="col-sm-3 control-label">账户标识</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="accountId" readonly >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="src-file" class="col-sm-3 control-label">待签署文档路径</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="src-file" value="E:/test.pdf" onblur="changeDstFilePath()" placeholder="请填写PDF文档的全路径">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">定位类型</label>
                            <div class="col-sm-9">
                                <label class="radio-inline">
                                    <input type="radio" name="posTypeRadios" id="posType1" value="0" checked>坐标定位
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="posTypeRadios" id="posType2" value="1" >关键字定位
                                </label>
                            </div>
                        </div>
                       
                        <div class="form-group">
                            <label for="file-name" class="col-sm-3 control-label">文档显示名字</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="file-name" value="test">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="seal" class="col-sm-3 control-label">印章数据</label>
                            <div class="col-sm-9">
                                <textarea style="height: 200px;" class="form-control" id="seal" readonly>absdfqwexcvasdf</textarea>
                            </div>
                        </div>
                        <div class="form-group text-right">
                            <div class="col-sm-12">
                                <button type="button" class="btn btn-default" onclick="back()">上一步</button>
                                <button type="button" class="btn btn-default" id="submit">下一步</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-3"></div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

</script>
</html>

 

推荐阅读