怎么用Bootstrap制作发票开具表单-Bootstrap教程-PHP中文网

国内开具增值税发票必填字段为发票抬头、纳税人识别号、金额、开票日期；其中税号需15或17位字母数字组合并校验码正确，金额须正数且精度为0.01，均需前端+后端双重校验。

怎么用bootstrap制作发票开具表单

发票表单需要哪些必填字段才符合税务要求

国内开具增值税专用发票或普通发票，发票抬头、纳税人识别号、金额、开票日期这四项是税务系统校验硬性条件，缺一不可。Bootstrap 本身不校验业务规则，但能帮你快速组织结构和做前端约束。

建议用 required 属性 + pattern 控制格式，比如 纳税人识别号 必须是15位或17位数字+字母组合（老税号15位，三证合一后17位），可用正则 ^[a-zA-Z0-9]{15,17}$；金额 字段应设为 type="number" 并限制 step="0.01"，避免输入非货币精度值。

发票抬头 用，不要用 placeholder 替代标签，屏幕阅读器需读出“发票抬头”而非“请输入公司名称”
纳税人识别号 建议加 maxlength="17" 和 inputmode="text"（避免手机弹出数字键盘误输）
金额字段必须绑定 name="amount"，后端接收时才能区分于其他数值型字段（如“数量”“单价”）

用 Bootstrap 5 的 `form-floating` 做发票抬头和税号的双行标签

form-floating 能让标签悬浮在输入框上方，节省垂直空间——这对发票表单很实用，因为抬头和税号通常紧挨着出现，且用户习惯横向对比填写。

注意：它依赖的 for 属性和的 id 严格匹配，否则悬浮标签不会正确归位。别漏写 id，也别用中文或空格命名 id 值。

<div class="form-floating mb-3">
  <input type="text" class="form-control" id="invoice-title" name="invoice_title" required><label for="invoice-title">发票抬头</label>
</div>
<div class="form-floating mb-3">
  <input type="text" class="form-control" id="tax-id" name="tax_id" pattern="^[a-zA-Z0-9]{15,17}$" required><label for="tax-id">纳税人识别号</label>
</div>

金额、税率、价税合计怎么用 Bootstrap 栅格对齐并防止错行

发票里“金额”“税率”“价税合计”三个字段逻辑上是一组，用户常横向扫视比对。Bootstrap 的 row + col 容易因内容长度不一导致换行错位，尤其在小屏上。

解决方法是固定列宽 + 强制不换行：col-auto 配合 text-nowrap，再用 align-items-center 垂直居中。别用 col-4 这类等分，因为“税率”字段短（如“13%”），而“价税合计”长（如“¥1,289.00”），强行等分会浪费空间或挤压输入框。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

所有金额类字段统一加 inputmode="decimal"，iOS 键盘会显示小数点
税率用下拉更稳妥，避免用户手输“0.13”还是“13%”，选项值设为小数（如 value="0.13"），方便后端计算
“价税合计”字段设为 readonly，用 JavaScript 实时计算，不要允许手动修改

提交前校验 `纳税人识别号` 格式和金额是否为正数

浏览器原生 required 和 pattern 只能拦住空值或明显非法字符，但没法判断“纳税人识别号”是否真实有效（比如校验码错误），也不能阻止用户输 -100 这种负数金额。得补 JS 校验。

关键点：不要只监听 submit，要在 blur 和 input 时就反馈。用户填完税号立刻失焦，就该提示“校验码不正确”，而不是等到点提交才弹窗。

示例逻辑片段：

document.getElementById('tax-id').addEventListener('blur', function() {
  const val = this.value.trim();
  if (val && !isValidTaxId(val)) {
    this.setCustomValidity('纳税人识别号校验码错误');
  } else {
    this.setCustomValidity('');
  }
});

isValidTaxId() 需实现 GB12973-2009 规定的校验算法（15位老税号用加权模11，17位新税号用GB11714标准），网上有现成函数可复用，别自己手写校验逻辑。

容易被忽略的是：金额字段即使设了 min="0"，用户仍可通过粘贴负数绕过。所以 input 事件里还得做 parseFloat 后判断是否 > 0，并自动截断或清空非法值。