《响应式页面设计》-项目6-任务6.3

6.3.1表单 Bootstrap通过一些简单的HTML标签和扩展的类即可创建出不同样式的表单。表单元素中的文本控件如<input>、<textarea>、<checkbox>、<radio>、<select>在使用.form-control类的情况下，宽度都是设置为100%。 Bootstrap表单布局分为堆叠表单(全屏宽度垂直方向)和内联表单（水平方向）。1、表单1.堆叠表单2.内联表单1堆叠表单以下示例使用两个输入框，一个提交按钮来创建堆叠表单，效果如图6-26所示。1堆叠表单以下示例使用两个输入框，一个提交按钮来创建堆叠表单，效果如图6-26所示。<divclass="container"><h2>堆叠表单</h2><form> <divclass="form-group"> <labelfor="email">用户名:</label> <inputtype="email"class="form-control"id="email"placeholder="输入用户名"> </div> <divclass="form-group"> <labelfor="pwd">密码:</label> <inputtype="password"class="form-control"id="pwd"placeholder="输入密码"> </div> <!--<divclass="form-check"> <labelclass="form-check-label"><inputclass="form-check-input"type="checkbox">Rememberme</label> </div>--> <buttontype="submit"class="btnbtn-primary">提交</button></form></div>2内联表单

所有内联表单中的元素都是左对齐的。注意：在屏幕宽度小于576px时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。内联表单需要在<form>元素上添加.form-inline类，我们现在将上述代码增加该类且去掉form-group之后，效果如图6-27所示。6.3.2表单控件Bootstrap4支持以下表单控件：input、textarea、checkbox、radio、select。2、表单控件1.BootstarpInput2.Bootstarptextarea3.Bootstrap复选框(checkbox)与单选框(Radio)4.Bootstrap

select下拉菜单1BootstrapInput

Bootstrap支持所有的HTML5输入类型:text,password,datetime,datetime-local,date,month,time,week,number,email,url,search,tel以及color。

注意：如果input的type属性未正确声明，输入框的样式将不会显示。

以下示例使用两个input元素，一个是text，一个是password，效果如图6-28所示。2Bootstraptextarea<divclass="container"><h2>表单控件:textarea</h2><p>以下示例演示了textarea的样式。</p><form><divclass="form-group"><labelfor="comment">评论:</label><textareaclass="form-control"rows="5"id="comment"></textarea></div></form></div>3Bootstrap复选框(checkbox)与单选框(Radio)使用.form-check可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现，复选框用于在列表中选择一个或多个选项，单选框则用于多许多选项中选择一个。复选框和单选框也是可以禁用的，只要not-allowed在父级的悬停上提供定义，<label>需要将该.disabled类添加到父级.form-check，同时控件也会淡化文字颜色以灰色显示禁用状态。以下示例包含了三个选项，最后一个是禁用的，效果如图6-30所示。<divclass="container"><h2>表单控件:checkbox</h2><p>以下示例包含了三个选项。最后一个是禁用的：</p><form><divclass="form-check"><labelclass="form-check-label"><inputtype="checkbox"class="form-check-input"value="">Option1</label></div><divclass="form-check"><labelclass="form-check-label"><inputtype="checkbox"class="form-check-input"value="">Option2</label></div><divclass="form-checkdisabled"><labelclass="form-check-label"><inputtype="checkbox"class="form-check-input"disabled>Option3</label></div></form></div>3Bootstrap复选框(checkbox)与单选框(Radio)使用.form-check-inline类可以让选项显示在同一行上，<divclass="form-checkform-check-inline">，效果如图6-31所示。3Bootstrap复选框(checkbox)与单选框(Radio)单选框用于让用户从一系列预设置的选项中进行选择，只能选一个。以下示例包含了三个选项。最后一个是禁用的，效果如图6-32所示。<h2>表单控件:radio</h2><p>以下示例包含了三个选项。最后一个是禁用的：</p><form><divclass="radio"><label><inputtype="radio"name="optradio">Option1</label></div><divclass="radio"><label><inputtype="radio"name="optradio">Option2</label></div><divclass="radiodisabled"><label><inputtype="radio"name="optradio"disabled>Option3</label></div></form></div>3Bootstrap复选框(checkbox)与单选框(Radio)使用.radio-inline类可以让选项显示在同一行上，<labelclass="radio-inline"></label>，如图6-33所示4Bootstrap

select下拉菜单当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。以下示例包含了两个下拉菜单，效果如图6-34所示。4Bootstrap

select下拉菜单<divclass="container"><h2>表单控件:select</h2><p>以下表单包含了两个下拉菜单(select列表):</p><form><divclass="form-group"><labelfor="sel1">单选下拉菜单:</label><selectclass="form-control"id="sel1"><option>1</option><option>2</option><option>3</option><option>4</option></select><br><labelfor="sel2">多选下拉菜单(按住shift键，可以选取多个选项):</label><selectmultipleclass="form-control"id="sel2"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div>6.3.3输入框组3、输入框组1.输入框组2.输入框大小3.多输入框和多文本4.复选框和单选框5.输入框添加按钮组6.设置下拉菜单7.输入框标签6.3.3输入框组

1输入框组

我们可以使用.input-group类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用.input-group-prepend类可以在输入框的的前面添加文本信息，使用.input-group-append类添加在输入框的后面，使用.input-group-text类来设置文本的样式，效果如图6-35所示。6.3.3输入框组

1输入框组

<divclass="containermt-3"> <h3>输入框组</h3> <formaction="/action_page.php"> <divclass="input-groupmb-3"> <divclass="input-group-prepend"> <spanclass="input-group-text">@</span> </div> <inputtype="text"class="form-control"placeholder="Username"id="usr"name="username"> </div> <divclass="input-groupmb-3"> <inputtype="text"class="form-control"placeholder="YourEmail"id="mail"name="email"> <divclass="input-group-append"> <spanclass="input-group-text">@</span> </div> </div> <buttontype="submit"class="btnbtn-primary">Submit</button> </form></div>2输入框大小将相对表单大小的class样式加到.input-group中，其内容会自动调整大小，如.input-group-lg、.input-group-sm，不需要在每个元素上重重使用样式控制其大小。使用.input-group-sm类来设置小的输入框，.input-group-lg类设置大的输入框，如图6-36所示。3多个输入框和多个文本3多个输入框和多个文本<divclass="containermt-3"><h3>多个输入框和文本</h3><form><divclass="input-groupmb-3"><divclass="input-group-prepend"><spanclass="input-group-text">Person</span></div><inputtype="text"class="form-control"placeholder="FirstName"><inputtype="text"class="form-control"placeholder="LastName"></div></form><form><divclass="input-groupmb-3"><divclass="input-group-prepend"><spanclass="input-group-text">One</span><spanclass="input-group-text">Two</span><spanclass="input-group-text">Three</span></div><inputtype="text"class="form-control"></div></form></div>4复选框与单选框文本信息可以使用复选框与单选框替代，如图6-38所示。4复选框与单选框文本信息可以使用复选框与单选框替代，如图6-38所示。<divclass="containermt-3"><h3>复选框与单选框</h3><p>文本信息可以使用复选框与单选框替代：</p><form><divclass="input-groupmb-3"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="checkbox"></div></div><inputtype="text"class="form-control“placeholder="RUNOOB"></div></form><form><divclass="input-groupmb-3"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="radio"></div></div><inputtype="text"class="form-control"placeholder="GOOGLE"></div></form></div>5输入框添加按钮组5输入框添加按钮组<divclass="containermt-3"> <h1>输入框添加按钮组</h1> <divclass="input-groupmb-3"> <divclass="input-group-prepend"> <buttonclass="btnbtn-outline-secondary"type="button">BasicButton</button> </div> <inputtype="text"class="form-control"placeholder="Sometext"> </div> <divclass="input-groupmb-3"> <inputtype="text"class="form-control"placeholder="Search"> <divclass="input-group-append">

<buttonclass="btnbtn-success"type="submit">Go</button> </div> </div> <divclass="input-groupmb-3"> <inputtype="text"class="form-control"placeholder="Somethingclever.."> <divclass="input-group-append"> <buttonclass="btnbtn-primary"type="button">OK</button> <buttonclass="btnbtn-danger"type="button">Cancel</button> </div> </div> </div>6设置下拉菜单输入框中添加下拉菜单不需要使用.dropdown类，如图6-40所示。6设置下拉菜单输入框中添加下拉菜单不需要使用.dropdown类，如图6-40所示。</button><divclass="dropdown-menu"><aclass="dropdown-item"href="">GOOGLE</a><aclass="dropdown-item"href="">RUNOOB</a><aclass="dropdown-item"href="">TAOBAO</a></div></div><inputtype="text"class="form-control"placeholder="网站地址"></div></form></div><divclass="containermt-3"><h3>设置下拉菜单</h3><p>输入框中添加下拉菜单不需要使用.dropdown类。</p><form><divclass="input-groupmt-3mb-3"><divclass="input-group-prepend"><buttontype=“button”class="btnbtn-outline-secondarydropdown-toggle"data-toggle="dropdown">选择网站7输入框组标签在输入框组通过在输入框组外围的label来设置标签，标签的for属性需要与输入框组的id对应，点击标签后可以聚焦输入框，如图6-41所示。7输入框组标签在输入框组通过在输入框组外围的label来设置标签，标签的for属性需要与输入框组的id对应，点击标签后可以聚焦输入框，如图6-41所示。<divclass="containermt-3"><h2>输入框组标签</h2><p>在输入框组通过在输入框组外围的label来设置标签，标签的for属性需要与输入框组的id对应。</p><p>点击标签后可以聚焦输入框：</p><form><labelfor="demo">这里输入您的邮箱:</label><divclass="input-groupmb-3"><inputtype="text"class="form-control"placeholder="Email"id="demo"name="email"><divclass="input-group-append"><spanclass="input-group-text">@</span></div></div></form></div>作业作业<form>