只要是form数据都可以展示,下面是一个示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Data Display</title> <style> .read-only-container { margin: 20px; padding: 20px; border: 1px solid #ccc; } .read-only-field { margin-bottom: 10px; } .read-only-label { font-weight: bold; } </style> </head> <body> <div id="read-only-display"></div> <script> function displayReadOnlyData(formData) { const container = document.getElementById('read-only-display'); container.innerHTML = ''; // 清空容器内容 for (const key in formData) { if (formData.hasOwnProperty(key)) { const fieldContainer = document.createElement('div'); fieldContainer.className = 'read-only-field'; const label = document.createElement('span'); label.className = 'read-only-label'; label.textContent = `${key}: `; const value = document.createElement('span'); value.textContent = formData[key]; fieldContainer.appendChild(label); fieldContainer.appendChild(value); container.appendChild(fieldContainer); } } } // 示例表单数据 const exampleFormData = { name: 'John Doe', age: '30', email: 'john.doe@example.com' }; // 调用展示只读数据的函数 displayReadOnlyData(exampleFormData); </script> </body> </html>
网友回复
js如何流式输出ai的回答并折叠代码块,点击代码块右侧可预览代码?
ai大模型如何将文章转换成可视化一目了然的图片流程图图表?
大模型生成html版本的ui原型图和ppt演示文档的系统提示词怎么写?
rtsp视频直播流如何转换成websocket流在h5页面上观看?
为啥coze会开源工作流agent coze studio?
如何检测网页是通过收藏夹打开的?
python如何实现类似php的http动态脚本请求处理响应代码?
js如何实现类似php的http动态脚本请求处理响应代码?
trae与solo有啥区别不同?
vue如何让ai动态生成问卷调查多步骤表单式收集基础信息自动规划执行任务?