bootstrap表单

一、表单基本结构

举例说明：表单内的两个控件以水平方式显示

<form class="form-horizontal" role="form">

          <div class="form-group">

                <label>注册名</label>

                <input type="text "  class="form-control"  placeholder=" 请填写注册名 " >

          </div>

           <div class="form-group">

                <label>联系方式</label>

                <input type="text "  class="form-control"  placeholder=" 请填写绑定的手机号 " >

          </div>

</form>

1、表单内控件水平显示：<form class="form-horizontal" role="form">

      role="form"：扮演表单角色

      表单内联：<form class="form-inline" role="form">

2、表单容器：class="form-group"

3、bootstrap定义的表单中文本框的格式：class="form-control"

表示表单宽度100%，浅灰色的边框，4px的圆角，鼠标聚焦时阴影和边框有明显的变化效果，placeholder字体颜色为#999

只有文本框才会使用 class="form-control"，比如文本框、下拉框

4、隐藏label标签：<label class="sr-only">……</label>

简单记忆：大标签<form>--容器<div class="form-group">--小标签<label>--表单属性

                

 

二、表单的文本框（text）、文本域（textarea）、单选按钮（radio）、复选框（checkbox）、下拉框（select）

文本框：

<form role="form">

<div class="form-group">

     <label>……</label>

     <input type="text" class="form-control" placeholder="  ">

</div>

</form>

文本域：

<form role="form">

<div class="form-group">

     <label>……</label>

     <textarea class="form-control" row="3">

</div>

</form>

单选按钮：

<form role="form">

<div class="form-group">

<div class="radio">

     <label class="radio-inline">

     <input type="radio"  id="sex" name="girl">

    女生

    </label>

</div>

<div class="radio">

     <label class="radio-inline">

     <input type="radio"  id="sex" name="boy">

   男生

    </label>

</div>

</div>

</form>

值得注意：<div>需要声明类名为radio；id名相同，才能进行二选一；单个单选按钮包含在<label>标签，否则按钮和文字不在同一水平线上

复选框：

<form role="form">

<div class="form-group">

<p>你喜欢的水果是：</p>

<div class="checkbox">

     <label class="checkbox-inline">

     <input type="checkbox"   value=" ">

    苹果

    </label>

</div>

<div class="checkbox">

     <label class="checkbox-inline">

     <input type="checkbox"  value="  " >

   梨子

    </label>

</div>

<div class="checkbox">

     <label class="checkbox-inline">

     <input type="checkbox"  value="  ">

  石榴

    </label>

</div>

</div>

</form>

下拉框：

<form role="form">

<div class="form-group">

<select class="form-control" >

<option>广西壮族自治区</option>

<option>广东省</option>

<option>四川省</option>

</select>

</div>

</form>

三、表单控件状态：验证状态

1、表示警告状态（黄色）：.has-warning

2、表示错误状态（红色）：.has-error

3、表示成功状态（绿色）：.has-success

四、表单控件状态：禁用状态

禁用有两种方式：

1、可以禁止元素默认状态：class="disabled"

2、不会禁止元素默认状态：disabled="disabled"

3、上述两种方法都是在表单控件里添加禁用属性代码

4、特例存在的标签，颜色变灰，但没有被禁用：<legend>……</legend>

 

转载于:https://www.cnblogs.com/love-or/p/8889523.html