这是您需要的数据输入表单生成脚本,它基于 HTML、CSS 和 JavaScript，只需运行即可在浏览器中动态生成一个完整的表单，并支持数据预览与导出。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">脚本生成 · 数据输入表单</title>
<!-- 干净样式，无外部依赖 -->
<style>
* {
box-sizing: border-box;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
body {
background: #f4f7fc;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 2rem 1rem;
}
.container {
max-width: 840px;
width: 100%;
background: white;
border-radius: 28px;
padding: 2rem 2rem 2.5rem;
box-shadow: 0 12px 30px rgba(0, 20, 40, 0.08);
transition: all 0.2s;
}
h1 {
font-size: 1.9rem;
font-weight: 600;
margin-top: 0.2rem;
margin-bottom: 0.25rem;
color: #0b2b4a;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.subhead {
color: #49748f;
margin-bottom: 1.8rem;
font-size: 0.95rem;
border-left: 4px solid #7ab7d4;
padding-left: 1rem;
background: #f0f7fc;
border-radius: 0 12px 12px 0;
line-height: 1.4;
}
.subhead strong {
color: #1c4e6e;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 1.5rem;
margin-bottom: 2rem;
}
.field-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.field-group label {
font-weight: 500;
font-size: 0.85rem;
color: #1d4a68;
letter-spacing: 0.02rem;
display: flex;
align-items: center;
gap: 0.3rem;
}
.field-group label i {
color: #6999b5;
font-style: normal;
font-weight: 400;
}
.field-group input,
.field-group select,
.field-group textarea {
background: #f9fcff;
border: 1px solid #dae6ed;
border-radius: 16px;
padding: 0.7rem 1rem;
font-size: 0.95rem;
transition: 0.2s;
outline: none;
width: 100%;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
border-color: #2c7da0;
box-shadow: 0 0 0 3px rgba(44, 125, 160, 0.2);
background: white;
}
.field-group textarea {
resize: vertical;
min-height: 80px;
}
.full-width {
grid-column: span 2;
}
.action-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 0.8rem;
margin-top: 0.5rem;
border-top: 1px solid #e6edf4;
padding-top: 1.8rem;
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 0.8rem;
}
.btn {
border: none;
background: #eef4f8;
padding: 0.6rem 1.2rem;
border-radius: 40px;
font-weight: 500;
font-size: 0.9rem;
color: #1f4b66;
cursor: pointer;
transition: 0.15s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: 1px solid transparent;
}
.btn-primary {
background: #1c6d8f;
color: white;
box-shadow: 0 4px 8px rgba(28, 109, 143, 0.15);
}
.btn-primary:hover {
background: #125474;
transform: scale(0.97);
box-shadow: 0 6px 12px rgba(28, 109, 143, 0.2);
}
.btn-outline {
background: white;
border-color: #cbdbe7;
color: #1f4b66;
}
.btn-outline:hover {
background: #f2f9ff;
border-color: #80b3cc;
}
.btn-danger {
background: #ffeae5;
color: #9f4d3c;
}
.btn-danger:hover {
background: #fcdbd2;
}
.btn-success {
background: #dff0e6;
color: #1c6f4b;
}
.btn-success:hover {
background: #cee7da;
}
.badge {
background: #e2ecf5;
border-radius: 40px;
padding: 0.25rem 1rem;
font-size: 0.8rem;
color: #1f4b66;
font-weight: 450;
}
.badge span {
font-weight: 700;
color: #0b3852;
}
#previewBox {
background: #f4faff;
border-radius: 20px;
padding: 1rem 1.3rem;
margin-top: 1.2rem;
border: 1px solid #d8e5ef;
font-size: 0.9rem;
color: #1a3d53;
word-break: break-word;
max-height: 180px;
overflow-y: auto;
white-space: pre-wrap;
font-family: 'SF Mono', 'Fira Code', monospace;
transition: 0.1s;
}
#previewBox:empty {
display: none;
}
.gen-note {
font-size: 0.8rem;
color: #618aa5;
margin-top: 0.6rem;
text-align: right;
}
@media (max-width: 540px) {
.container { padding: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; gap: 1rem; }
.full-width { grid-column: span 1; }
.action-bar { flex-direction: column; align-items: stretch; }
}
</style>
</head>
<body>
<div class="container">
<h1>📋 表单生成器</h1>
<div class="subhead">
⚡ 由脚本动态生成 · 字段预设 <strong>5 项</strong>，实时预览 JSON 数据
</div>
<!-- 动态表单区域：由 JavaScript 注入 -->
<div id="formMount" class="grid-2"></div>
<!-- 操作栏 + 预览 -->
<div class="action-bar">
<div class="btn-group">
<button class="btn btn-primary" id="previewBtn">🔍 预览数据</button>
<button class="btn btn-success" id="exportBtn">📥 导出 JSON</button>
<button class="btn btn-danger" id="resetBtn">↺ 重置默认</button>
</div>
<div class="badge">
🧩 字段 <span id="fieldCount">0</span>
</div>
</div>
<!-- 实时预览面板 -->
<div id="previewBox" placeholder="点击 [预览数据] 或修改字段值…">▶ 点击预览 或 修改任意字段</div>
<div class="gen-note">* 脚本自动挂载表单，修改即收集</div>
</div>
<script>
(function() {
// ---------- 脚本生成：表单定义 ----------
// 核心数据结构：字段列表 (可自由扩展)
const FIELD_CONFIG = [
{ key: 'fullName', label: '👤 姓名', type: 'text', placeholder: '张三', defaultValue: '李华' },
{ key: 'email', label: '✉️ 邮箱', type: 'email', placeholder: 'name@example.com', defaultValue: 'lihua@demo.cn' },
{ key: 'age', label: '🎂 年龄', type: 'number', placeholder: '18-99', defaultValue: 28 },
{ key: 'role', label: '💼 角色', type: 'select', options: ['开发者', '设计师', '产品经理', '数据分析', '其他'], defaultValue: '开发者' },
{ key: 'comment', label: '📝 备注', type: 'textarea', placeholder: '可选填写…', defaultValue: '由脚本生成的表单' }
];
// DOM 元素
const mountEl = document.getElementById('formMount');
const previewBox = document.getElementById('previewBox');
const fieldCountSpan = document.getElementById('fieldCount');
const previewBtn = document.getElementById('previewBtn');
const exportBtn = document.getElementById('exportBtn');
const resetBtn = document.getElementById('resetBtn');
// 存储当前表单数据 (用于预览、导出)
let currentFormData = {};
// ---------- 核心：渲染表单 (生成 input/select/textarea) ----------
function renderForm() {
if (!mountEl) return;
// 清空挂载点
mountEl.innerHTML = '';
// 记录生成的字段名 (用于数据收集)
const fieldKeys = [];
FIELD_CONFIG.forEach((field, index) => {
const { key, label, type, placeholder, defaultValue, options } = field;
fieldKeys.push(key);
// 创建包裹容器
const group = document.createElement('div');
group.className = 'field-group';
// 备注占整行 (full-width)
if (key === 'comment') {
group.classList.add('full-width');
}
// ---------- label ----------
const labelEl = document.createElement('label');
labelEl.setAttribute('for', `field-${key}`);
labelEl.textContent = label || key;
// 可选小标记
group.appendChild(labelEl);
// ---------- 根据 type 创建输入控件 ----------
let inputEl = null;
if (type === 'select') {
// SELECT
inputEl = document.createElement('select');
inputEl.id = `field-${key}`;
inputEl.name = key;
// 填充 options
const opts = options || ['选项1', '选项2'];
opts.forEach(optText => {
const opt = document.createElement('option');
opt.value = optText;
opt.textContent = optText;
if (optText === (defaultValue || opts[0])) {
opt.selected = true;
}
inputEl.appendChild(opt);
});
// 设置默认值 (defaultValue 匹配)
if (defaultValue && opts.includes(defaultValue)) {
inputEl.value = defaultValue;
}
} else if (type === 'textarea') {
// TEXTAREA
inputEl = document.createElement('textarea');
inputEl.id = `field-${key}`;
inputEl.name = key;
inputEl.placeholder = placeholder || '';
inputEl.rows = 3;
inputEl.textContent = defaultValue || '';
} else {
// input (text, email, number, etc.)
inputEl = document.createElement('input');
inputEl.id = `field-${key}`;
inputEl.name = key;
inputEl.type = type === 'number' ? 'number' : (type || 'text');
inputEl.placeholder = placeholder || '';
// 处理 number 类型默认值
if (type === 'number') {
inputEl.value = defaultValue !== undefined ? defaultValue : '';
} else {
inputEl.value = defaultValue || '';
}
}
// 公共属性：设置 data-key 用于快速取值
if (inputEl) {
inputEl.dataset.fieldKey = key;
// 添加事件监听 —— 任何输入改变都更新预览 (自动收集)
inputEl.addEventListener('input', function(e) {
collectFormData();
updatePreview();
});
inputEl.addEventListener('change', function(e) {
// select 等 change 触发
collectFormData();
updatePreview();
});
}
group.appendChild(inputEl);
mountEl.appendChild(group);
// 存储初始默认值 (便于重置)
if (inputEl) {
// 对于 select 使用 value
const initVal = inputEl.value || defaultValue || '';
currentFormData[key] = initVal;
}
});
// 更新字段计数
if (fieldCountSpan) {
fieldCountSpan.textContent = fieldKeys.length;
}
// 初始收集数据 & 预览
collectFormData();
updatePreview();
}
// ---------- 收集表单数据到 currentFormData ----------
function collectFormData() {
const formElements = mountEl.querySelectorAll('input, select, textarea');
const data = {};
formElements.forEach(el => {
const key = el.dataset.fieldKey || el.name;
if (key) {
// 数字类型转数字 (保留原始输入)
if (el.type === 'number') {
const val = el.value.trim();
data[key] = val === '' ? '' : Number(val);
} else {
data[key] = el.value;
}
}
});
// 合并 (确保包含所有字段)
FIELD_CONFIG.forEach(f => {
if (!(f.key in data)) {
data[f.key] = f.defaultValue || '';
}
});
currentFormData = data;
return data;
}
// ---------- 更新预览面板 ----------
function updatePreview() {
if (!previewBox) return;
const data = currentFormData && Object.keys(currentFormData).length > 0
? currentFormData
: collectFormData();
try {
// 美化 JSON 输出
const jsonStr = JSON.stringify(data, null, 2);
previewBox.textContent = jsonStr;
} catch (e) {
previewBox.textContent = '⚠️ 数据序列化异常';
}
}
// ---------- 重置表单到默认值 ----------
function resetToDefault() {
const formElements = mountEl.querySelectorAll('input, select, textarea');
formElements.forEach(el => {
const key = el.dataset.fieldKey || el.name;
const fieldDef = FIELD_CONFIG.find(f => f.key === key);
if (!fieldDef) return;
const defaultVal = fieldDef.defaultValue !== undefined ? fieldDef.defaultValue : '';
if (el.tagName === 'SELECT') {
// 对于 select，尝试匹配默认值
const opts = fieldDef.options || [];
if (defaultVal && opts.includes(defaultVal)) {
el.value = defaultVal;
} else {
el.value = opts[0] || '';
}
} else if (el.type === 'number') {
el.value = defaultVal !== '' ? defaultVal : '';
} else {
el.value = defaultVal || '';
}
});
// 重新收集 & 预览
collectFormData();
updatePreview();
}
// ---------- 导出 JSON (下载) ----------
function exportJSON() {
const data = collectFormData();
const jsonStr = JSON.stringify(data, null, 2);
const blob = new Blob([jsonStr], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, '');
a.download = `表单数据_${timestamp}.json`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
// 反馈
previewBox.textContent = jsonStr;
// 小提示
const note = document.querySelector('.gen-note');
if (note) {
note.textContent = '✅ JSON 已导出 ' + new Date().toLocaleTimeString();
setTimeout(() => {
note.textContent = '* 脚本自动挂载表单，修改即收集';
}, 3000);
}
}
// ---------- 手动预览 (强调) ----------
function previewData() {
collectFormData();
updatePreview();
// 闪一下提示
if (previewBox) {
previewBox.style.background = '#e5f3ff';
setTimeout(() => {
previewBox.style.background = '#f4faff';
}, 300);
}
}
// ---------- 初始化绑定事件 ----------
function initEventListeners() {
if (previewBtn) previewBtn.addEventListener('click', previewData);
if (exportBtn) exportBtn.addEventListener('click', exportJSON);
if (resetBtn) resetBtn.addEventListener('click', resetToDefault);
}
// ---------- 启动：渲染表单，挂载事件 ----------
function init() {
renderForm();
initEventListeners();
// 额外：确保预览显示
if (previewBox && !previewBox.textContent.trim()) {
previewBox.textContent = '▶ 点击预览 或 修改任意字段';
}
}
// DOM 就绪执行
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
</script>
</body>
</html>
表单生成与数据管理
您可以通过修改脚本开头的 FIELD_CONFIG 数组来定制表单字段，生成后，所有操作都围绕数据收集与导出展开。
- 动态表单生成：脚本根据
FIELD_CONFIG配置，自动创建包含文本、数字、下拉菜单和文本域等类型的表单字段。 - 实时数据预览：您修改任何字段的值，下方的预览面板都会立即以 JSON 格式显示当前表单的完整数据。
- 数据重置与导出：点击“重置默认”可恢复所有字段的初始值。“导出 JSON”则会将当前数据下载为一个格式化的 JSON 文件。
