Bootstrap CSS布局之表单

1. 表单

表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基础、内联、横向)

表单的元素 input textarea select checkBox radio(checkBox和radio是input的特殊类型) 其他标签 form fieldset legend

1.1.基础表单

元素添加 role="form"。 2.把标签label和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。因为form-group提供了margin 3.向所有的文本元素、

和 <select> <a href="https://www.f2er.com/tag/tianjia/" target="_blank" class="keywords">添加</a> class .form-control。-->
<p><form role="form"></p>
<fieldset>
  <legend><a href="https://www.f2er.com/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="https://www.f2er.com/tag/denglu/" target="_blank" class="keywords">登录</a></legend>
  <div class="form-group">
   <label for="name">姓名</label>
   <input type="text" class="form-control" id="name" placeholder="请输入<a href="https://www.f2er.com/tag/mingcheng/" target="_blank" class="keywords">名称</a>">
  </div>
<p><div class="form-group"><br />
<label for="psd">密码</label><br />
<input type="text" class="form-control" id="psd" placeholder="请输入密码"></p>
</div>
<p><div class="check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>"></p>
<label><input type="check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>">记住密码</label>
  </div>
  <button type="submit" class="btn btn-default"><a href="https://www.f2er.com/tag/denglu/" target="_blank" class="keywords">登录</a></button>
 </fieldset>
</form>
</pre>
</div>
<p><h3>1.2.内联表单</h3></p>
<div class="jb51code">
<pre class="brush:xhtml;">

 <form role="form" class="form-inline">
  <fieldset>
   <legend><a href="https://www.f2er.com/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="https://www.f2er.com/tag/denglu/" target="_blank" class="keywords">登录</a></legend>
   <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" id="name" placeholder="请输入<a href="https://www.f2er.com/tag/mingcheng/" target="_blank" class="keywords">名称</a>">
   </div>
<p><div class="form-group"><br />
<label for="psd">密码</label><br />
<input type="text" class="form-control" id="psd" placeholder="请输入密码"></p>
</div>
<p><div class="check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>"></p>
<label><input type="check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>">记住密码</label>
   </div>
   <button type="submit" class="btn btn-default"><a href="https://www.f2er.com/tag/denglu/" target="_blank" class="keywords">登录</a></button>
  </fieldset>
 </form>
</pre>
</div>
<p><h3>1.3.横向表单</h3></p>
<div class="jb51code">
<pre class="brush:xhtml;">

 <form role="form" class="form-horizontal">
  <fieldset>
   <legend><a href="https://www.f2er.com/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="https://www.f2er.com/tag/denglu/" target="_blank" class="keywords">登录</a></legend>
   <div class="form-group">
    <label class="control-label col-lg-1" for="name">姓名</label>
    <div class="col-lg-10">
     <input type="text" class="form-control" id="name" placeholder="请输入<a href="https://www.f2er.com/tag/mingcheng/" target="_blank" class="keywords">名称</a>">
    </div>
   </div>
<p><div class="form-group"><br />
<label class="control-label col-lg-1" for="psd">密码</label><br />
<div class="col-lg-10"><br />
<input type="text" class="form-control" id="psd" placeholder="请输入密码"></p>
</div>
   </div>
  </fieldset>
 </form>
</pre>
</div>
<p><h3>1.4.表单控件</h3></p>
<p><span style="color: #800000"><h3>input元素： 
</h3>使用input元素的时候，必须声明type类型，否则可能引起问题。</p>
<p><span style="color: #800000"><h3>select元素： 
</h3>多行选择设置multiple=”multiple”</p>
<p><span style="color: #800000"><h3>textarea元素：</h3> 
textarea元素定义了rows数字即可定义大文本框的高度，cols宽度。但是textarea应用了form-control央视，则cols无效。</p>
<p>check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>和ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>(是两个特殊的type) 
注意使用的时候，每个input外部用label包住，并且在最外层用容器元素宝珠，并应用相应的.check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>和.ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>样式。</p>
<div class="jb51code">
<pre class="brush:xhtml;">
//使用
<div class="check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>">
 <label><input type="check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>">学习前端</label>
</div>
<div class="ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>">
 <label><input type="ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>" name="optionsRa<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>s" value="male">男生</label>
</div>
<div class="ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>">
 <label><input type="ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>" name="optionsRa<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>s" value="female">女生</label>
</div>
</pre>
</div>
<div class="jb51code">
<pre class="brush:css;">
//源码
//让单选框和复选框都能左右和上下居中
.ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>,.check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a> {
 position: relative;
 display: block;
 margin-top: 10px;
 margin-bottom: 10px;
}
//内部有label的话，内联<a href="https://www.f2er.com/tag/xianshi/" target="_blank" class="keywords">显示</a>
.ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a> label,.check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a> label {
 min-height: 20px;
 padding-left: 20px;
 margin-bottom: 0;
 font-weight: normal;
 cursor: pointer;
}
</pre>
</div>
<p>同时可以内联<a href="https://www.f2er.com/tag/xianshi/" target="_blank" class="keywords">显示</a>，在labelshang<a href="https://www.f2er.com/tag/tianjia/" target="_blank" class="keywords">添加</a>check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>-inline或者ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>-inline</p>
<p><span style="color: #000000"><h3>1.5.空间状态</h3></p>
<p>焦点状态、禁用状态、验证<a href="https://www.f2er.com/tag/tishi/" target="_blank" class="keywords">提示</a>状态</p>
<p><span style="color: #800000"><h3>焦点状态： </h3>
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 <a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>-shadow。</p>
<p><span style="color: #800000"><h3>禁用状态：</h3> 
对 <a href="https://www.f2er.com/tag/tianjia/" target="_blank" class="keywords">添加</a> disabled <a href="https://www.f2er.com/tag/shuxing/" target="_blank" class="keywords">属性</a>来禁用 内的所有控件。</p>
<p><span style="color: #800000"><h3>验证<a href="https://www.f2er.com/tag/tishi/" target="_blank" class="keywords">提示</a>状态： </h3>
Bootstrap 包含了<a href="https://www.f2er.com/tag/cuowu/" target="_blank" class="keywords">错误</a>、警告和成功消息的验证样式。只需要对父元素简单地<a href="https://www.f2er.com/tag/tianjia/" target="_blank" class="keywords">添加</a>适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。 
–对<a href="https://www.f2er.com/tag/wenzi/" target="_blank" class="keywords">文字</a>、边框和阴影设置的颜色不同</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<div class="form-group has-warning">
 <label for="inputWarning" class="control-label">输入长度不够!</label>
 <input type="text" class="form-control">
</div>
<div class="form-group has-error">
 <label for="inputError" class="control-label">输入不符合要求！</label>
 <input type="text" class="form-control">
</div>
<div class="form-group has-success has-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back">
 <label for="inputSuccess" class="control-label">输入文本符合要求！</label>
 <input type="text" class="form-control" id="inputSuccess">
 <span class="glyphicon glyphicon-ok form-control-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back"></span>
</div>
</pre>
</div>
<div class="jb51code">
<pre class="brush:css;">
//相对定位，用于设置input元素的父容器的定位方式
.has-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back {
 position: relative;
}
//右内边距的设置，以便可以<a href="https://www.f2er.com/tag/xianshi/" target="_blank" class="keywords">显示</a>小图标
.has-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back .form-control {
 padding-right: 42.5px;
}
//设置小图标的<a href="https://www.f2er.com/tag/xianshi/" target="_blank" class="keywords">显示</a>方式
.form-control-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back {
 position: absolute;//绝对定位
 top: 0;
 right: 0;//右对齐
 z-index: 2;
 display: block;
 width: 34px;
 height: 34px;
 line-height: 34px;
 text-align: center;
 pointer-events: none;
}
.input-lg + .form-control-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back,.input-group-lg + .form-control-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back,.form-group-lg .form-control + .form-control-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back {
 width: 46px;
 height: 46px;
 line-height: 46px;
}
.input-sm + .form-control-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back,.input-group-sm + .form-control-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back,.form-group-sm .form-control + .form-control-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back {
 width: 30px;
 height: 30px;
 line-height: 30px;
}
.has-success .help-block,.has-success .control-label,.has-success .ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>,.has-success .check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>,.has-success .ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>-inline,.has-success .check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>-inline,.has-success.ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a> label,.has-success.check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a> label,.has-success.ra<a href="https://www.f2er.com/tag/dio/" target="_blank" class="keywords">dio</a>-inline label,.has-success.check<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>-inline label {
 color: #3c763d;
}
.has-success .form-control {
 border-color: #3c763d;
 -webkit-<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: inset 0 1px 1px rgba(0,.075);
   <a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: inset 0 1px 1px rgba(0,.075);
}
.has-success .form-control:focus {
 border-color: #2b542c;
 -webkit-<a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: inset 0 1px 1px rgba(0,.075),0 0 6px #67b168;
   <a href="https://www.f2er.com/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: inset 0 1px 1px rgba(0,0 0 6px #67b168;
}
.has-success .input-group-addon {
 color: #3c763d;
 background-color: #dff0d8;
 border-color: #3c763d;
}
.has-success .form-control-<a href="https://www.f2er.com/tag/Feed/" target="_blank" class="keywords">Feed</a>back {
 color: #3c763d;
}
</pre>
</div>
<p><h3>1.6.空间大小</h3></p>
<p>input-lg/input-sm</p>
<p>以上就是本文的全部<a href="https://www.f2er.com/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="https://www.f2er.com/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p><div class="topcard-tags"><a href="/tag/CSSbuju/" class="tag_link" target="_blank">CSS布局</a><a href="/tag/biaodan/" class="tag_link" target="_blank">表单</a><a href="/tag/biaodanp/" class="tag_link" target="_blank">表单</a></div>
                </div>
              </div>
          </div>
            
            <div class="clearfix"></div>

            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <div class="title"><h1>相关文章</h1></div><div class="list_con">
              <div class="title">
                <a href="/bootstrap/997481.html" title="使用BootStrapValidator来完成前端输入验证">使用BootStrapValidator来完成前端输入验证</a>
              </div>
              <div class="summary">BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基于BootStrap...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="/bootstrap/997480.html" title="顶求网首页整体设计思路">顶求网首页整体设计思路</a>
              </div>
              <div class="summary">顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给其他用户。所...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="/bootstrap/997479.html" title="自己手写简约实用的Jquery tabs插件（基于bootstrap环境）">自己手写简约实用的Jquery tabs插件（基于bootstrap环境）</a>
              </div>
              <div class="summary">一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大，也不...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="/bootstrap/997478.html" title="BootStrap中Affix控件的使用方法及如何保持布局的美观">BootStrap中Affix控件的使用方法及如何保持布局的美观</a>
              </div>
              <div class="summary">在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这个问题困扰了...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="/bootstrap/997477.html" title="针对BootStrap中tabs控件的美化和完善">针对BootStrap中tabs控件的美化和完善</a>
              </div>
              <div class="summary">BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何才能在其原有...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="/bootstrap/997476.html" title="BootStrap简介及应用要点">BootStrap简介及应用要点</a>
              </div>
              <div class="summary">BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前...</div>
            </div></div>
            </div>
           
        </div>
      </div>
    <footer id="footer">
    <div class="container">
        <div class="copyright">
            Copyright © 2018 前端之家. 当前版本 V7.0.16<br>
            <span class="ml5">前端之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-10</a>
        </div>
    </div>
</footer>
<script src="/js/base.js"></script>
  </body>
</html>