Bootstrap-表单 - 芒果文档

📌 相关文章

📜 Bootstrap-表单

📅 最后修改于: 2020-10-27 06:04:17 🧑 作者: Mango

在本章中，我们将研究如何使用Bootstrap轻松创建表单。 Bootstrap通过简单的HTML标记和用于各种样式的表单的扩展类使操作变得容易。在本章中，我们将研究如何使用Bootstrap轻松创建表单。

表格布局

Bootstrap为您提供以下类型的表单布局-

垂直(默认)形式
内联表格
水平形式

垂直或基本形式

基本表单结构是Bootstrap附带的。单个表单控件会自动接收某些全局样式。要创建基本表单，请执行以下操作-

将角色表单添加到父
元素。
用类.form-group将标签和控件包装在
中。这是最佳间距所需的。
向所有文本，和<select>元素添加<i>.form-control</i>类。</li> </ul> <div class="demo-view"><a class="demo" href="http://tpcg.io/9UmiAY" rel="nofollow noopener noreferrer" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><form role="form"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter Name"> </div> <div class="form-group"> <label for="inputfile">File input</label> <input type="file" id="inputfile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label><input type="checkbox"> Check me out</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </code></pre> </div> <p><iframe class="result" height="230px" loading="lazy" onload="resizeFrame(this)" src="/bootstrap/src/forms.htm" width="660px"></iframe></p> <h3>内联表格</h3> <p>要创建一个所有元素都是内联，左对齐且标签并排的表单，请将类<i>.form-inline</i>添加到<form>标记中。</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/d83MUb" rel="nofollow noopener noreferrer" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="name">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter Name"> </div> <div class="form-group"> <label class="sr-only" for="inputfile">File input</label> <input type="file" id="inputfile"> </div> <div class="checkbox"> <label><input type="checkbox"> Check me out</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </code></pre> </div> <p><iframe class="result" height="170px" loading="lazy" onload="resizeFrame(this)" src="/bootstrap/src/inline_form.htm" width="660px"></iframe></p> <ul class="list"> <li>默认情况下，Bootstrap中的输入，选择和文本区域的宽度为100％。使用内联表单时，需要在表单控件上设置宽度。</li> <li>使用<i>仅.sr</i>类，您可以隐藏内联表单的标签。</li> </ul> <h3>水平形式</h3> <p>水平表格不仅在标记数量上而且在表格的表示方式上与其他表格不同。要创建使用水平布局的表单，请执行以下操作-</p> <ul class="list"> <li>将<i>水平.form</i>类添加到父<form>元素。</li> <li>用类<i>.form-group</i>将标签和控件包装在<div>中。</li> <li>在标签上添加一类<i>.control-label</i> 。</li> </ul> <div class="demo-view"><a class="demo" href="http://tpcg.io/feD65Y" rel="nofollow noopener noreferrer" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">First Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="Enter First Name"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">Last Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="Enter Last Name"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </code></pre> </div> <p><iframe class="result" height="270px" loading="lazy" onload="resizeFrame(this)" src="/bootstrap/src/horizantale_form.htm" width="660px"></iframe></p> <h2>支持的表单控件</h2> <p>Bootstrap本机支持最常见的表单控件，主要是<i>输入，文本区域，复选框，单选和选择。</i></p> <h3>输入项</h3> <p>最常见的表单文本字段是输入字段。用户将在此处输入大多数基本表单数据。 Bootstrap支持所有本机HTML5输入类型：<i>文本，密码，日期时间，本地日期时间，日期，月份，时间，星期，数字，电子邮件，URL，搜索，电话</i>和<i>颜色</i>。需要正确的<i>类型</i>声明以使<i>输入具有</i>完全样式。</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/Dn2ygZ" rel="nofollow noopener noreferrer" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><form role="form"> <div class="form-group"> <label for="name">Label</label> <input type="text" class="form-control" placeholder="Text input"> </div> </form> </code></pre> </div> <p><iframe class="result" height="100px" loading="lazy" onload="resizeFrame(this)" src="/bootstrap/src/form_control.htm" width="660px"></iframe></p> <h3>文字区</h3> <p>当需要多行输入时，将使用textarea。根据需要更改<i>行</i>属性(更少的行=较小的框，更多的行=较大的框)。</p> <div class="demo-view"><a class="demo" href="http://tpcg.io/00hnnF" rel="nofollow noopener noreferrer" target="_blank"><i class="fa-external-link"></i>现场演示</a></div> <div class="hcb_wrap"> <pre class="prism line-numbers lang-java" data-lang="java"><code class="language-markup"><form role="form"> <div class="form-group"> <label for="name">Text Area</label> <textarea class="form-control" rows="3">

复选框和单选按钮

如果希望用户从预设选项列表中进行选择，则复选框和单选按钮非常有用。

构建表单时，如果希望用户从列表中选择任意数量的选项，请使用复选框。如果要将用户限制为一个选项，请使用单选。
使用.checkbox-inline或.radio-inline类将用于控件的一系列复选框或单选显示在同一行上。

以下示例演示了两种(默认和内联)类型-

现场演示

Example of Default Checkbox and radio button 


   
      Option 1
   



   
      Option 2
   



   
       Option 1
   



   
      
      Option 2 - selecting it will deselect option 1
   


Example of Inline Checkbox and radio button 


   
       Option 1
   
   
   
       Option 2
   
   
   
       Option 3
   
   
   
       Option 1
   
   
   
       Option 2

选择

当您要允许用户从多个选项中进行选择时，将使用一个选择，但默认情况下它仅允许一个。

将 Mutiple Select list

静态控制

当需要在水平表单中的表单标签旁边放置纯文本时，请在

上使用.form-control-static类。

现场演示


   
      Email
      
      
         email@example.com
      
      
   
   
   
      Password

表单控制状态

除了：focus (即，用户单击输入或在其上的选项卡)状态之外，Bootstrap还为禁用的输入和类提供样式，以进行表单验证。

输入焦点

当输入接收到：focus时，将删除输入的轮廓并应用框阴影。

残疾人电话

如果您需要禁用输入，则只需添加disabled属性不仅会禁用它；它还会禁用输入。当光标悬停在元素上时，它也会更改样式和鼠标光标。

禁用的字段集

将Disabled属性添加到

，以立即禁用

中的所有控件。

验证状态

Bootstrap包括错误，警告和成功消息的验证样式。要使用，只需将适当的类( .has-warning，.has-error或.has-success )添加到父元素。

以下示例演示了所有表单控制状态-

现场演示


   
      Focused
      
         
      
   
   
   
      
         Disabled
      
      
         
      
   
   
   
      
         
            Disabled input (Fieldset disabled)
         
         
            
          
      
      
      
          
            Disabled select menu (Fieldset disabled)
         
         
             
         
       
   
   
   
      
         Input with success
      
      
         
      
   
   
   
      
         Input with warning
      
      
         
      
   
   
   
      
         Input with error

表单控制大小

您可以分别使用.input-lg和.col-lg- *等类来设置表单的高度和宽度。以下示例演示了这一点-

现场演示

帮助文字

Bootstrap表单控件可以具有与输入一起流动的块级帮助文本。要添加全宽内容块，请在之后使用.help-block 。以下示例演示了这一点-

现场演示


   Example of Help Text
   
   
   
      A longer block of help text that breaks onto a new line and may extend beyond one line.