样本：

Question

再次编辑：

当然这是标准的东西？我不能重新发明轮子?? !!用户填写表单并向他显示（使用PHP，但这不重要）。你把它作为确认显示给他，所以他不应该再次尝试改变它......

参见相关问题，How to display a form list box as read-only or disabled with a selected index?要点是我想要执行一项非常常见的任务......

有两种形式 - HTML中的提交表单和处理＆amp; PHP中的确认表。

第一种形式在许多控件中提供选择，第二种形式在输入中进行验证，如果有效，则再次使用确认消息显示输入表单。在第二个表单中，所有字段都必须是静态的。

从我所看到的情况来看，某些表单控件可以是readonly，所有表单控件都可以是disabled，不同之处在于您仍然可以选择只读取字段。

不是按字段进行此字段，而是将整个表单标记为只读/禁用/静态，以便用户不能更改任何控件？

编辑：感谢所有JS解决方案（我有+1），但我只能使用服务器端解决方案。对不起，我本来应该这么说。

[更新]七年后仍然得到答案;-)我最终做的是从PHP生成表单，并为每个字段写一个readonly或disabled属性（根据控件的类型而定），根据全局变量设置为true或false。

Answer 1

将输入字段和其他内容包装到<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>

Answer 2

并非所有表单元素都可以设置为`readonly`，例如：

复选框
收音机盒
文件上传
...更多..

然后合理的解决方案是设置所有表单元素＆＃39; disabled属性为true，因为OP没有声明具体的＆＃34;锁定＆＃34;表单应该发送到服务器（disabled属性不允许）。

下面的演示中提供的另一个解决方案是在form元素的顶部放置一个图层，这将阻止与form元素内的所有元素进行任何交互，因为该图层设置了更大的z-index值：

样本：

＆＃13;

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');
}

＆＃13;

form{ position:relative; } 
form.lock::before{
  content:'';
  position:absolute;
  z-index:999;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

button.on{ color:red; }

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用此功能禁用表单：

function disableForm(formID){
  $('#' + formID).children(':input').attr('disabled', 'disabled');
}

See the working demo here

请注意，它使用jQuery。

Answer 4

在确认页面上，不要将内容放在可编辑的控件中，只需将它们写入页面即可。

Answer 5

我知道没有内置的方法来执行此操作，因此您需要根据表单的复杂程度提出自定义解决方案。你应该阅读这篇文章：

Convert HTML forms to read-only

编辑：根据您的更新，您为什么如此担心只读？您可以通过客户端执行此操作但如果不是，则必须将必需的标记添加到每个控件或转换数据并将其显示为没有控件的原始文本。如果你试图让它只读，以便下一篇文章不会被修改，那么你有一个问题，因为任何人都可以搞乱帖子来产生他们想要的东西所以当你实际上最终收到数据时你最好再次检查它确保它有效。

Answer 6

没有完全兼容的官方HTML方式，但是一点点javascript可以走很长的路。您将遇到的另一个问题是禁用的字段不会显示在POST数据中

Answer 7

所有浏览器都支持的另一种简单方式是：

HTML：

<form class="disabled">
  <input type="text" name="name" />
  <input type="radio" name="gender" value="male">
  <input type="radio" name="gender" value="female">
  <input type="checkbox" name="vegetarian">
</form>

CSS：

.disabled {
  pointer-events: none;
  opacity: .4;
}

但是请注意，制表符仍然可以使用这种方法，并且具有焦点的元素仍可以由用户操纵。

Answer 8

将所有表单id编号并在JS中运行for循环。

 for(id = 0; id<NUM_ELEMENTS; id++)
   document.getElementById(id).disabled = false;

Answer 9

我宁愿使用jQuery：

$('#'+formID).find(':input').attr('disabled', 'disabled');

find（）会比第n个嵌套子项更深入，而不是子项（），它只查找直接的子项。

Answer 10

最简单的方法

$('#yourform *').prop('readonly', true);

Answer 11

这是禁用指定元素中所有 inputs ， textareas ， selects 和 buttons 的理想解决方案

对于jQuery 1.6及更高版本：

// To fully disable elements
$('#myForm :input').prop('disabled', true);

或

// To make elements readonly
$('#myForm :input').prop('readonly', true);

jQuery 1.5及更低版本：

$('#myForm :input').prop('disabled', 'disabled');

和

$('#myForm :input').prop('readonly', 'readonly');

Answer 12

您在表单上添加了html不可见层。例如

<div class="coverContainer">
<form></form>
</div>

和样式：

.coverContainer{
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
    position: absolute;
}

当然，用户可以在Web浏览器中隐藏该层。

如何将整个HTML表单“只读”？

12 个答案:

并非所有表单元素都可以设置为`readonly`，例如：

样本：

如何将整个HTML表单“只读”？

12 个答案:

并非所有表单元素都可以设置为readonly，例如：

样本：

并非所有表单元素都可以设置为`readonly`，例如：