Bootstrap组件——表单_form-check-优快云博客

本文详细介绍HTML表单的设计与实现技巧，包括基础表单、大小规格调整、只读属性设置、栅格与表格式排列、水平及内联表单布局，以及表单的验证方法和自定义样式。适合前端开发者参考。

表单

一、表单
二、验证
- 1.验证
- 2.自定义表单样式

一、表单

1.基础表单

使用.form-check 可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现，复选框用于在列表中选择一个或多个选项，单选框则用于多许多选项中选择一个。

<div class="row">
	<div class="col mt-5">
		<form action="#">
			<div class="form-group">
				<!-- 放表单组，放置一组匹配的表单 -->
				<label for="usename">用户名</label>
				<input type="text" id="usename" class="form-control" placeholder="请输入用户名">
				<small class="form-text text-muted">用户名需要用英文、符号组成</small>
			</div>
			<div class="form-group">
				<label for="password">密码</label>
				<input type="password" class="form-control" id="password" placeholder="请输入密码">
			</div>
			<div class="form-group">
				<label for="passwordAgain">确认密码</label>
				<input type="password" class="form-control" id="passwordAgain" placeholder="请再次输入密码" disabled>
			</div>
			<div class="form-group">
				<label for="area">所在地</label>
				<select name="" id="area" class="form-control">
					<!-- multiple:让下拉框变成多选 -->
					<option value="">北京</option>
					<option value="">上海</option>
					<option value="">广州</option>
					<option value="">深圳</option>
				</select>
			</div>
			<div class="form-group">
				<label for="file">选择文件</label>
				<input type="file" class="form-control-file" id="file">
			</div>
			<div class="form-group">
				<label for="range">滑块</label>
				<input type="range" class="form-control-range" id="range">
			</div>

			<!-- 复选框、单选框 -->
			<div class="form-group">
				<label for="">兴趣爱好：</label>
				<div class="form-check form-check-inline">
					<!-- 选择框要放在这个类里面， .form-check-inline是为了让表单在一行中显示 -->
					<input type="checkbox" id="eat" class="form-check-input">
					<label for="eat" class="form-check-label">吃饭</label>
				</div>
				<div class="form-check form-check-inline">
					<input type="checkbox" id="sleep" class="form-check-input">
					<label for="sleep" class="form-check-label">睡觉</label>
				</div>
				<div class="form-check form-check-inline">
					<input type="checkbox" id="play" class="form-check-input">
					<label for="play" class="form-check-label">打豆豆</label>
				</div>
			</div>

			<div class="form-group">
				<label for="">性别：</label>
				<div class="form-check form-check-inline">
					<input type="radio" id="male" class="form-check-input" name="sex">
					<label for="male" class="form-check-label">男</label>
				</div>
				<div class="form-check form-check-inline">
					<input type="radio" id="female" class="form-check-input" name="sex">
					<label for="female" class="form-check-label">女</label>
				</div>
			</div>
			<div class="form-check">
				<input type="checkbox" class="form-check-input" id="exampleCheck1">
				<label class="form-check-label" for="exampleCheck1">Check me out</label>
			</div>
			<button type="submit" class="btn btn-primary">提交</button>
		</form>
	</div>
</div>

在这里插入图片描述

2.大小规格

使用 .form-control-lg 和 .form-control-sm属性定控件大小高度。

<div class="row mt-5">
	<div class="col">
		<div class="form-group">
			<input type="text" class="form-control form-control-lg" placeholder="大尺寸的表单">
		</div>
		<div class="form-group">
			<input type="text" class="form-control" placeholder="正常尺寸的表单">
		</div>
		<div class="form-group">
			<input type="text" class="form-control form-control-sm" placeholder="小尺寸的表单">
		</div>

		<div class="form-group">
			<select name="" id="" class="form-control col-form-label-lg">
				<option value="" >大尺寸的下拉框</option>
			</select>
		</div>
		<div class="form-group">
			<select name="" id="" class="form-control">
				<option value="">正常尺寸的下拉框</option>
			</select>
		</div>
		<div class="form-group">
			<select name="" id="" class="form-control col-form-label-sm">
				<option value="">小尺寸的下拉框</option>
			</select>
		</div>
	</div>
</div>

在这里插入图片描述

3.只读属性

在input控件上增加 readonly （布尔值）标签定义，以防止修改input中的值。
引用 .form-control-plaintext class样式，只显示纯文本

<div class="row mt-5">
	<div class="col">
		<form action="#">
			<div class="form-group">
				<input type="text" class="form-control" placeholder="只读文本" readonly> 
			</div>
			<div class="form-group">
				<input type="text" class="form-control-plaintext" placeholder="没有边框的只读文本" readonly> 
			</div>
		</form>
	</div>
</div>

在这里插入图片描述

4.表单栅格排列

解析

<form action="#">	<!-- form标签一定要放在行与列的外面 -->
	<div class="row">
		<div class="col">
			<input type="text" class="form-control" placeholder="栅格排列">
		</div>
		<div class="col">
			<input type="text" class="form-control" placeholder="栅格排列">
		</div>
	</div>
</form>

在这里插入图片描述

应用

<form action="#">
	<div class="form-row mt-5">
		<div class="col-md-6 form-group">
			<label for="email1">Email</label>
			<input type="email" class="form-control" id="email1" placeholder="请输入邮箱账号">
		</div>
		
		<div class="col-md-6 form-group">
			<label for="password">Password</label>
			<input type="password2" class="form-control" id="password2" placeholder="请输入密码">
		</div>
	</div>

	<div class="row">
		<div class="form-group col">
			<label for="homeAddres">家庭地址</label>
			<input type="text" class="form-control" id="homeAddres" placeholder="请输入家庭地址">
		</div>
	</div>
	<div class="row">
		<div class="form-group col">
			<label for="companyAddres">公司地址</label>
			<input type="text" class="form-control" id="companyAddres" placeholder="请输入公司地址">
		</div>
	</div>

	<div class="form-row">
		<div class="col-md-6 form-group">
			<label for="city">城市</label>
			<input type="text" class="form-control" id="city" placeholder="请输入您所在的城市">
		</div>
		<div class="col-md-4 form-group">
			<label for="marriage">婚姻状况</label>
			<select class="form-control" id="marriage">
				<option value="">已婚</option>
				<option value="">未婚</option>
			</select>
		</div>
		<div class="col-md-2 form-group">
			<label for="education">学历</label>
			<select class="form-control" id="education">
				<option value="">博士</option>
				<option value="">硕士</option>
				<option value="">本科</option>
				<option value="">大专</option>
				<option value="">高中</option>
			</select>
		</div>
	</div>
	<div class="form-group">
		<div class="form-check">
			<input type="checkbox" class="form-check-input" id="grid">
			<label for="grid" class="form-check-lable">同意所读内容</label>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">提交</button>
</form>

在这里插入图片描述

5.表单表格式的排列

<form action="#">
	<div class="form-row">	<!-- 这个class与row的唯一区别就是间距变小了 -->
		<div class="col">
			<input type="text" class="form-control" placeholder="栅格排列">
		</div>
		<div class="col">
			<input type="text" class="form-control" placeholder="栅格排列">
		</div>
	</div>
</form>

在这里插入图片描述

6.水平排列表单

确保添加.col-form-label 到您<label>上，以便他们垂直居中与他们相关的表单控件

<form action="#">
	<div class="form-group row mt-5">
		<label for="email2" class="col-sm-2 col-form-label">Email</label>
		<!-- col-form-lable用来决定下后面的表单进行垂直对齐 -->
		<div class="col-sm-10">
			<input type="email" class="form-control" id="email2" placeholder="请输入email">
		</div>
	</div>
	<div class="form-group row">
		<label for="password3" class="col-sm-2 col-form-label">Password</label>	<!-- col-form-lable用来决定下后面的表单进行垂直对齐 -->
		<div class="col-sm-10">
			<input type="password" class="form-control" id="password3" placeholder="请输入密码">
		</div>
	</div>
	<div class="form-group row">
		<label for="" class="col-sm-2">兴趣爱好：</label>
		<div class="col-sm-10">
			<div class="form-check">
				<input type="checkbox" id="eat" class="form-check-input">
				<label for="eat" class="form-check-label">吃饭</label>
			</div>
			<div class="form-check">
				<input type="checkbox" id="sleep" class="form-check-input">
				<label for="sleep" class="form-check-label">睡觉</label>
			</div>
			<div class="form-check">
				<input type="checkbox" id="play" class="form-check-input">
				<label for="play" class="form-check-label">打豆豆</label>
			</div>
		</div>
	</div>
	<div class="form-group row">
		<label for="" class="col-sm-2">性别：</label>
		<div class="col-sm-10">
			<div class="form-check">
				<input type="radio" id="male" class="form-check-input" name="sex">
				<label for="male" class="form-check-label">男</label>
			</div>
			<div class="form-check">
				<input type="radio" id="female" class="form-check-input" name="sex">
				<label for="female" class="form-check-label">女</label>
			</div>
		</div>
	</div>
</form>

在这里插入图片描述

7.内联表单

.form-inline样式在单个水平行上显示一系列标签，表单控件和按钮。

<div class="row mt-5">
	<div class="col">
		<form action="#" class="form-inline">
			<div class="form-group mr-5">
				<label for="">用户名：</label>
				<input type="email" class="form-control" value="kaivon@qq.com">
			</div>
			<div class="form-group mr-5">
				<label for="">密码：</label>
				<input type="password" class="form-control">
			</div>
			<div class="form-group mr-5">
				<input type="checkbox" class="form-control-input">
				<label for="" class="form-control-label">记住我</label>
			</div>
			<div class="form-group mr-5">
				<button type="submit" class="btn btn-primary">提交</button>
			</div>
		</form>
	</div>
</div>

在这里插入图片描述

二、验证

表单验证通过CSS的两个伪类应用::invalid以及:valid。它适用于 <input>、 <select>、 <textarea>元素。

1.验证

<form action="#" class="needs-validation" novalidate>//novalidate阻止h5默认验证
	<div class="form-row">
		<div class="col-md-4 form-group">
			<label for="surname">姓</label>
			<input type="text" class="form-control" id="surname" placeholder="请输入姓" value="陈" required>
			<div class="valid-feedback">	<!-- 验证成功对应的class -->
				验证通过！
			</div>
			<div class="invalid-feedback">	<!-- 验证失败对应的class -->
				验证失败！
			</div>
		</div>
		<div class="col-md-4 form-group">
			<label for="name">名</label>
			<input type="text" class="form-control" id="name" placeholder="请输入名" value="学辉" required>
			<div class="valid-feedback">	<!-- 验证成功对应的class -->
				验证通过！
			</div>
		</div>
		<div class="col-md-4 form-group">
			<label for="usename">用户名</label>
			<input type="text" class="form-control" id="usename" placeholder="请输入用户名" required>
			<div class="invalid-feedback">请输入正确的用户名！</div>
		</div>
	</div>
	<div class="form-row">
		<div class="col-md-6 form-group">
			<label for="homeAddress">家庭地址</label>
			<input type="text" class="form-control" id="homeAddress" placeholder="请输入家庭地址" required>
			<div class="invalid-feedback">请输入正确的家庭地址！</div>
		</div>
		<div class="col-md-6 form-group">
			<label for="companyAddress">公司地址</label>
			<input type="text" class="form-control" id="companyAddress" placeholder="请输入公司地址" required>
			<div class="invalid-feedback">请输入正确的公司地址！</div>
		</div>
	</div>
	<div class="form-group">
		<div class="form-check">
			<input type="checkbox" class="form-check-input" id="grid" required>
			<label for="grid" class="form-check-label">同意所读内容</label>
			<div class="invalid-feedback">你必需同意此内容后才能继续操作！</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
	(function(){
		var forms=document.querySelectorAll('.needs-validation');
		forms.forEach(function(form,index){
			form.addEventListener('submit',function(ev){//监听提交
				if(form.checkValidity()===false){	//如果表单验证成功，那这个方法会返回true
					ev.preventDefault();//阻止form默认刷新
					ev.stopPropagation();//阻止冒泡
				}
				form.classList.add('was-validated');
				//提交事件发生后，不管验证是否成功，都需要给form身上添加这个class，才能选择							到伪元素显示验证提示
			});
		});
	})();
</script>

在这里插入图片描述

2.自定义表单样式

原生的单选、多选等按钮，样式过于朴素，可以在这里重置。

<div class="row mt-5">
	<div class="col">
		<div class="form-group custom-control custom-checkbox">
			<input type="checkbox" id="eat" class="custom-control-input">
			<label for="eat" class="custom-control-label">吃饭</label>
		</div>
		<div class="form-group custom-control custom-radio">
			<input type="radio" id="male" class="custom-control-input" name="sex">
			<label for="male" class="custom-control-label">男</label>
		</div>
		<div class="form-group custom-control custom-radio">
			<input type="radio" id="female" class="custom-control-input" name="sex">
			<label for="female" class="custom-control-label">女</label>
		</div>
		
		<!-- 在一行中排列，.custom-control-inline -->
		<div class="form-group custom-control custom-radio custom-control-inline">
			<input type="radio" id="male1" class="custom-control-input" name="sex1">
			<label for="male1" class="custom-control-label">男</label>
		</div>
		<div class="form-group custom-control custom-radio custom-control-inline">
			<input type="radio" id="female1" class="custom-control-input" name="sex1" disabled>	<!-- 禁用表单 -->
			<label for="female1" class="custom-control-label">女</label>
		</div>

		<!-- 下拉菜单 -->
		<select name="" id="" class="form-group custom-select">
			<option value="">城市</option>
			<option value="">北京</option>
			<option value="">上海</option>
			<option value="">广州</option>
		</select>

		<!-- 滑块 -->
		<div class="form-group">
			<label for="range1">滑块</label>
			<input type="range" class="custom-range" id="range1">
		</div>
		<div class="form-group">
			<label for="range2">有范围的滑块</label>
			<input type="range" class="custom-range" min="0" max="5" id="range2">
		</div>
		<div class="form-group">
			<label for="range3">规定步长的滑块</label>
			<input type="range" class="custom-range" min="0" max="5" step="0.5" id="range3">
		</div>

		<!-- 文件选择custom-file-input -->
		<div class="form-group custom-file">
			<input type="file" class="custom-file-input" id="file">
			<label for="file" class="custom-file-label">Choose fild</label>
		</div>
	</div>
</div>
</div>