When the whole world is about to rain, let's make it clear in our heart together

热爱前端开发,专注于前端

bootstrap-表单

<!DOCTYPE html>  
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!--表单的应用fieldset 将表单内的相关元素分组-->
<form  >
            <div class="form-group">
                    <div class="col-xs-6">
                          <input class="form-control input-lg" type="text" placeholder="文本框">
                   </div>
                    <div class="col-xs-6">
                        <input class="form-control input-lg" id="disabledInput" type="text" placeholder="禁用的文本框" disabled>
                     </div>
             </div> 

</form>
<!-- 引入fieldset的表单 -->
<form role="form">
    <fieldset disabled>
              <div class="form-group">
                        <label for="disabledTextInput">禁用的输入框</label>
                        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
             </div>
             <div class="form-group">
                        <label for="disabledSelect">禁用的下拉框</label>
                       <select id="disabledSelect" class="form-control">
                        <option>不可选择</option>
                       </select>
             </div>
            <div class="checkbox">
                       <label>
                       <input type="checkbox"> 无法选择
                      </label>
           </div>
           <button type="submit" class="btn btn-primary">提交</button>
  </fieldset>
</form> 

<!--  加了lenged属性 -->
<form role="form">
            <fieldset disabled>
                          <legend><input type="text" class="form-control" placeholder="颜色变灰,但没被禁用" ></legend>
                           <div class="form-group">
                                    <label for="disabledTextInput">禁用的输入框</label>
                                    <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
                          </div>
                          <div class="form-group">
                                    <label for="disabledSelect">禁用的下拉框</label>
                                    <select id="disabledSelect" class="form-control">
                                    <option>不可选择</option>
                                    </select>
                          </div>
                          <div class="checkbox">
                                   <label>
                                    <input type="checkbox"> 无法选择
                                    </label>
                          </div>
                               <button type="submit" class="btn btn-primary">提交</button>
             </fieldset>
</form> 
<!--  禁用的表单,只对button   select   input等禁用,而对于其它的项legend并不起作用--> 

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>
<!--  禁止用户修改输入框中的内容,处于只读状态输入框颜色更浅,但是保留标准的鼠标状态 -->
<input  class="form-control  has-feedback"  type="text"   placeholder="Readonly  input here.."  readonly>
<br><br><br>
<!-- 状态监控 -->
<div  class="form-group  has-success">
          <label  class="control-label"  for="inputSuccess">Input  success</label>
          <input  type="text"  class="form-control"  id="inputSuccess">
</div>
<div  class="form-group  has-warning">
          <label  class="control-label"  for="inputSuccess">Input  warning</label>
          <input  type="text"  class="form-control"  id="inputSuccess">
</div>
<div  class="form-group  has-error">
          <label  class="control-label"  for="inputSuccess">Input  error</label>
          <input  type="text"  class="form-control"  id="inputSuccess">
</div>

<!-- 图标结合使用 -->
<form class="form-inline">
             <div class="form-group has-success has-feedback">
                                <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
                                 <div class="col-sm-9">
                                        <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
                                 <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                                 <span id="inputSuccess3Status" class="sr-only">(success)</span>
                                </div>
             </div>
              <div class="form-group has-success has-feedback">
                            <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
                            <div class="col-sm-9">
                                        <div class="input-group">
                                <span class="input-group-addon">@</span>
                                <input type="text" class="form-control" id="inputGroupSuccess2" 
aria-describedby
="inputGroupSuccess2Status"> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputGroupSuccess2Status" class="sr-only">(success)</span> </div> </div> </form> <form class="form-inline"> <div class="form-group has-success has-feedback form-group"> <label class="control-label" for="inputGroupSuccess">Input group with success</label> <div class="input-group"> <span class="input-group-addon">search</span> <input type="text" class="form-control input-sm" id="inputGroupSuccess" aria-describedby="inputGroupSuccessStatus"> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputGroupSuccessStatus" class="sr-only">(success)</span> </div> </form> <br><br><br><br><br><br> <!-- help-block --> <label class="sr-only" for="inputHelpBlock">Input some text</label> <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> <span id="helpBlock" class="help-block">A block of text that breaks onto a </span> </body> </html>

 

posted @ 2016-06-03 10:23  婷风  阅读(224)  评论(0编辑  收藏  举报