bootstrap表单

一、text文本框

<label for="username">用户名</label>
<input id="username" type="text" placeholder="输入您的用户名" class="span3"/>
<p class="help-block">请输入您登录时使用的用户名</p>

bootstrap表单之text文本框

1、placeholder属性
该属性值会显示在文本框内部作为输入内容提示文字。
2、input-mini input-small input-medium 类
加上述类可以控制文本框的长度。
3、布局用的网格类，如span3
加上述类可以控制文本框的长度。span3类让文本框占用三个网格的宽度。
4、label标签
为文本框添加描述用的标签。
-for属性
for的属性值为input标签中id的值。表示该标签专用于描述id值对应的文本框。
5、span 、p标签
为文本框添加更加详细的说明文字。其中span标签用于添加行内的说明文字，文字与input元素显示在同一行；p标签可用于换行添加说明文字。
-help-block类
控制标签另起一行显示说明文字。
-help-inline类
控制标签在同行显示说明文字。
6、text文本框前缀与后缀

<div class="input-prepend input-append">
<span class="add-on">¥</span><input type="text"/><span class="add-on">.00</span>
</div>

含前缀后缀的文本框

1)span标签
用于包含前缀或后缀内容。与 input标签同处一行，用于input标签前面（前缀）或后面（后缀），与input标签之间不能换行不能有空格。
-add-on类
用于包含前缀或后缀的span标签。
2)div标签
用于包含span和input整体。
-input-prepend类
用于包含前缀文本框的div标签。
-input-append类
用于包含后缀文本框的div标签。

<div class="input-append">
<input type="text"/><button class="btn" type="button">搜索</button>
</div>

后缀为按钮的文本框

3)button标签
bootstrap中的按钮标签。可用作文本框后缀。

二、radio单选按钮

<label>您的性别</label>
<label class="radio">
<input type="radio" name="gender" value="male"/>男</label>
<label class="radio">
<input type="radio" name="gender" value="female"/>女</label>
<label class="radio">
<input type="radio" name="gender" value="other"/>其他</label>

radio单选按钮

1、name属性
name属性值相当于单选按钮所属的分组的名称，同一组（name值相同）内按钮只能选一个。
2、value属性
value属性值相当于单选按钮对应的值
3、label标签
1)描述标签，用于包含单个单选按钮和按钮描述信息。
-radio类
设定单选按钮样式。
2)用于包含问题描述，位于一组单选按钮的最前面。

三、checkbox复选框

<label>您喜欢的水果</label>
<label class="checkbox">
<input type="checkbox" name="fruit" value="apple"/>苹果</label>
<label class="checkbox">
<input type="checkbox" name="fruit" value="lemon"/>柠檬</label>
<label class="checkbox">
<input type="checkbox" name="fruit" value="grape"/>葡萄</label>

checkbox复选框

1、name属性
name属性值相当于复选框所属分组的名称，同一组（name值相同）内按钮可选多个。
2、value属性
value属性值相当于选项按钮对应的值
3、label标签
1)描述标签，用于包含单个按钮和按钮描述信息。
-checkbox类
设定复选框样式。
-inline类
使复选框在同一行显示。（默认情况下每个选项另起一行。）亲测不管用？！！
2)用于包含问题描述，位于一组复选框的最前面。

四、select选择列表

<label for="somewhere">想去的地方</label>  
<select id="somewhere" multiple="multiple">
<option value="Italy">意大利</option>
<option value="China">中国</option>
<option value="USA">美国</option>
</select>

样式略怪的选择列表
1、label标签
用于包含问题描述，位于选择列表的最前面。
-for属性
for的属性值为select标签中id的值。表示该标签专用于描述id值对应的选择列表。
2、select标签
用于包含选择列表
-id属性
选择列表的id值。
-multiple属性
属性值为multiple,设置选择列表为多选列表。(不设置该属性时，默认为单选列表。)
多选时需要按住ctrl键或者shift键，并用鼠标点选
3、option标签
用于包含选择列表的每个选项
-value属性
value属性值相当于选项对应的值

五、表单排版

<label for="username">用户</label>
<input id="username" type="text">
<p class="help-block">请输入您想要注册的用户名</p>

<label for="passward">密码</label>
<input id="passward" type="text">
<p class="help-block">请输入您想要注册的用户名</p>

<button type="submit" class="btn btn-primary">登录</button>

表单初始样式

1、fieldset标签
用于包含类似的表单元素，构成一个字段集，从而将表单元素分组。
2、legend标签
用于给字段集添加描述文字。文字默认带有灰色下划线。
3、form标签
用于包含所有表单元素。
-form-horizontal类
4、div标签
-带有controls类的div标签
-带有control-group类的div标签
-带有form-actions类的div标签。标签外边有灰色背景（此处没显示灰色背景）。

排版后的表单样式