引导你的网页 5 - 强大的表单

分享于 

46分钟阅读

Web开发

  繁體 雙語

序曲

继续从引导你的网页 4 - 整理表,我们离开。 在本系列中,我们在web窗体上设置了目标,这是今天任何网站不可以或者缺的部分。 web窗体可以包含以下数据输入控件:

  • <输入> 文本字段,密码字段,单选按钮,复选框和提交按钮等类型。
  • <文本> 用于-多行-文本输入和 <选择> 下拉列表。
  • HTML5为输入控制和验证引入了几种新的输入类型。 有些是 邮件 , 日期 , 颜色 以及 url

此外,表单还可以包含字段集。图例和标签元素,这些元素为上面提到的数据输入控件提供辅助功能。

它们一起提供用户界面( 用户界面) 控件,供用户输入和发送信息到服务器。

如果你不熟悉HTML表单,请阅读我关于使用HTML5的 Formidable的文章。

自举表单

让我们用一些练习来热身。 使用下面的代码创建一个简单表单,或者在行下载它

<!DOCTYPEhtml><htmllang="en"><head><title>Formidable Forms</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>Formidable Forms</h2><form><labelfor="name">Name:</label><inputtype="text"id="name"name="name"placeholder="First name, last name"requiredautofocus><br><labelfor="email">Email:</label><inputtype="email"id="email"name="email"placeholder="someone@gmail.com"required><br><labelfor="password">Password:</label><inputtype="password"id="password"name="password"required><br><label>Gender:</label><label><inputtype="radio"id="male"name="gender"value="male">Male</label><label><inputtype="radio"id="female"name="gender"value="female">Female</label><br><label>Hobbies:</label><label><inputtype="checkbox"name="hobbies"value="coding">Coding</label><label><inputtype="checkbox"name="hobbies"value="swimming">Swimming</label><label><inputtype="checkbox"name="hobbies"value="jogging">Jogging</label><br><labelfor="dateofbirth">Date of Birth:</label><inputtype="date"id="dateofbirth"name="dateofbirth"><br><labelfor="favoritecolor">Favorite Color:</label><inputtype="color"id="favoritecolor"name="favoritecolor"><br><labelfor="zodiac">Zodiac:</label><selectid="zodiac"name="zodiac"><optionvalue="aries">Aries</option><optionvalue="taurus">Taurus</option><optionvalue="gemini">Gemini</option></select><br><labelfor="aboutme">About Me:</label><textareaid="aboutme"name="aboutme"rows="3"cols="20"></textarea><br><labelfor="weblink">Web Link:</label><inputtype="url"id="weblink"name="weblink"placeholder="http://"><br><labelfor="portrait">Portrait:</label><inputtype="file"id="portrait"name="portrait"><br><inputtype="submit"value="Sign up"></form></div></body></html>

如何在浏览器上显示它? 如图 1所示,它看起来很糟糕,或者在行view查看它。

Figure 1 : Awful-looking Form

图 1: 难看的外观

如图 1所示,除了 Bootstrap 默认的文本样式外,标签和控件还没有适当的布局和样式设置。 你可以花一些时间编写CSS规则来修正这种不引人注意的形式,或者直接参与。 我选择了第二个选择。

首先,要 Bootstrap 表单,你必须遵循以下三个规则:

  • 包含 role="窗体" 打开中的属性 <窗体> 标签,换句话说, <表单 role="窗体">
  • 组窗体控件及其关联 <标签> ''在包含中 <div> 使用这里属性 class="表单组"<div> 标签,换句话说, <div class="表单组">
  • 添加 窗体控件 对除复选框和单选按钮以外的所有窗体控件类。

让我们从开头开始 <窗体> 标记,Bootstrap 一个单一的单一,并比较代码前和后,你走。"。

  • 打开 <窗体> 标签:
    <!-- Before
    <form>--><!-- After --><formrole="form">
  • 输入类型等输入类型 文本 , 密码 , 邮件 , 日期 , 颜色 , url 以及 文件 :
    <!-- Before
    <label for="name">Name:</label>
     <input type="text" id="name" name="name" placeholder="First name, last name" required autofocus>--><!-- After --><divclass="form-group"><labelfor="name">Name:</label><inputtype="text"class="form-control"id="name"name="name"placeholder="First name, last name"requiredautofocus></div>
  • <选择> :
    <!-- Before
    <label for="zodiac">Zodiac:</label>
    <select id="zodiac" name="zodiac">
    <option value="aries">Aries</option>
    <option value="taurus">Taurus</option>
    <option value="gemini">Gemini</option>
    </select>--><!-- After --><divclass="form-group"><labelfor="zodiac">Zodiac:</label><selectid="zodiac"name="zodiac"class="form-control"><optionvalue="aries">Aries</option><optionvalue="taurus">Taurus</option><optionvalue="gemini">Gemini</option></select></div>
  • <文本> :
    <!-- Before
    <label for="aboutme">About Me:</label>
    <textarea id="aboutme" name="aboutme" rows="3" cols="20"></textarea>--><!-- After --><divclass="form-group"><labelfor="aboutme">About Me:</label><textareaclass="form-control"id="aboutme"name="aboutme"rows="3"cols="20"></textarea></div>
  • <无线电> :
    <!-- Before
    <label>Hobbies:</label>
    <label><input type="checkbox" name="hobbies" value="coding">Coding</label>
    <label><input type="checkbox" name="hobbies" value="swimming">Swimming</label>
    <label><input type="checkbox" name="hobbies" value="jogging">Jogging</label>--><!-- After --><divclass="form-group"><label>Hobbies:</label><divclass="checkbox"><label><inputtype="checkbox"name="hobbies"value="coding">Coding</label></div><divclass="checkbox"><label><inputtype="checkbox"name="hobbies"value="swimming">Swimming</label></div><divclass="checkbox"><label><inputtype="checkbox"name="hobbies"value="jogging">Jogging</label></div></div>
  • <复选框> :
    <!-- Before
    <label for="aboutme">About Me:</label>
    <textarea id="aboutme" name="aboutme" rows="3" cols="20"></textarea>--><!-- After --><divclass="form-group"><labelfor="aboutme">About Me:</label><textareaclass="form-control"id="aboutme"name="aboutme"rows="3"cols="20"></textarea></div>
  • 用 Bootstrap 按钮替换输入输入的提交按钮:
    <!-- Before
    <input type="submit" value="Sign up"> --><!-- After --><divclass="form-group"><buttontype="submit"class="btn btn-default">Sign up</button></div>

请参见下面的完整代码 Bootstrap 表单或者在线下载

<divclass="container"><h2>Vertical Form in Bootstrap</h2><formrole="form"><divclass="form-group"><labelfor="name">Name:</label><inputtype="text"class="form-control"id="name"name="name"placeholder="First name, last name"requiredautofocus></div><divclass="form-group"><labelfor="email">Email:</label><inputtype="email"class="form-control"id="email"name="email"placeholder="someone@gmail.com"required></div><divclass="form-group"><labelfor="password">Password:</label><inputtype="password"class="form-control"id="password"name="password"required></div><divclass="form-group"><label>Gender:</label><divclass="radio"><label><inputtype="radio"id="male"name="gender"value="male">Male</label> 
 </div><divclass="radio"><label><inputtype="radio"id="female"name="gender"value="female">Female</label> 
 </div></div><divclass="form-group"><label>Hobbies:</label><divclass="checkbox"><label><inputtype="checkbox"name="hobbies"value="coding">Coding</label></div><divclass="checkbox"><label><inputtype="checkbox"name="hobbies"value="swimming">Swimming</label></div><divclass="checkbox"><label><inputtype="checkbox"name="hobbies"value="jogging">Jogging</label></div></div><divclass="form-group"><labelfor="dateofbirth">Date of Birth:</label><inputtype="date"class="form-control"id="dateofbirth"name="dateofbirth"></div><divclass="form-group"><labelfor="favoritecolor">Favorite Color:</label><inputtype="color"class="form-control"id="favoritecolor"name="favoritecolor"></div><divclass="form-group"><labelfor="zodiac">Zodiac:</label><selectid="zodiac"name="zodiac"class="form-control"><optionvalue="aries">Aries</option><optionvalue="taurus">Taurus</option><optionvalue="gemini">Gemini</option></select></div><divclass="form-group"><labelfor="aboutme">About Me:</label><textareaclass="form-control"id="aboutme"name="aboutme"rows="3"cols="20"></textarea></div><divclass="form-group"><labelfor="weblink">Web Link:</label><inputtype="url"class="form-control"id="weblink"name="weblink"placeholder="http://"></div><divclass="form-group"><labelfor="portrait">Portrait:</label><inputtype="file"class="form-control"id="portrait"name="portrait"></div><divclass="form-group"><buttontype="submit"class="btn btn-default">Sign up</button></div></form></div>

条条 大陆 通 罗马. 现在,表单将在浏览器上呈现,如图 2所示,或者在line行视图

Figure 2 : Bootstrap's Vertical Form

图 2: Bootstrap 表单的垂直

恭喜你,你已经成功地向适当的控件添加适当的Bootstrap 类,从而成功地 Bootstrap。

请注意默认情况下

  • Bootstrap 将垂直布局表单元素;以及

  • All <input>。<textarea>和 <选择指定的> 控件 窗体控件 类的宽度为 100%。

换句话说,你刚刚创建的是 Bootstrap 表单的垂直。

另外,你可以在其他两个ways-项目中布置表单元素水平

Bootstrap 窗体的inline

如果要使用 Bootstrap 窗体,所有控件和标签将保持对齐状态并放置 side-by-side,并将它的包装到下一行,空间为磅sm大小和更大的viewport (> =768px宽)。sized sized sized,但是 inline 表单将恢复为垂直形式。

若要创建 inline 窗体,只需添加 窗体内联 类,该类用于在前面练习中创建的垂直 Bootstrap 窗体的开始 <form> 标记。换句话说, <窗体 role="窗体"class="表单内联"> 图 2中的垂直表单将变成 inline 一个,如图 3 below 所示,或者在行中查看

Figure 3 : Bootstrap's Inline Form

图 3: Bootstrap 表单的inline

注意,如果 inline 表单包含太多元素,则它看起来。 所以你应该谨慎地使用它。

隐藏标签

为了减少 inline 表单的填充,你可能希望从 inline 表单中删除一些或者全部标签。 然而,没有任何标签会影响屏幕阅读器正确阅读表单内容的能力。 ( 注意屏幕读者是计算机程序,阅读电脑屏幕上显示的文本以帮助视觉受损的用户。 Fret 你还可以拿着 Cake 吃。 简单添加 仅适用于 类隐藏所有设备的标签,但屏幕阅读器除外。 比如,

<divclass="form-group"><labelclass="sr-only"for="name">Name:</label><inputtype="text"class="form-control"id="name"name="name"placeholder="First name, last name"requiredautofocus></div>

Bootstrap 窗体水平

在 Bootstrap 窗体的水平方向上,放置在 窗体组 div将排列 side-by-side。

通常,要使用 Bootstrap 水平布局元素,必须遵循以下三个规则:

  • 添加 窗体水平 类到打开 <窗体> 标签,换句话说, <窗体 role="窗体"class="窗体水平">
  • 添加 控制标签 类到打开 <标签> 控件( 如文本字段或者控件组) 关联的标记,如单选按钮或者复选框。
  • 在 Bootstrap 类中使用适当的网格来排列每对标签和控件或者控件的组。

让我们借用在前面练习中创建的Bootstrap 表单的垂直,并将它的转换为水平形式。 从洞口开始 <窗体> 标签,Bootstrap 在你走的时候一个一个的组成元素。

  • 添加 窗体水平 类到打开 <窗体> 标签:
    <formrole="form"class="form-horizontal">
  • 输入输入控件,例如 文本 , 密码 , 邮件 , 日期 , 颜色 , url 以及 文件 , <选择> 以及 <文本> 添加 控制标签 类和所需的网格类,比如 col-sm-2 到他们 <标签> 标记,并将每个 <输入> 在网格容器中,比如 <div class="。col-sm-10"> 示例中,每个控件及其标签将分别在的十二个列网格中分别包含 span 和 2列。 代码的代码 姓名 字段显示为 below:
    <divclass="form-group"><labelfor="name"class="control-label col-sm-2">Name:</label><divclass="col-sm-10"><inputtype="text"class="form-control"id="name"name="name"placeholder="First name, last name"requiredautofocus></div></div>
  • <选择> :
    <divclass="form-group"><labelfor="zodiac"class="control-label col-sm-2">Zodiac:</label><divclass="col-sm-10"><selectid="zodiac"name="zodiac"class="form-control"><optionvalue="aries">Aries</option><optionvalue="taurus">Taurus</option><optionvalue="gemini">Gemini</option></select></div></div>
  • <文本> :
    <divclass="form-group"><labelfor="aboutme"class="control-label col-sm-2">About Me:</label><divclass="col-sm-10"><textareaclass="form-control"id="aboutme"name="aboutme"rows="3"cols="20"></textarea></div></div>
  • <无线电> :
    <divclass="form-group"><labelclass="control-label col-sm-2">Gender:</label><divclass="radio col-sm-10"><label><inputtype="radio"id="male"name="gender"value="male">Male</label> 
     </div><divclass="radio col-sm-offset-2 col-sm-10"><label><inputtype="radio"id="female"name="gender"value="female">Female</label> 
     </div></div>
  • <复选框> :
    <divclass="form-group"><labelclass="control-label col-sm-2">Hobbies:</label><divclass="checkbox col-sm-10"><label><inputtype="checkbox"name="hobbies"value="coding">Coding</label></div><divclass="checkbox col-sm-offset-2 col-sm-10"><label><inputtype="checkbox"name="hobbies"value="swimming">Swimming</label></div><divclass="checkbox col-sm-offset-2 col-sm-10"><label><inputtype="checkbox"name="hobbies"value="jogging">Jogging</label></div></div>
  • 使用列偏移对提交按钮进行右对齐:
    <divclass="form-group"><divclass="col-sm-offset-2 col-sm-10"><buttontype="submit"class="btn btn-default">Sign up</button></div></div>

参见 below 代码在 Bootstrap 中创建一个水平窗体,或者在 line上下载

<divclass="container"><h2>Horizontal Form in Bootstrap</h2><formrole="form"class="form-horizontal"><divclass="form-group"><labelfor="name"class="control-label col-sm-2">Name:</label><divclass="col-sm-10"><inputtype="text"class="form-control"id="name"name="name"placeholder="First name, last name"requiredautofocus></div></div><divclass="form-group"><labelfor="email"class="control-label col-sm-2">Email:</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="email"name="email"placeholder="someone@gmail.com"required></div></div><divclass="form-group"><labelfor="password"class="control-label col-sm-2">Password:</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="password"name="password"required></div></div><divclass="form-group"><labelclass="control-label col-sm-2">Gender:</label><divclass="radio col-sm-10"><label><inputtype="radio"id="male"name="gender"value="male">Male</label> 
 </div><divclass="radio col-sm-offset-2 col-sm-10"><label><inputtype="radio"id="female"name="gender"value="female">Female</label> 
 </div></div><divclass="form-group"><labelclass="control-label col-sm-2">Hobbies:</label><divclass="checkbox col-sm-10"><label><inputtype="checkbox"name="hobbies"value="coding">Coding</label></div><divclass="checkbox col-sm-offset-2 col-sm-10"><label><inputtype="checkbox"name="hobbies"value="swimming">Swimming</label></div><divclass="checkbox col-sm-offset-2 col-sm-10"><label><inputtype="checkbox"name="hobbies"value="jogging">Jogging</label></div></div><divclass="form-group"><labelfor="dateofbirth"class="control-label col-sm-2">Date of Birth:</label><divclass="col-sm-10"><inputtype="date"class="form-control"id="dateofbirth"name="dateofbirth"></div></div><divclass="form-group"><labelfor="favoritecolor"class="control-label col-sm-2">Favorite Color:</label><divclass="col-sm-10"><inputtype="color"class="form-control"id="favoritecolor"name="favoritecolor"></div></div><divclass="form-group"><labelfor="zodiac"class="control-label col-sm-2">Zodiac:</label><divclass="col-sm-10"><selectid="zodiac"name="zodiac"class="form-control"><optionvalue="aries">Aries</option><optionvalue="taurus">Taurus</option><optionvalue="gemini">Gemini</option></select></div></div><divclass="form-group"><labelfor="aboutme"class="control-label col-sm-2">About Me:</label><divclass="col-sm-10"><textareaclass="form-control"id="aboutme"name="aboutme"rows="3"cols="20"></textarea></div></div><divclass="form-group"><labelfor="weblink"class="control-label col-sm-2">Web Link:</label><divclass="col-sm-10"><inputtype="url"class="form-control"id="weblink"name="weblink"placeholder="http://"></div></div><divclass="form-group"><labelfor="portrait"class="control-label col-sm-2">Portrait:</label><divclass="col-sm-10"><inputtype="file"class="form-control"id="portrait"name="portrait"> 
 </div></div><divclass="form-group"><divclass="col-sm-offset-2 col-sm-10"><buttontype="submit"class="btn btn-default">Sign up</button></div></div></form></div>

代码将在浏览器上创建一个水平 Bootstrap 窗体,如图 4所示,或者在line在线视图。

Figure 4 : Bootstrap's Horizontal Form

图 4: Bootstrap 窗体的水平

在行选项控件中

除了 inline的Bootstrap 窗体,选项控件,换句话说,单选按钮和复选框默认设置为垂直和水平形式。 你可以使用 单选内联复选框内联 使各个选项控件的side-by-side在一行中对齐的类。 请尝试下面的代码,或者在线下载

<formrole="form"><divclass="form-group"><label>Gender:</label><labelclass="radio-inline"><inputtype="radio"id="male"name="gender"value="male">Male
 </label> 
 <labelclass="radio-inline"><inputtype="radio"id="female"name="gender"value="female">Female
 </label></div><divclass="form-group"><label>Hobbies:</label><labelclass="checkbox-inline"><inputtype="checkbox"name="hobbies"value="coding">Coding
 </label><labelclass="checkbox-inline"><inputtype="checkbox"name="hobbies"value="swimming">Swimming
 </label></div></form>

代码将在浏览器上创建一个水平 Bootstrap 窗体,如图 5所示,或者在line在线视图。

Figure 5 : Bootstrap's Inline Option Controls

图 5: Bootstrap 选项控件的inline

控制大小

你可以设置控件的大小不同于 Bootstrap 大小的默认大小。

高度调整大小

使用以下命令创建更小或者更大的控件 输入 sm 或者 输入 lg 分别尝试下面的演示代码,或者在线下载

<divclass="container"><h2>Height Sizing of Controls in Bootstrap</h2><formrole="form"><divclass="form-group"><labelfor="input-default">Default input</label><inputclass="form-control"id="input-default"type="text"placeholder="Default input field."></div><divclass="form-group"><labelfor="input-sm">.input-sm</label><inputclass="form-control input-sm"id="input-sm"type="text"placeholder="Smaller input field."></div><divclass="form-group"><labelfor="input-lg">.input-lg</label><inputclass="form-control input-lg"id="input-lg"type="text"placeholder="Larger input field."></div><divclass="form-group"><labelfor="select-default">Default select</label><selectclass="form-control"id="select-default"><option>Default Option 1</option><option>Default Option 2</option><option>Default Option 3</option></select></div><divclass="form-group"><labelfor="select-sm">.input-sm</label><selectclass="form-control input-sm"id="select-sm"><option>Smaller Option 1</option><option>Smaller Option 2</option><option>Smaller Option 3</option></select></div><divclass="form-group"><labelfor="select-lg">.input-lg</label><selectclass="form-control input-lg"id="select-lg"><option>Larger Option 1</option><option>Larger Option 2</option><option>Larger Option 3</option></select></div></form></div>

如图 6所示查看浏览器上的演示,或者在线查看它

Figure 6 : Bootstrap's Height Sizing of Form Controls

图 6: 表单控件的Bootstrap 大小的高度

组大小调整

在水平形式中,可以在 窗体组 通过添加来缩小或者增大 form-group-sm 或者 form-group-lg 将类分别复制到 <div class="form-group"> 元素。 试用下面的演示代码,或者在线下载

<divclass="container"><h2>Group Sizing in Bootstrap's Horizontal Form</h2><formrole="form"class="form-horizontal"><divclass="form-group form-group-sm"><labelfor="smaller"class="control-label col-sm-2">.form-group-sm</label><divclass="col-sm-10"><inputtype="text"class="form-control"id="smaller"placeholder="Smaller Group."requiredautofocus></div></div><divclass="form-group form-group-lg"><labelfor="larger"class="control-label col-sm-2">.form-group-lg</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="group"placeholder="Larger Group."required></div></div></form></div>

如图 7所示查看浏览器上的演示,或者在线查看它

Figure 7 : Bootstrap's Group Sizing of Form Elements

图 7: 表单元素的Bootstrap 大小调整组

宽度调整

你可以使用 Bootstrap 列的网格将窗体控件的宽度设置为 col-xs-* 请尝试下面的演示代码,或者在线下载

<divclass="container"><h2>Width Sizing of Controls in Bootstrap</h2><formrole="form"><divclass="form-group"><divclass="col-xs-2"><labelfor="colspan2">col-xs-2</label><inputclass="form-control"id="colspan2"type="text"placeholder=".col-xs-2"></div></div><divclass="form-group"><divclass="col-xs-4"><labelfor="colspan4">col-xs-4</label><inputclass="form-control"id="colspan4"type="text"placeholder=".col-xs-4"></div></div><divclass="form-group"><divclass="col-xs-6"><labelfor="colspan6">col-xs-6</label><inputclass="form-control"id="colspan6"type="text"placeholder=".col-xs-6"></div></div></form></div>

如图 8所示查看浏览器上的演示,或者在线查看它

Figure 8 : Bootstrap's Width Sizing of Form Controls

图 8: 表单控件的Bootstrap 大小调整宽度

表单验证反馈

验证通过web表单提交的用户的输入是禁止错误或者丢失数据的。 除了通常的文本反馈,Bootstrap 提供了上下文反馈类,用颜色。图标或者混合来传递不同的验证状态。

彩色反馈

要使用颜色反馈,请添加 成功了 , 有警告 ,或者 有错误 类的开始标记到父类的开始标记 <div> ,换句话说, <div class="表单组"> 任何 .control-label.form-control<div> 将以与成功。警告或者错误的验证结果对应的颜色呈现。 例如输入文本字段使用 成功了 传递验证状态的编码如下:

<divclass="form-group has-success"><labelfor="username"class="control-label col-sm-2">User Name:</label><divclass="col-sm-5"><inputtype="text"class="form-control"id="username"></div></div>

但是,这些彩色反馈类必须基于验证结果以编程方式添加。 这必须由一些前端脚本语言( 如 JavaScript ) 来执行。 请查看下面的演示代码,或者在线下载

<body><divclass="container"><h2>Bootstrap's Form Validation with Colored Feedback</h2><ul><li>Submit empty value to receive the red colored error feedback.</li><li>Submit <code>Peter Leow</code> to receive the green colored success feedback.</li><li>Submit other value to receive the brown colored warning feedback.</li></ul><formrole="form"class="form-horizontal"><divclass="form-group"><labelfor="username"class="control-label col-sm-2">User Name:</label><divclass="col-sm-5"><inputtype="text"class="form-control"id="username"></div></div><divclass="form-group"><divclass="col-sm-offset-2 col-sm-5"><buttontype="submit"class="btn btn-default">Sign up</button></div></div></form></div><script>$("form").submit(function(){
 $selector=$("#username");
 $value=$selector.val().trim();
 $formgroup=$selector.closest(".form-group");
 if ($value==""){
 $formgroup.removeClass('has-success has-warning').addClass('has-error');
 } elseif ($value!="Peter Leow") {
 $formgroup.removeClass('has-success has-error').addClass('has-warning');
 } else {
 $formgroup.removeClass('has-error has-warning').addClass('has-success');
 }
 returnfalse;
});</script></body>

代码包括( 这是一个流行的JavaScript库) 脚本来验证提交的输入,并以编程方式添加相应 成功了 , 有警告 ,或者 有错误 类的名称 <div class="表单组"> 确定是使用显式高度还是测量高度的一种简便方法。

如图 9所示,在浏览器上查看演示,或者在行上查看它。

Figure 9 : Error Feedback

图 9: 错误反馈

Figure 10 : Success Feedback

图 10: 成功反馈

Figure 11 : Warning Feedback

图 11: 警告反馈

图标反馈

除了颜色反馈,Bootstrap 还提供了图标反馈类来传递文本输入控件( 如文本字段)的验证状态。 要使用,添加 有反馈 类的开始标记到父类的开始标记 <div> ,换句话说, <div class="表单组"> 并插入 <span class="glyphicon glyphicon名称 form-control-feedback"> </跨> inside 父对象 <div> 替换 glyphicon名称 使用适当的 glyphicon插件名称,这适合传递特定的验证状态。 例如输入文本字段使用 glyphicons确定 传递验证状态的编码如下:

<divclass="form-group has-feedback"><labelfor="username"class="control-label col-sm-2">User Name:</label><divclass="col-sm-5"><inputtype="text"class="form-control"id="username"><spanclass="glyphicon glyphicon-ok form-control-feedback"></span></div></div>

彩色反馈类似,这些图标反馈类必须基于使用一些前端脚本语言( 如 JavaScript )的验证的结果以编程方式添加。 请查看下面的演示代码,或者在线下载

<body><divclass="container"><h2>Bootstrap's Form Validation with Iconic Feedback</h2><ul><li>Submit empty value to receive <var>glyphicon-remove</var> for error feedback.</li><li>Submit <code>Peter Leow</code> to receive <var>glyphicon-ok</var> for success feedback.</li><li>Submit other value to receive <var>glyphicon-warning-sign</var> for warning feedback.</li></ul><formrole="form"class="form-horizontal"><divclass="form-group"><labelfor="username"class="control-label col-sm-2">User Name:</label><divclass="col-sm-5"><inputtype="text"class="form-control"id="username"></div></div><divclass="form-group"><divclass="col-sm-offset-2 col-sm-5"><buttontype="submit"class="btn btn-default">Sign up</button></div></div></form></div><script>$("form").submit(function(){
 $selector=$("#username");
 $value=$selector.val().trim();
 $formgroup=$selector.closest(".form-group");
 $formgroup.addClass("has-feedback");
 $formgroup.find("span").remove();
 if ($value==""){
 $('<span class="glyphicon glyphicon-remove form-control-feedback"></span>').insertAfter($selector);
 } elseif ($value!="Peter Leow") {
 $('<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>').insertAfter($selector);
 } else {
 $('<span class="glyphicon glyphicon-ok form-control-feedback"></span>').insertAfter($selector);
 }
 returnfalse;
});</script></body>

这段代码与彩色反馈的惟一区别是jQuery脚本。 代码中的jQuery脚本验证提交的输入,并以编程方式添加相应的图标反馈类,以显示不同的状态。

如图 12所示,在浏览器上查看演示,或者在行上查看它。

Figure 12 : Error Feedback using glyphicon-remove Icon

图 12: 使用glyphicon删除 icon的错误反馈

Figure 13 : Success Feedback using glyphicon-ok Icon

图 13: 使用 glyphicon-ok icon的成功反馈

Figure 14 : Warning Feedback using glyphicon-warning-sign Icon

图 14: 使用 glyphicon-warning-sign icon的警告反馈

组合彩色&图标反馈

你可以使用 Bootstrap的颜色和图标反馈以一种的形式获得最好的两个世界。 例如输入文本字段使用 成功了glyphicons确定 传递验证状态是编码 below 并呈现如图 15所示。

<divclass="form-group has-success has-feedback"><labelfor="username"class="control-label col-sm-2">User Name:</label><divclass="col-sm-5"><inputtype="text"class="form-control"id="username"><spanclass="glyphicon glyphicon-ok form-control-feedback"></span></div></div>
Figure 15 : Combined Colored & Iconic Feedback

图 15: 组合彩色&图标反馈

静态控件

当需要以 Bootstrap 格式将纯文本放置在窗体标签旁边时,请使用 <>form-control-static 类属性显示为 below,或者在 line 中将它的下载到 :

Figure 16 : Bootstrap's Form Static Control

图 16: Bootstrap static 控件的形式

Bootstrap 控件状态的形式

Bootstrap 提供自定义样式来传递各种 states- focused focused focused disabled disabled disabled disabled disabled readonly readonly readonly readonly表控件 in。 在浏览器上查看代码及其外观,如所示,或者在 line line上下载该代码:

Figure 17 : Bootstrap's Form Control State

图 17: Bootstrap 控件状态的形式

下一个

你已经到达 Bootstrap 表格的末尾。 等待下一次出货的时候,是时候休息一下了。

在leow博客 Peter Peter Peter Formidable Formidable Formidable Formidable Formidable Formidable your。


相关文章