2016年5月29日晚上（传智Bootstrap笔记五（表单2））

Posted 2020-07-16 zzjeny

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016年5月29日晚上（传智Bootstrap笔记五（表单2））相关的知识，希望对你有一定的参考价值。

一、总表单实例

<body style="padding:50px;background-color:#ccc;">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="username" class="col-md-2 control-label">用户名：</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="password">密  码：</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label" for="inputfile">文件输入:</label>
                <div class="col-md-10">
                    <input type="file" id="inputfile" >
                    <p class="help-block">这里是块级帮助文本的实例。</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">兴趣爱好：</label>
                <div class="col-md-10">
                    <label class="checkbox-inline"><input type="checkbox" >画画</label>
                    <label class="checkbox-inline"><input type="checkbox" >体育</label>
                    <label class="checkbox-inline"><input type="checkbox" >唱歌</label>
                    <label class="checkbox-inline"><input type="checkbox" >美术</label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">学历：</label>
                <div class="col-md-10">
                    <label class="radio-inline"><input type="radio" >初中</label>
                    <label class="radio-inline"><input type="radio" >高中</label>
                    <label class="radio-inline"><input type="radio" >大学</label>
                    <label class="radio-inline"><input type="radio" >硕士</label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">个人简介：</label>
                <div class="col-md-10">
                    <textarea class="form-control" rows="5" placeholder="请输入你的个人信息："></textarea>
                </div>
            </div>
            <div class="col-md-10 col-md-offset-2">
                <button  type="submit" class="btn btn-danger ">提交</button>
            </div>
        </form>
    </body>