Bootstrap不提供印章申请表单,需用其表单工具+语义结构(fieldset/legend)+自定义字段(富文本textarea、file上传、form-switch加急等)搭建;打印时禁用CSS红章,仅预览模式显示;提交须完整校验并禁用按钮。

Bootstrap 本身不提供“印章申请表单”这种业务型组件,它只负责基础布局、表单样式和交互辅助。你要做的不是找现成的印章表单,而是用 Bootstrap 的表单工具 + 合理结构 + 少量自定义,快速搭出符合政务/办公场景的申请表——关键在语义清晰、字段可控、打印友好。
用 form + form-group 搭基础结构
别套用卡片或模态框开局,印章申请本质是强流程表单,优先保证字段可读性和填写顺序。Bootstrap 5 已弃用 form-group 类,改用 mb-3 等间距工具类;但语义分组仍靠 fieldset + legend 显式表达逻辑区块:
<form>
<fieldset>
<legend>申请人信息</legend>
<div class="mb-3">
<label for="applicantName" class="form-label">姓名</label>
<input type="text" class="form-control" id="applicantName">
</div>
</fieldset>
<fieldset>
<legend>印章类型与用途</legend>
<div class="mb-3">
<select class="form-select" id="sealType">
<option value="company">公司公章</option>
<option value="contract">合同专用章</option>
</select>
</div>
</fieldset>
</form>
注意:用 fieldset 不仅提升可访问性(屏幕阅读器能识别分组),也方便后续 JS 按区块校验或折叠展开。
印章申请特有的字段怎么处理
这类表单常有非标准字段:用印事由需富文本简述、附件上传、审批人下拉(但数据来自组织架构)、是否加急等。Bootstrap 不内置富文本或树形选择器,得务实组合:
-
textarea加rows="4"和form-control足够应付“用印事由”,别一上来就集成quill或tinymce - 附件上传用原生
input type="file"+form-control,配合accept=".pdf,.docx"限制格式,后端再校验真实 MIME 类型 - 审批人若为固定名单,用
select+optgroup分部门;若是动态搜索,则引入bootstrap-select或tom-select这类轻量增强库,而非重写整个下拉 - 加急标识用
form-check中的form-switch(Bootstrap 5.3+),视觉明确且语义正确
打印时印章红章效果不能靠 CSS 实现
很多新手想用 background-image 叠个红色圆形“章”在表单上,这会导致打印时失真、偏移、甚至被浏览器禁用背景图(默认关闭)。真实场景中,“盖章”是审批通过后的独立动作,表单里只需预留位置:
- 在表单底部加一个
div class="border-top pt-3 mt-4"区域,标注“审批意见及盖章处” - 用
text-center+fw-bold写“同意”或“不予批准”,留白供手写签字 - 如需预览红章效果,仅限页面查看模式,用
@media screen单独定义.stamp-preview { background: url(./red-seal.png) no-repeat center / 120px; },并确保该 class 不出现在打印样式中 - 真正盖章环节应由 OA 系统调用电子签章服务(如 eSign、契约锁),或导出 PDF 后线下盖章
最容易被忽略的是字段必填逻辑和提交后状态——印章申请通常不允许草稿保存,submit 必须触发完整校验(含附件是否存在、事由是否少于10字),且成功后应禁用按钮并显示“已提交,等待审批”,而不是跳转首页。


















