表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基础、内联、横向)
表单的元素
input textarea select checkbox radio(checkbox和radio是input的特殊类型)
其他标签
form fieldset legend
1.1.基础表单
<!--基础表单： 1.向父 <form> 元素添加 role="form"。 2.把标签label和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。因为form-group提供了margin 3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。--> <form role="form"> <fieldset> <legend>用户登录</legend> <div> <label for="name">姓名</label> <input type="text" placeholder="请输入名称"> </div> <div> <label for="psd">密码</label> <input type="text" placeholder="请输入密码"> </div> <div> <label><input type="checkbox">记住密码</label> </div> <button type="submit">登录</button> </fieldset> </form>
1.2.内联表单
<!-- 内联表单： 如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline --> <form role="form"> <fieldset> <legend>用户登录</legend> <div> <label for="name">姓名</label> <input type="text" placeholder="请输入名称"> </div> <div> <label for="psd">密码</label> <input type="text" placeholder="请输入密码"> </div> <div> <label><input type="checkbox">记住密码</label> </div> <button type="submit">登录</button> </fieldset> </form>
1.3.横向表单
<!-- 横向表单： 1.向父 <form> 元素添加 class .form-horizontal。 2.把标签和控件放在一个带有 class .form-group 的 <div> 中。 3.向标签添加 class .control-label。 4.要实现横向表单，还要用栅格类--> <form role="form"> <fieldset> <legend>用户登录</legend> <div> <label for="name">姓名</label> <div> <input type="text" placeholder="请输入名称"> </div> </div> <div> <label for="psd">密码</label> <div> <input type="text" placeholder="请输入密码"> </div> </div> </fieldset> </form>
1.4.表单控件
input元素：
使用input元素的时候，必须声明type类型，否则可能引起问题。
select元素：
多行选择设置multiple=”multiple”
textarea元素：
textarea元素定义了rows数字即可定义大文本框的高度，cols宽度。但是textarea应用了form-control央视，则cols无效。
checkbox和radio(是两个特殊的type)
注意使用的时候，每个input外部用label包住，并且在最外层用容器元素宝珠，并应用相应的.checkbox和.radio样式。
//使用 <div> <label><input type="checkbox">学习前端</label> </div> <div> <label><input type="radio" value="male">男生</label> </div> <div> <label><input type="radio" value="female">女生</label> </div>
//源码 //让单选框和复选框都能左右和上下居中 .radio, .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; } //内部有label的话，内联显示 .radio label, .checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: normal; cursor: pointer; }
同时可以内联显示，在labelshang添加checkbox-inline或者radio-inline
1.5.空间状态
焦点状态、禁用状态、验证提示状态
焦点状态：
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
禁用状态：
对 添加 disabled 属性来禁用 内的所有控件。
验证提示状态：
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
–对文字、边框和阴影设置的颜色不同
<div> <label for="inputWarning">输入长度不够!</label> <input type="text"> </div> <div> <label for="inputError">输入不符合要求！</label> <input type="text"> </div> <div> <label for="inputSuccess">输入文本符合要求！</label> <input type="text"> <span></span> </div>