表单常见三种样式（普通，行内，水平）以及各种常见控件样式均在例中，没有什么特别要注意的
<!DOCTYPE html> <html> <head> <title>03_form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" media="screen" href="../css/bootstrap.min.css"> <link rel="stylesheet" media="screen" href="../css/bootstrap-theme.min.css"> <script src="../js/jquery-1.11.2.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3 class="page-header">1 基本表单</h3> <p>单独的表单控件会被自动赋予一些全局样式。</p> <p>所有设置了.form-control的<code><input></code>、<code><textarea></code>和<code><select></code>元素</p> <p>都将被默认设置为width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列</p> <form role="form1"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <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> <h3 class="page-header">2 行内表单，排列更紧凑 .form-inline</h3> <p><font style="color: red">注：一定要设置label:如果你没有为每个输入控件设置label,屏幕阅读器将无法正确识读。</font></p> <p><font style="color: red">对于这些内联表单,你可以通过为label设置.sr-only已将其隐藏</font></p> <form class="form-inline" role="form2"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> <h3 class="page-header">3 水平排列表单 .form-horizontal</h3> <p>改变<code>.form-group</code>的行为，使其表现为栅格系统中的行(row)，因此就无需再使用<code>.row了。</code></p> <form class="form-horizontal" role="form3"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </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> <h3 class="page-header">4 表单控件</h3> <div class="row"> <div class="col-md-6"> <h4>1 Checkbox</h4> <div class="checkbox"> <label> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> </div> </div> <div class="col-md-6"> <h4>2 textarea</h4> <textarea class="form-control" rows="3"></textarea> </div> <div class="clearfix visible-md"></div> <div class="col-md-6"> <h4>3 行内checkbox和radio</h4> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label><br> <label class="radio-inline"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option1"> A </label> <label class="radio-inline"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> B </label> <label class="radio-inline"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option3"> C </label> </div> <div class="col-md-6"> <h4>4 Radio</h4> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> </div> <div class="clearfix visible-md"></div> <div class="col-md-6"> <h4>5 静态控件</h4> <form class="form-horizontal" role="form4"> <div class="form-group"> <label class="col-sm-2 control-label">StaticText</label> <div class="col-sm-10"> <p class="form-control-static"> 在水平布局的表单中，如果需要将一行纯文本放置于label的同一行， 为<code><p></code>元素添加<code>.form-control-static</code>即可。(这段话就是静态文本) </p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </form> </div> <div class="col-md-6"> <h4>6 Select</h4> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select><br> <select multiple class="form-control"> <option>加了multiple直接列出所有选项</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="col-md-12"> <h4>7 禁用输入</h4> <input class="form-control" id="disabledInput" type="text" placeholder="直接加disabled就禁用输入" disabled> </div> <div class="col-md-12"> <h4>8 区域禁用IE9以上有效</h4> <p>为<code><fieldset></code>设置disabled属性可以禁用<code><fieldset></code>中包含的所有控件</p> <p><code><a></code>标签的链接功能不受影响</p> <p>例如这个class只改变<a class="btn btn-default">按钮的外观，并不能禁用其功能。建议自己通过JavaScript代码禁用链接功能。</p> <form role="form5"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">Disabled input</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div> <div class="form-group"> <label for="disabledSelect">Disabled select menu</label> <select id="disabledSelect" class="form-control"> <option>Disabled select</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </fieldset> </form> </div> <div class="col-md-6"> <h4>9 校验状态</h4> <p>Bootstrap对表单控件的校验状态，如<code>error</code>、<code>warning</code>和<code>success</code>状态，都定义了样式。</p> <p>使用时，添加<code>.has-warning</code>、<code>.has-error</code>或<code>.has-success</code>到这些控件的父元素即可。</p> <p>任何包含在此元素之内的<code>.control-label</code>、<code>.form-control</code>和<code>.help-block</code>都将接受这些校验状态的样式。</p> <div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <input type="text" class="form-control" id="inputSuccess"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <input type="text" class="form-control" id="inputWarning"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input with error</label> <input type="text" class="form-control" id="inputError"> </div> </div> <div class="col-md-6"> <h4>10 控件尺寸</h4> <p>通过<code>.input-lg</code>之类的class可以为控件设置高度, </p> <p>通过<code>.col-lg-*</code>之类的class可以为控件设置宽度。高度尺寸</p> <input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> <select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select> </div> <div class="clearfix visible-md visible-xs visible-sm visible-lg"></div> <div class="col-md-6"> <h4>11 列尺寸</h4> <P>只要父类有<code>.col-*-*</code>的class就行</P> <div class="col-md-3"> <input type="text" class="form-control" placeholder=".col-md-3"> </div> <div class="col-md-4"> <input type="text" class="form-control" placeholder=".col-md-4"> </div> <div class="col-md-5"> <input type="text" class="form-control" placeholder=".col-md-5"> </div> </div> <div class="col-md-6"> <h4>12 帮助文本</h4> <span class="help-block">自己独占一行或多行的块级帮助文本。</span> <span class="help-block">自己独占一行或多行的块级帮助文本。</span> </div> </div> </div> </body> </html>
