表单

单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

表单控件

<form class="mx-auto pt-5" style="width:500px;height:500px;"><div class="form-group"><label for="formEmail">邮件</label><input id="formEmail" class="form-control" type="email"  placeholder="name@example.com"></div><div class="form-group"><label for="formSelect">下拉框</label><select id="formSelect" class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option></select></div><div class="form-group"><label for="formSelect2">下拉框</label><select multiple id="formSelect2" class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option></select></div><div class="form-group"><label for="formArea">文本域</label><textarea id="formArea" cols="20" rows="3" class="form-control"></textarea></div><div class="form-group form-check"><input id="formCheck" class="form-check-input" type="checkbox"><label class="form-check-label" for="formCheck">选择</label></div><button type="submit" class="btn btn-primary">提交</button>
</form>

.form-group

.form-control

文本控件（如<input>、<select>、<textarea>）统一采用 .form-control 样式进行处理优化，包括常规外观、focus选中状态、尺寸大小。

大小规格

<form class="mx-auto pt-5" style="width:500px;height:500px;"><div class="form-group"><label class="col-form-label-lg" for="formInput1">Email</label><input id="formInput1" class="form-control form-control-lg" type="text" placeholder=".from-control-lg"></div><div class="form-group"><label class="col-form-label" for="formInput2">Email</label><input id="formInput2" class="form-control" type="text" placeholder="Default input"></div><div class="form-group"><label class="col-form-label-sm" for="formInput3">Email</label><input id="formInput3" class="form-control form-control-sm" type="text" placeholder=".from-control-sm"></div>
</form>

.form-control-sm|lg : 控制控件的大小

.col-form-label-sm|lg : 控制 label 中的文本大小

只读属性

<form class="mx-auto pt-5" style="width:500px;height:500px;"><div class="form-group"><input class="form-control" type="text" placeholder="可读可写"></div><div class="form-group"><input class="form-control" type="text" placeholder="只读" readonly></div>
</form>

readonly

在 input 控件上增加 readonly 属性，可防止修改 input 中的值。达到只读效果。

只读纯文本

<form class="mx-auto pt-5" style="width:500px;height:500px;"><div class="form-group row"><label for="formEmail" class="col-sm-2 col-form-label">Email</label><div class="col-sm-10"><input id="formEmail1" class="form-control-plaintext" type="text" placeholder="email@example.com" readonly></div></div><div class="form-group"><label for="formEmail2" class="sr-only">Email</label><input id="formEmail2" class="form-control-plaintext" type="text" placeholder="email@example.com" readonly></div>
</form>

若需要将 input 控件显示为纯文本（没有控件框），只要使用 .form-control-plaintext 样式即可。

.form-control-plaintext

效果

移除预设的表单样式，并保留适当的边距和填充间隙

.sr-only

效果

通过 clip 属性的剪切功能使元素隐藏

输入范围

<form class="mx-auto pt-5" style="width:500px;height:500px;"><div class="form-group"><label for="formRange">选择值（100）</label><input id="formRange" class="form-control-range" type="range" value="100"></div><div class="form-group"><label for="formRange2">选择值（50）</label><input id="formRnage2" class="form-control-range" type="range" value="50"></div><div class="form-group"><label for="formRange3">选择值（0）</label><input id="formRange3" class="form-control-range" type="range" value="0"></div>
</form>

.form-control-range

复选框与单选框

默认垂直

<form class="mx-auto pt-5" style="width:500px;height:500px;"><div class="form-check"><input id="formCheckBox" class="form-check-input" type="checkbox"><label for="formCheckBox" class="form-check-label">可选复选框</label></div><div class="form-check"><input id="formCheckBox2" class="form-check-input" type="checkbox" disabled><label for="formCheckBox2" class="form-check-label">不可选复选框</label></div>
</form>

水平排列

<form class="mx-auto pt-5" style="width:500px;height:500px;"><div class="form-check form-check-inline"><input id="formCheckBox" class="form-check-input" type="checkbox"><label for="formCheckBox" class="form-check-label">可选复选框</label></div><div class="form-check form-check-inline"><input id="formCheckBox2" class="form-check-input" type="checkbox" disabled><label for="formCheckBox2" class="form-check-label">不可选复选框</label></div>
</form>

通过给容器设置 .form-check-inline 实现水平排列效果。

.form-check-inline

使父级元素宽度只适应子级元素

布局

垂直表单

<formclass="border border-success mx-auto mt-5"style="width: 500px; height: 200px"
><div class="form-group"><label for="userName">用户名</label><input class="form-control" type="text" id="userName" /></div><div class="form-group"><label for="userName">密码</label><input class="form-control" type="password" id="userPwd" /></div>
</form>

水平表单

<formclass="mx-auto border border-success mt-5"style="width: 500px; height: 200px"
><div class="form-group row"><label class="col-sm-2 col-form-label" for="userName">名称</label><div class="col-sm-10"><input class="form-control" type="text" id="userName" placeholder="请输入名称" /></div></div><div class="form-group row"><label class="col-sm-2 col-form-label" for="userPwd">密码</label><div class="col-sm-10"><input class="form-control" type="text" id="userPwd" placeholder="请输入密码" /></div></div>
</form>

实现思路：

通过添加 .row 类，并使用 .col-*-* 等栅格组件来指定标签和宽度，可以创建水平表单。

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

.col-form-label

让文字与相关表单控件垂直居中

<form class="border border-success mx-auto pt-5" style="width:500px;height:200px;"><div class="row"><div class="col"><label for="userName">名称</label><input id="userName" class="form-control" type="text"></div><div class="col"><label for="userPwd">密码</label><input id="userPwd" class="form-control" type="password"></div></div>
</form>

表单下方帮助提示文本

<form class="mx-auto pt-5" style="width:500px;height:500px;"><label for="userName">userName</label><input id="userName" class="form-control" type="text" aria-describedby="userNameBlock"><small id="userNameBlock" class="form-text text-muted">表单下方帮助提示文本</small>
</form>

提示文本应该与使用 aria-describedby 属性表单控件相关联。

.form-text

<form class="mx-auto pt-5 form-inline" style="width:500px;height:500px;"><label for="userName">userName</label><input id="userName" class="form-control mx-3" type="text" aria-describedby="userNameBlock"><small id="userNameBlock" class="form-text text-muted">表单下方帮助提示文本</small>
</form>

禁用表单

<form class="mx-auto pt-5" style="width:500px;height:500px;"><label for="userName">userName</label><input id="userName" class="form-control" type="text" placeholder="禁用状态" disabled>
</form>

添加 disabled 属性到 input 上，使控件处于禁用状态。

<form class="mx-auto pt-5" style="width: 500px; height: 500px"><fieldset disabled><div class="form-group"><label for="userName">userName</label><inputid="userName"class="form-control"type="text"placeholder="禁用状态"/></div><div class="form-group"><label for="userAge">userAge</label><inputid="userAge"class="form-control"type="text"placeholder="禁用状态"/></div></fieldset>
</form>

将 disabled 属性添加到 <fieldset> 以禁用其中的所有控件。

自定义表单

自定义复选框

<form class="mx-auto mt-3 pt-2 border border-success" style="width: 500px; height: 200px"><p>复选框</p><div class="custom-control custom-checkbox"><input type="checkbox" id="Check" class="custom-control-input"><label for="Check" class="custom-control-label">CheckBox1</label></div><div class="custom-control custom-checkbox"><input type="checkbox" id="Check2" class="custom-control-input"> <label for="Check2" class="custom-control-label">CheckBox2</label></div>
</form>

自定义单选框

<formclass="mx-auto mt-3 pt-2 border border-success"style="width: 500px; height: 200px"
><p>单选框</p><div class="custom-control custom-radio"><inputtype="radio"name="gender"id="Radio"class="custom-control-input"/><label for="Radio" class="custom-control-label">男</label></div><div class="custom-control custom-radio"><inputtype="radio"name="gender"id="Radio2"class="custom-control-input"/><label for="Radio2" class="custom-control-label">女</label></div>
</form>

<formclass="mx-auto mt-3 pt-2 border border-success"style="width: 500px; height: 200px"
><p>单选框</p><div class="custom-control custom-radio custom-control-inline"><inputtype="radio"name="gender"id="Radio"class="custom-control-input"/><label for="Radio" class="custom-control-label">男</label></div><div class="custom-control custom-radio custom-control-inline"><inputtype="radio"name="gender"id="Radio2"class="custom-control-input"/><label for="Radio2" class="custom-control-label">女</label></div>
</form>

通过给外层容器添加.custom-control-inline 类实现水平排列效果。

IOS 风格开关

<formclass="mx-auto mt-3 pt-2 border border-success"style="width: 500px; height: 200px"
><div class="custom-control custom-switch"><input type="checkbox" id="check1" class="custom-control-input"><label for="check1" class="custom-control-label">复选框</label></div><div class="custom-control custom-switch"><input type="checkbox" id="check2" class="custom-control-input" disabled><label for="check2" class="custom-control-label">复选框（禁用状态）</label></div>
</form>

下拉选择菜单

<formclass="mx-auto mt-3 pt-2 border border-success"style="width: 500px; height: 200px"
><div class="form-group"><label for="select1">下拉菜单</label><select id="select1" class="custom-select"><option selected>Open this select menu</option><option value="">One</option><option value="">Two</option><option value="">Three</option></select></div>
</form>

下拉菜单大小

<formclass="mx-auto mt-3 pt-2 border border-success"style="width: 500px; height: 300px"
><div class="form-group"><label for="select1">下拉菜单</label><select id="select1" class="custom-select custom-select-lg"><option>select-lg</option></select></div><div class="form-group"><label for="select2">下拉菜单</label><select id="select2" class="custom-select"><option>默认大小</option></select></div><div class="form-group"><label for="select3">下拉菜单</label><select id="select3" class="custom-select custom-select-sm"><option>select-sm</option></select></div>
</form>

通过 .custom-select-* 来设置下拉框的大小。

显示的行数

<formclass="mx-auto mt-3 pt-2 border border-success"style="width: 500px; height: 300px"
><div class="form-group"><label for="select1">下拉菜单</label><select id="select1" class="custom-select" size="3" multiple><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div>
</form>

multiple 属性：设置选项为平铺效果。

size 属性：设置显示的行数。

Bootstrap学习之表单相关推荐

【HTML】学习笔记——表单、框架
[HTML]学习笔记--表单.框架 HTML 表单表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons) ...
JeecgBoot学习_Online表单初体验
JeecgBoot学习Online表单初体验在这几个地方改起来在页面属性里选择类型再建一个商品表为了使得选择有树形结构我们修改这两处备注: 1.字典table 填写树控件对应的表名 { 例 ...
表单识别（四）-基于深度学习的表单识别)-OCR
(论文研读后,感觉有用的一些笔记,主要是给自己记录) 论文:熊雨点,基于深度学习的表单识别系统的研究与实现基于深度学习的表单识别前言: 文档检测方法: 基于扩张卷积残差网络的表单文档定位方法: 扩 ...
黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
Bootstrap样式之表单样式
表单基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...
【PHP学习】表单验证实现注册功能
上次学了一下最基本的语法,这次笔记中记录的是用上次学到的语法以及第一次的前端页面做表单验证,实现注册功能. 网页界面博客链接:PHP 学习之路(1)-- Simple Message 系统基础语法博 ...
前端学习之表单验证（超详细）
表单验证: 主要用于验证input框的非空或者类型是否正确. iView表单验证: 参数详解(html部分): <Form ref="form" :model="f ...
bootstrap 大小表格,表单控件大小
前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...
html中表单涉及的标记有哪几个,HTML学习笔记--表单标记
表单是网页上的一个特定区域.这个区域是由一对标记定义的.这一步有几方面的作用.第一方面,限定表单的范围.其它的表单对象,都要插入到表单之中.单击提交按纽时,提交的也是表单范围之内的内容.第二方面,携 ...

Bootstrap学习之表单

表单