仅用HTML能否在<form>中添加申请人签名区域？如何实现？

纯HTML的input标签没法实现手写签名，得结合Canvas元素和JavaScript来捕捉手绘轨迹，下面是完整的实现方案：

1. HTML结构 #

在你的表单里添加签名画布、操作按钮和隐藏字段（用来存储签名数据）：

<form id="applicationForm">
  <!-- 其他表单字段 -->
  <div class="signature-container">
    <label>申请人签名：</label>
    <canvas id="signatureCanvas" width="400" height="150" style="border: 1px solid #ccc;"></canvas>
    <div class="signature-buttons">
      <button type="button" id="clearSignature">清除签名</button>
    </div>
    <!-- 隐藏字段，存储签名的Base64数据 -->
    <input type="hidden" id="signatureData" name="signature">
  </div>
  <button type="submit">提交表单</button>
</form>

2. JavaScript逻辑 #

处理鼠标/触摸事件，实现手绘签名的捕捉、清除，以及签名数据的提取：

const canvas = document.getElementById('signatureCanvas');
const ctx = canvas.getContext('2d');
const clearBtn = document.getElementById('clearSignature');
const signatureDataInput = document.getElementById('signatureData');
const form = document.getElementById('applicationForm');

// 初始化绘制状态
let isDrawing = false;
let lastX = 0;
let lastY = 0;

// 设置画笔样式
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.strokeStyle = '#000';

// 鼠标事件处理
function startDrawing(e) {
  isDrawing = true;
  [lastX, lastY] = getCoordinates(e);
}

function draw(e) {
  if (!isDrawing) return;
  const [x, y] = getCoordinates(e);
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(x, y);
  ctx.stroke();
  [lastX, lastY] = [x, y];
}

function stopDrawing() {
  isDrawing = false;
  // 签名完成后，把Canvas转为Base64数据存入隐藏字段
  signatureDataInput.value = canvas.toDataURL();
}

// 获取鼠标/触摸的坐标（适配Canvas偏移）
function getCoordinates(e) {
  const rect = canvas.getBoundingClientRect();
  let x, y;
  if (e.type.includes('touch')) {
    x = e.touches[0].clientX - rect.left;
    y = e.touches[0].clientY - rect.top;
  } else {
    x = e.clientX - rect.left;
    y = e.clientY - rect.top;
  }
  return [x, y];
}

// 清除签名
function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  signatureDataInput.value = '';
}

// 绑定事件
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

// 适配移动端触摸事件
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault(); // 防止页面滚动
  startDrawing(e);
});
canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  draw(e);
});
canvas.addEventListener('touchend', stopDrawing);

clearBtn.addEventListener('click', clearCanvas);

// 表单提交时确保签名数据已存入
form.addEventListener('submit', (e) => {
  if (!signatureDataInput.value) {
    e.preventDefault();
    alert('请完成签名后提交');
  }
});

3. 关键说明 #

• Canvas核心：通过Canvas的2D上下文绘制用户的鼠标/触摸轨迹，模拟手写效果。
• 签名数据存储：使用canvas.toDataURL()将签名转为Base64格式的图片数据，存入隐藏的input字段，这样表单提交时就能把签名数据一起发送到后端。
• 移动端适配：添加触摸事件监听，并阻止默认滚动行为，确保移动端签名体验正常。
• 用户体验：添加清除按钮和提交前的签名校验，提示用户完成签名。

内容的提问来源于stack exchange，提问作者Ranjana Jha