如何将整个HTML表单"只读"？

Question

再次编辑:

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

---

请参阅相关问题,如何将表单列表框显示为只读或禁用所选索引？ 它的要点是我想执行一项非常常见的任务......

有两种形式 - HTML中的提交表单和PHP中的处理和确认表单.

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

从我所看到的,一些表单控件可以是,readonly而且一切都可以disabled,不同之处在于您仍然可以选择只读字段.

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

---

编辑:感谢所有JS解决方案(我有+1),但我只能使用服务器端解决方案.对不起,我本来应该这么说.

---

[更新]七年后仍然得到答案;-)我最后做的是从PHP生成表单,并为每个字段写一个readonly或disabled属性(适合控件的类型),设置为根据全局变量的真或假.

Answer 1

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

<form inert>

这不会改变表单的样式，但会阻止所有输入可聚焦并阻止任何按钮可单击。

Answer 3

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

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

然后合理的解决方案是将所有表单元素的disabled属性设置为true,因为OP没有声明应该将特定的"锁定"表单发送到服务器(disabled属性不允许).

下面演示中提供的另一个解决方案是在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>

Answer 4

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

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

请参阅此处的工作演示

请注意,它使用jQuery.

Answer 5

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

Answer 6

这是禁用指定元素中的所有输入、文本区域、选择和按钮的理想解决方案。

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

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

将 HTML 表单转换为只读（更新：损坏的帖子链接、存档链接）

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