我怎样才能使整个HTML表单“只读”？ 请仅服务器端
再次编辑：
当然这是标准的东西？ 我不能重新发明轮子！ 用户填写表单，然后显示给他（使用PHP，但这不应该）。 你向他certificate他是确认，所以他不应该再试图改变它…
看到相关的问题， 如何显示一个表单列表框为只读或禁用选定的索引？ 它的要点是我想要执行什么是一个非常普通的任务…
有两种forms – HTML中的提交表单和PHP中的处理和确认表单。
第一种forms提供了许多控件的select，第二种formsvalidationinput，如果有效，再次用确认消息显示inputforms。 在第二种forms中，所有字段必须是静态的。
从我可以看到，一些表单控件可以readonly ，所有可以被disabled ，不同之处在于，你仍然可以select只读字段。
而不是按字段来做这个字段是否有把整个表单标记为只读/禁用/静态，这样用户不能改变任何控件？
编辑：谢谢所有的JS解决scheme（我有+1），但我只限于服务器端的解决scheme。 对不起，我原本应该这样说的。
[更新]七年后仍然可以得到答案;-)我最后做的是从PHP生成表单，并为每个字段写一个readonly或disabled属性（与控件的types相适应），根据全局variables设置为true或false。
将整个表单的内容包装在<fieldset>标记中，并将其设置为disabled属性。
<form> <fieldset disabled> <input/> <input/> <input/> </fieldset> </form>
将input字段和其他内容<fieldset>到<fieldset>并为其指定disabled="disabled"属性。
示例（ http://jsfiddle.net/7qGHN/ ）：
<form> <fieldset disabled="disabled"> <input type="text" name="something" placeholder="enter some text" /> <select> <option value="0" disabled="disabled" selected="selected">select somethihng</option> <option value="1">woot</option> <option value="2">is</option> <option value="3">this</option> </select> </fieldset> </form>
您可以使用此function来禁用表单：
function disableForm(formID){ $('#' + formID).children(':input').attr('disabled', 'disabled'); }
在这里看到工作演示
请注意，它使用jQuery。
并不是所有的表单元素都可以设置为readonly ，例如：
- checkbox
- 收音机
- 上传文件
- …更多..
那么合理的解决scheme是将所有表单元素的disabled属性设置为true ，因为OP没有声明特定的“locking”表单应该发送到服务器（ disabled属性不允许）。
在下面的演示中提出的另一个解决scheme是在form元素的顶部放置一个图层，这将防止与form元素中的所有元素进行交互，因为该图层具有更大的z-index值：
DEMO：
var form = document.forms[0], // form element to be "readonly" btn1 = document.querySelectorAll('button')[0], btn2 = document.querySelectorAll('button')[1] btn1.addEventListener('click', lockForm) btn2.addEventListener('click', lockFormByCSS) function lockForm(){ btn1.classList.toggle('on'); [].slice.call( form.elements ).forEach(function(item){ item.disabled = !item.disabled; }); } function lockFormByCSS(){ btn2.classList.toggle('on'); form.classList.toggle('lock'); }
form{ position:relative; } form.lock::before{ content:''; position:absolute; z-index:999; top:0; right:0; bottom:0; left:0; } button.on{ color:red; }
<button type='button'>Lock / Unlock Form</button> <button type='button'>Lock / Unlock Form (with CSS)</button> <br><br> <form> <fieldset> <legend>Some Form</legend> <input placeholder='text input'> <br><br> <input type='file'> <br><br> <textarea placeholder='textarea'></textarea> <br><br> <label><input type='checkbox'>Checkbox</label> <br><br> <label><input type='radio' name='r'>option 1</label> <label><input type='radio' name='r' checked>option 2</label> <label><input type='radio' name='r'>option 3</label> <br><br> <select> <option>options 1</option> <option>options 2</option> <option selected>options 3</option> </select> </fieldset> </form>
没有内build的方式，我知道要做到这一点，所以你将需要提出一个自定义的解决scheme，取决于你的forms是多么复杂。 你应该阅读这篇文章：
将HTML表单转换为只读
编辑：根据你的更新，你为什么如此担心只读？ 你可以通过客户端来完成，但是如果没有的话，你将不得不为每个控件添加所需的标签，或者将数据转换为原始文本而不显示控件。 如果你想让它只读，以便下一篇文章是未经修改的，那么你有一个问题，因为任何人都可以捣乱的职位生产任何他们想要的，所以当你这样做，事实上最后收到的数据，你最好再次检查以确保它是有效的。
在确认页面上，不要将内容放在可编辑的控件中，只要将它们写入页面即可。
有没有完全兼容，官方的HTML方式来做到这一点，但一点点的JavaScript可以走很长的路要走。 您遇到的另一个问题是，禁用的字段不会显示在POST数据中
让所有的表单ID的编号，并在JS中运行一个for循环。
for(id = 0; id<NUM_ELEMENTS; id++) document.getElementById(id).disabled = false;
我宁愿使用jQuery：
$('#'+formID).find(':input').attr('disabled', 'disabled');
find（）会比第二个嵌套的子节点更深，而child（）只能查找直接子节点。
