【前端开发】bootstrap框架：表单

一殊酒

已于 2023-10-04 00:36:58 修改

阅读量824

点赞数 1

分类专栏：文档解析前端开发文章标签： bootstrap 前端 html

于 2021-06-18 08:20:59 首次发布

本文链接：https://blog.csdn.net/weixin_48348920/article/details/118003331

版权

文档解析同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

前端开发

55 篇文章 4 订阅

订阅专栏

垂直（基本）表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式
1）向父 <form> 元素添加 role="form"
2）把标签和控件放在一个带有form-group 类的 <div> 中，这是获取最佳间距所必需的。
3）向所有的文本元素 <input>、<textarea> 和 <select>添加form-control类
help-block类提示帮助信息

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
	<div class="form-group">
		<label for="name">名称</label>
		<input type="text" class="form-control" id="name" 
			   placeholder="请输入名称">
	</div>
	<div class="form-group">
		<label for="inputfile">文件输入</label>
		<input type="file" id="inputfile">
		<p class="help-block">这里是块级帮助文本的实例。</p>
		<select class="form-control">aaa</select>
	</div>
	<div>
		<label>
			<input type="checkbox"> 请打勾
		</label>
	</div>
	<button type="submit" class="btn btn-default">提交</button>
</form>
	
</body>
</html>

在这里插入图片描述

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向标签添加form-inline类
sr-only类：标注这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上sr-only的意义就在于能保证屏幕阅读器正确读取且不会影响正常人的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Bootstrap 实例 - 基本表单</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <form role="form">
        <div class="form-group">
            <label for="name">名称</label>
            <input type="text" class="form-control" id="name" placeholder="请输入名称" />
        </div>
        <div class="form-group">
            <label for="inputfile">文件输入</label>
            <input type="file" id="inputfile" />
            <p class="help-block">这里是块级帮助文本的实例。</p>
            <select class="form-control">
          aaa
        </select>
        </div>
        <div>
            <label> <input type="checkbox" /> 请打勾 </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
</body>

</html>

在这里插入图片描述

水平表单

col-*-offset和col-*-push都可以使一个column向右偏移距离；col-*-offset使用的是margin-left属性实现右移，col-*-push使用的是float + left属性实现右移

1）向父 <form> 元素添加form-horizontal类
2）把标签和控件放在一个带有form-group 类的 <div> 中
3）向标签添加control-label类

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 水平表单</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
	<div class="form-group">
		<label for="firstname" class="col-sm-2 control-label">名字</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="firstname" 
				   placeholder="请输入名字">
		</div>
	</div>
	<div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">姓</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="lastname" 
				   placeholder="请输入姓">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> 请记住我
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">登录</button>
		</div>
	</div>
</form>

</body>
</html>

在这里插入图片描述

支持的表单控件

输入框（Input）
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
文本框（Textarea）
当需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变rows属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。
复选框（Checkbox）和单选框（Radio）
当创建表单时，如果想从列表中选择若干个选项时，请使用 checkbox。如果限制只能选择一个选项，请使用 radio。
对一系列复选框和单选框使用 checkbox-inline类或 radio-inline类，控制它们显示在同一行上。
选择框（Select）
当想从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
使用<select>展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
使用multiple="multiple"允许用户选择多个选项。
静态控件
当需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用form-control-static类。

表单控件状态

输入框焦点
当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。
禁用的输入框 input
如果想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。
禁用的字段集 fieldset
对 <fieldset> 添加 disabled 属性来禁用内的所有控件。
验证状态
Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

表单控件大小

可以分别使用input-lg类和 col-lg-*类来设置表单的高度和宽度

一殊酒

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【前端开发】bootstrap框架：表单

垂直（基本）表单基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式1）向父 <form> 元素添加 role="form"2）把标签和控件放在一个带有form-group 类的<div> 中，这是获取最佳间距所必需的。3）向所有的文本元素 <input>、<textarea> 和 <select>添加form-control类help-block类提示帮助信息<!DOCTYPE html>
复制链接

扫一扫