Bootstrap表单控件学习使用

Bootstrap表单控件的学习使用，供大家参考，具体内容如下

输入框（Input）

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。 Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

rush:xhtml;">

这里写图片描述

文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。（超过这个值就会产生滚动条）

rush:xhtml;">

</div>
</form>
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.jb51.cc/file_images/article/201703/2017030714543945.png" /></p></p>
<p><h3>复选框（Check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>）和单选框（Ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>）</h3> 
</p>
<p>（1）复选框和单选按钮用于让<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>从一系列预设置的选项中进行选择。 
（2）当创建表单时，如果您想让<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>从列表中选择若干个选项时，请使用 check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>。如果您限制<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>只能选择<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>选项，请使用 ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>。 
（3）对一系列复选框和单选框使用 .check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline 或 .ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>-inline class，控制它们<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>在同一行上。</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;">
<label for="name"><a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认的复选框和单选按钮的实例</label>
<div class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>">
 <label>
  <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="">选项1
 </label>
</div>
<p><div class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"></p>
<label>
  <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="">选项2
 </label>
</div>
<p><div class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"></p>
<label>
  <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="">选项3
 </label>
</div>
<p><div class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>"></p>
<label>
  <input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>选项1
 </label>
</div>
<p><div class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>"></p>
<label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>选项2- 选择它将会取消选择选项 1
 </label>
</div>
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.jb51.cc/file_images/article/201703/2017030714543946.png" /></p></p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;">
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
 <label class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline">
  <input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="">选项1
 </label>
<p><label class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline"><br />
<input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="">选项2</p>
</label>
<p><label class="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-inline"><br />
<input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" value="">选项3</p>
</label>
<p><label class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>-inline"></p>
<input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>选项1
 </label class="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>-inline">
<label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>选项2
 </label>
</div>
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.jb51.cc/file_images/article/201703/2017030714543947.png" /></p></p>
<p>选择框（Select） 
（1）当您想让<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>从多个选项中进行选择，但是<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认情况下只能选择<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>选项时，则使用选择框。 
（2）使用 <select> 展示列表选项，通常是那些<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>很熟悉的选择列表，比如州或者数字。 
（3）使用 multiple=”multiple” 允许<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>选择多个选项。</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;">
<form role="form">
 <div class="form-group>
  <label for="name">选择列表</label>
  <select class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>
<p><label for="name">可多选的选择列表</label></p>
<select class="form-control" multiple>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>
 </div>
</form>
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.jb51.cc/file_images/article/201703/2017030714543948.png" /></p></p>
<p><h3>静态控件</h3> 
</p>
<p>需要在<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>水平表单内的表单<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>后放置纯文本时，请在<p>上使用 class .form-control-static。</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;">
<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
   <p class="form-control-static">email@example.com</p>
  </div>
 </div>
<p><div class="form-group"><br />
<label for="inputPassword" class="col-sm-2 control-label">密码</label><br />
<div class="col-sm-10"><br />
<input type="password" class="form-control" id="inputPassword" placeholder="请输入密码"></p>
</div>
 </div>
</form>
</pre>
</div>
<p style="text-align: center"><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.jb51.cc/file_images/article/201703/2017030714544049.png" /></p></p>
<p><h3>表单控件状态</h3> 
</p>
<p>（1）除了 :focus 状态（即，<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。 
（2）输入框焦点：当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-shadow。 
（3）禁用的输入框 input：如果您想要禁用<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>输入框 input，只需要简单地<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled <a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。 
（4）禁用的字段集 fieldset：对 <fieldset> <a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a> <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled <a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>来禁用 <fieldset> 内的所有控件。 
（5）验证状态：Bootstrap 包含了<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>、警告和成功消息的验证样式。只需要对父元素简单地<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:xhtml;">
<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label">聚焦</label>
  <div class="col-sm-10">
   <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
  </div>
 </div>
<p><div class="form-group"><br />
<label for="inputPassword" class="col-sm-2 control-label">禁用</label><br />
<div class="col-sm-10"></p>
<input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
  </div>
 </div>
<fieldset disabled>
  <div class="form-group">
   <label for="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled）</label>
   <div class="col-sm-10">
    <input type="text" id="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abledTextInput" class="form-control" placeholder="<a href="https://www.jb51.cc/tag/jinzhi/" target="_blank" class="keywords">禁止</a>输入">
   </div>
  </div>
<p><div class="form-group"><br />
<label for="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abledSelect" class="col-sm-2 control-label">禁用选择<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>（Fieldset <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled）</label><br />
<div class="col-sm-10"><br />
<select id="<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abledSelect" class="form-control"></p>
<option><a href="https://www.jb51.cc/tag/jinzhi/" target="_blank" class="keywords">禁止</a>选择</option>
    </select>
   </div>
  </div>
 </fieldset>
<p><div class="form-group has-success"><br />
<label class="col-sm-2 control-label" for="inputSuccess">输入成功</label><br />
<div class="col-sm-10"><br />
<input type="text" class="form-control" id="inputSuccess"></p>
</div>
 </div>
<p><div class="form-group has-warning"><br />
<label class="col-sm-2 control-label" for="inputWarning">输入警告</label><br />
<div class="col-sm-10"><br />
<input type="text" class="form-control" id="inputWarning"></p>
</div>
 </div>
<p><div class="form-group has-error"><br />
<label class="col-sm-2 control-label" for="inputError">输入<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a></label><br />
<div class="col-sm-10"><br />
<input type="text" class="form-control" id="inputError"></p>
</div>
 </div>
</form>
</pre>
</div>
<p><p class="pic_center"><img title="" alt="这里写图片描述" src="https://files.jb51.cc/file_images/article/201703/2017030714544050.png" /></p></p>
<p><h3>表单控件大小</h3> 
</p>
<p>可以分别使用 class .input-lg 和 .col-lg-* (<input>)来设置表单的高度和宽度。</p>
<p>以上就是本文的全部<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/biaodankongjian/" 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="https://m.jb51.cc/bootstrap/4738675.html" title="Bootstrip HTML 查询搜索常用格式模版">Bootstrip HTML 查询搜索常用格式模版</a>
              </div>
              <div class="summary">Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/bootstrap/4738674.html" title="如何在按钮上加红色数字">如何在按钮上加红色数字</a>
              </div>
              <div class="summary">如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/bootstrap/4738673.html" title="让两个按钮左右排列">让两个按钮左右排列</a>
              </div>
              <div class="summary">要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/bootstrap/4738672.html" title="status能否设置为布尔值类型，前端采用复选框形式">status能否设置为布尔值类型，前端采用复选框形式</a>
              </div>
              <div class="summary">是的，可以将status设置为布尔类型，这样可以在前端使用复选...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2022/10-08/13/3873491c2cd9a95fadbb4d45bbe243d6.jpg" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/bootstrap/3764763.html" title="Bootstrap 按钮总结">Bootstrap 按钮总结</a>
              </div>
              <div class="summary">前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/bootstrap/3764762.html" title="Python学习-day52-bootstrap">Python学习-day52-bootstrap</a>
              </div>
              <div class="summary">起步导入：<linkrel="stylesheet"href="b...</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号-8</a>
        </div>
    </div>
</footer>
<script>
(function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
<script src="https://m.jb51.cc/js/count.js"></script>
  </body>
</html>