Python百日进阶-WEB开发】Day159 - 前端基础之 BootStrap(四)

最新推荐文章于 2025-03-14 06:14:40 发布

原创最新推荐文章于 2025-03-14 06:14:40 发布 · 413 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #bootstrap #html

前端专栏收录该内容

76 篇文章

订阅专栏

本文介绍了网页表单设计的基本要素，包括输入框、下拉选择框、单选和复选按钮、文本域及按钮的设计方法，并提供了水平和内联表单布局的具体实例。

文章目录

- 3.4 表单

3.4 表单

表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

3.4.1 表单控件

.form-control .input-lg(较大) .input-sm(较小)

3.4.1.1 输入框 input text：.form-control

<!-- 输入框 input text -->
<div class="col-md-6">
	<input type="text" name="text1" id="" value="普通文本框 input/text .form-control" class="form-control"/>
	<input type="text" name="text2" id="" value="大文本框 input/text .form-control input-lg" class="form-control input-lg"/>
	<input type="text" name="text3" id="" value="小文本框 input/text .form-control input-sm" class="form-control input-sm"/>
</div>

在这里插入图片描述

3.4.1.2 下拉选择框 select

单选下拉框:select class=“form-control”
多选下拉框:select class=“form-control” multiple=“multiple”

<!-- 下拉选择框 select -->
<div class="col-md-6">
	<!-- 单选下拉框 -->
	<select class="form-control">
		<option value ="">请选择城市(单选)</option>
		<option value ="beijing">北京</option>
		<option value ="shanghai">上海</option>
		<option value ="guangzhou">广州</option>
	</select> <br>
	<!-- 多选下拉框 -->
	<select class="form-control" multiple="multiple">
		<option value ="">请选择城市（多选）</option>
		<option value ="beijing">北京</option>
		<option value ="shanghai">上海</option>
		<option value ="guangzhou">广州</option>
	</select>
</div>

在这里插入图片描述

3.4.1.3 文本域 textarea

class=“form-control”

<!-- 文本域 textarea -->
<div class="col-md-6">
	<textarea rows="" cols="" class="form-control"</cl>>
	</textarea>
</div>

在这里插入图片描述

3.4.1.4 复选框 checkbox

垂直显示：.checkbox
水平显示：.checkbox-inline

<!-- 复选框 checkbox -->
<div class="col-md-8">
	<!-- 垂直复选框 放在同一个div中可水平显示-->
	<div class="checkbox">
		<label><input type="checkbox" name="group1" id="game" value="game" />垂直复选框:游戏</label>
		<label><input type="checkbox" name="group1" id="study" value="study" />垂直复选框:学习</label>
		<label><input type="checkbox" name="group1" id="tour" value="tour" />垂直复选框:旅游</label>
	</div> <br>
	<!-- 垂直复选框 不放在同一个div中可垂直显示-->
	<div class="checkbox">
		<label><input type="checkbox" name="group2" id="game" value="game" />垂直复选框:游戏</label>
	</div>
	<div class="checkbox">
		<label><input type="checkbox" name="group2" id="study" value="study" />垂直复选框:学习</label>
	</div>
	<div class="checkbox">
		<label><input type="checkbox" name="group2" id="tour" value="tour" />垂直复选框:旅游</label>
	</div> <br>
	<!-- 水平复选框 -->
	<div class="checkbox-inline">
		<label><input type="checkbox" name="group3" id="game" value="game" />水平复选框:游戏</label>
		<label><input type="checkbox" name="group3" id="study" value="study" />水平复选框:学习</label>
		<label><input type="checkbox" name="group3" id="tour" value="tour" />水平复选框:旅游</label>
	</div> <br>
	<div>
		<label class="checkbox-inline"><input type="checkbox" name="group4" id="game" value="" />水平复选框:游戏</label>
		<label class="checkbox-inline"><input type="checkbox" name="group4" id="study" value="" />水平复选框:学习</label>
		<label class="checkbox-inline"><input type="checkbox" name="group4" id="tour" value="" />水平复选框:旅游</label>
	</div>
</div>

在这里插入图片描述

3.4.1.5 单选框 radio

<!-- 单选框 radio -->
<div class="col-md-8">
	<!-- 单选框 放在同一个div中可水平显示-->
	<div class="radio">
		<label><input type="radio" name="group1" id="game" value="game" />水平单选框:游戏</label>
		<label><input type="radio" name="group1" id="study" value="study" />水平单选框:学习</label>
		<label><input type="radio" name="group1" id="tour" value="tour" />水平单选框:旅游</label>
	</div> <br>
	<!-- 单选框 不放在同一个div中可垂直显示-->
	<div class="radio">
		<label><input type="radio" name="group2" id="game" value="game" />垂直单选框:游戏</label>
	</div>
	<div class="radio">
		<label><input type="radio" name="group2" id="study" value="study" />垂直单选框:学习</label>
	</div>
	<div class="radio">
		<label><input type="radio" name="group2" id="tour" value="tour" />垂直单选框:旅游</label>
	</div> <br>
</div>

在这里插入图片描述

3.4.1.6 按钮

3.4.1.6.1 使用button实现

基础样式：btn。 < button class=“btn”>< /button>
附加样式：btn-primary，btn-info，btn-success，btn-warning，btn-danger，btn-link，btn-default

3.4.1.6.2 多标签支持：使用 a div 等制作按钮

3.4.1.6.3 按钮大小

大按钮： .btn-lg（大）小按钮：.btn-sm（小）超小按钮： .btn-xs（超小）

3.4.1.6.4 按钮禁用

方法1:在标签中添加 disabled属性，真正禁用
< button class=“btn btn-danger” disabled=“disabled”>禁用按钮< /button>
方法2:在元素标签中添加类名"disabled"，样式禁用
< button class=“btn btn-danger disabled”>禁用按钮< /button>
在 class属性中添加disabled只是样式上禁用了,并不是真正的禁用了此按钮!

<!-- 按钮 -->
<div class="col-md-12">
	<div id="">原生按钮<br>
		<button type="button">原生button按钮</button>
		<button type="input">原生input按钮</button>
	</div><br>
	<div id="">button按钮<br>
		<button type="button" class="btn btn-primary">primary 按钮</button>
		<button type="button" class="btn btn-info">info 按钮</button>
		<button type="button" class="btn btn-success">success 按钮</button>
		<button type="button" class="btn btn-warning">warning 按钮</button>
		<button type="button" class="btn btn-danger">danger 按钮</button>
		<button type="button" class="btn btn-link">link 按钮</button>
		<button type="button" class="btn btn-default">default 按钮</button>
	</div><br>
	<div class=""> 多标签支持：使用 a div 等制作按钮<br>
		<a href="##" class="btn btn-info">a标签按钮 info</a>
		<span class="btn btn-success">span标签按钮 success</span>
		<div class="btn btn-warning">div标签按钮 warning</div>
		<p class="btn btn-primary">p标签按钮 primary</p>
	</div><br>
	<div id=""> 按钮大小<br>
		<button type="button" class="btn btn-primary btn-lg">primary 大按钮</button>
		<button type="button" class="btn btn-primary">primary 正常按钮</button>
		<button type="button" class="btn btn-primary btn-sm">primary 小按钮</button>
		<button type="button" class="btn btn-primary btn-xs">primary 超小按钮</button>
	</div><br>
	<div id=""> 按钮禁用<br>
		<!-- 未禁用按钮 -->
		<button type="button" class="btn btn-primary" onclick="alert('点击了：未禁用按钮')">未禁用按钮</button>
		<!-- 方法1:在标签中添加 disabled属性，真正禁用，无法使用 -->
		<button type="button" class="btn btn-primary" disabled="disabled" onclick="alert('点击了：属性禁用按钮')">属性禁用按钮，无法点击</button>
		<!-- 方法2:在元素标签中添加类名"disabled"，样式禁用，可以正常点击使用 -->
		<button type="button" class="btn btn-primary disabled" onclick="alert('点击了：样式禁用按钮')">样式禁用按钮，可以正常点击使用</button>
	</div>
</div>

在这里插入图片描述

3.4.2 表单布局

基本的表单结构是 Bootstrap自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:

向父< form>元素添加 role=“form”
把标签和控件放在一个带有class=“form-group” 的< div>中。这是获取最佳间距所必需的。
向所有的文本元素、和添加 class=“frm-control”。

3.4.2.1 水平表单

同一行显示class=“form-horizontal”，配合Bootstrap框架的栅格网格系统

<!-- 水平布局表单 -->
<div class="col-md-6" >
	<!-- 水平布局表单 role="form" 书写时没有提示-->
	<form class="form-horizontal" role="form">
		<h3 class="text-center">用户信息表(水平布局)</h3><br>
		<!-- 表单中的元素组 -->
		<div class="form-group">
			<!-- label的for属性指向表单元素的id属性，点击时会自动聚焦到对应id的元素 label标签不是表单元素，所以class不用form-control -->
			<label for="uname" class="control-label col-md-3">用户名</label>
			<div class="col-md-9">
				<!-- input是表单元素 -->
				<input type="text" id="uname" name="uname" class="form-control" placeholder="请输入用户名" />
			</div>
		</div>
		<div class="form-group">
			<!-- label的for属性指向表单元素的id属性，点击时会自动聚焦到对应id的元素 label标签不是表单元素，所以class不用form-control -->
			<label for="mail" class="control-label col-md-3">邮箱</label>
			<div class="col-md-9">
				<!-- input是表单元素 -->
				<input type="email" id="mail" name="email" class="form-control" placeholder="请输入邮箱" />
			</div>
		</div>
		<div class="form-group">
			<label for="pwd" class="control-label col-md-3">密码</label>
			<div class="col-md-9">
				<input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码" />
			</div>
		</div>
		<div class="form-group">
			<!-- 单选框 -->
			<label class="control-label col-md-3">性别</label>
			<div class="col-md-9 radio">
				<label><input type="radio" name="sex" id="male" value="male" />男</label>
				<label><input type="radio" name="sex" id="female" value="female" />女</label>
				<label><input type="radio" name="sex" id="female" value="sex-secret" />保密</label>
			</div>
		</div>
		<div class="form-group">
			<!-- 复选框 -->
			<label class="control-label col-md-3">爱好</label>
			<div class="col-md-9">
				<label class="checkbox-inline"><input type="checkbox" name="hobby" id="" value="climbing" />爬山</label>
				<label class="checkbox-inline"><input type="checkbox" name="hobby" id="" value="swiming" />游泳</label>
				<label class="checkbox-inline"><input type="checkbox" name="hobby" id="" value="reading" />读书</label>
				<label class="checkbox-inline"><input type="checkbox" name="hobby" id="" value="game" />电玩</label>
			</div>
		</div>
		<div class="form-group">
			<!-- 下拉框 -->
			<label class="control-label col-md-3" >城市</label>
			<div class="col-md-9">
				<select class="form-control">
					<option value="">请选择城市</option>
					<option value="washington">华盛顿</option>
					<option value="losangeles">洛杉矶</option>
					<option value="newyork">纽约</option>
					<option value="toronto">多伦多</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<!-- 文本域 -->
			<label for="remark" class="control-label col-md-3">简介</label>
			<div class="col-md-9">
				<textarea id="remark" class="form-control"  rows="" cols=""></textarea>
			</div>
		</div>
		<div class="form-group">
			<!-- 按钮 -->
			<div class="col-md-8 col-md-offset-5">
				<button type="button" class="btn btn-primary">提交</button>
				<button type="button" class="btn btn-primary col-md-offset-1">取消</button>
			</div>
		</div>
	</form>
</div> <br>

在这里插入图片描述

3.4.2.2 内联表单

将表单的控件都在一行内显示：class=“form-inline”
注意label不会显示,存在的意义:如果没有为输入控件设置 label标签,屏幕阅读器将无法正确识别。

<!-- 内联表单布局 -->
<div class="col-md-6">
	<h3 class="text-center">用户信息表（内联表单）</h3><br>
	<!-- 内联表单 -->
	<form class="form-inline">
		<!-- 表单中的元素组 -->
		<div class="form-group">
			<!-- label的for属性指向表单元素的id属性，点击时会自动聚焦到对应id的元素 label标签不是表单元素，所以class不用form-control -->
			<label for="uname" class="control-label col-md-3">用户名</label>
			<div class="col-md-9">
				<!-- input是表单元素 -->
				<input type="text" id="uname" name="uname" class="form-control" placeholder="请输入用户名" />
			</div>
		</div>
		<div class="form-group">
			<!-- label的for属性指向表单元素的id属性，点击时会自动聚焦到对应id的元素 label标签不是表单元素，所以class不用form-control -->
			<label for="mail" class="control-label col-md-3">邮箱</label>
			<div class="col-md-9">
				<!-- input是表单元素 -->
				<input type="email" id="mail" name="email" class="form-control" placeholder="请输入邮箱" />
			</div>
		</div>
		<div class="form-group">
			<label for="pwd" class="control-label col-md-3">密码</label>
			<div class="col-md-9">
				<input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码" />
			</div>
		</div>
		<div class="form-group">
			<!-- 单选框 -->
			<label class="control-label col-md-3">性别</label>
			<div class="col-md-9 radio">
				<label><input type="radio" name="sex" id="male" value="male" />男</label>
				<label><input type="radio" name="sex" id="female" value="female" />女</label>
				<label><input type="radio" name="sex" id="female" value="sex-secret" />保密</label>
			</div>
		</div>
		<div class="form-group">
			<!-- 复选框 -->
			<label class="control-label col-md-3">爱好</label>
			<div class="col-md-9">
				<label class="checkbox-inline"><input type="checkbox" name="hobby" id="" value="climbing" />爬山</label>
				<label class="checkbox-inline"><input type="checkbox" name="hobby" id="" value="swiming" />游泳</label>
				<label class="checkbox-inline"><input type="checkbox" name="hobby" id="" value="reading" />读书</label>
				<label class="checkbox-inline"><input type="checkbox" name="hobby" id="" value="game" />电玩</label>
			</div>
		</div>
		<div class="form-group">
			<!-- 下拉框 -->
			<label class="control-label col-md-3" >城市</label>
			<div class="col-md-9">
				<select class="form-control">
					<option value="">请选择城市</option>
					<option value="washington">华盛顿</option>
					<option value="losangeles">洛杉矶</option>
					<option value="newyork">纽约</option>
					<option value="toronto">多伦多</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<!-- 文本域 -->
			<label for="remark" class="control-label col-md-3">简介</label>
			<div class="col-md-9">
				<textarea id="remark" class="form-control"  rows="" cols=""></textarea>
			</div>
		</div>
		<div class="form-group">
			<!-- 按钮 -->
			<div class="col-md-8 col-md-offset-5">
				<button type="button" class="btn btn-primary">提交</button>
				<button type="button" class="btn btn-primary col-md-offset-1">取消</button>
			</div>
		</div>
	</form>
</div> <br>