如何使整个 HTML 表单“只读”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3507958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make an entire HTML form "readonly"?
提问by Mawg says reinstate Monica
I have two pages with HTML forms. The first page has a submission form, and the second page has an acknowledgement form. The first form offers a choice of many controls, while the second page displays the data from the submission form again with a confirmation message. On this second form all fields must be static.
我有两个带有 HTML 表单的页面。第一页有提交表格，第二页有确认表格。第一个表单提供了许多控件的选择，而第二个页面再次显示来自提交表单的数据和确认消息。在第二个表单中，所有字段都必须是静态的。
From what I can see, some form controls can be readonlyand all can be disabled, the difference being that you can still tab to a readonly field.
据我所知，某些表单控件可以是readonly，所有控件都可以是disabled，不同之处在于您仍然可以使用 Tab 键切换到只读字段。
Rather than doing this field by field is there any way to mark the whole form as readonly/disabled/static such that the user can't alter any of the controls?
有没有办法将整个表单标记为只读/禁用/静态，以便用户无法更改任何控件，而不是逐个字段执行此字段？
回答by Klemen Tu?ar
Wrap the input fields and other stuff into a <fieldset>and give it the disabled="disabled"attribute.
将输入字段和其他内容包装到 a 中<fieldset>并为其赋予disabled="disabled"属性。
Example (http://jsfiddle.net/7qGHN/):
示例（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>回答by vsync
Not all form elements can be set to readonly, for example:
并非所有表单元素都可以设置为readonly，例如：
- checkboxes
- radio boxes
- file upload
- ...more..
- 复选框
- 收音机盒
- 上传文件
- ...更多的..
Then the reasonable solution would be to set all form elements' disabledattributes to true, since the OP did not state that the specific "locked" form should be sent to the server (which the disabledattribute does not allow).
那么合理的解决方案是将所有表单元素的disabled属性设置为true，因为 OP 没有说明应该将特定的“锁定”表单发送到服务器（该disabled属性不允许）。
Another solution, which is presented in the demo below, is to place a layer on top of the formelement which will prevent any interaction with all the elements inside the formelement, since that layer is set with a greater z-indexvalue:
下面演示中介绍的另一个解决方案是在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>回答by Sarfraz
You can use this function to disable the form:
您可以使用此功能禁用表单：
function disableForm(formID){
$('#' + formID).children(':input').attr('disabled', 'disabled');
}
Note that it uses jQuery.
请注意，它使用 jQuery。
回答by Doobi
On the confirmation page, don't put the content in editable controls, just write them to the page.
在确认页面，不要把内容放在可编辑控件中，直接写到页面上即可。
回答by Kelsey
There is no built-in way that I know of to do this so you will need to come up with a custom solution depending on how complicated your form is. You should read this post:
我知道没有内置的方法可以执行此操作，因此您需要根据表单的复杂程度提出自定义解决方案。你应该阅读这篇文章：
Convert HTML forms to read-only(Update: broken post link, archived link)
将 HTML 表单转换为只读（更新：损坏的帖子链接、存档链接）
EDIT:Based on your update, why are you so worried about having it read-only? You can do it via client-side but if not you will have to add the required tag to each control or convert the data and display it as raw text with no controls. If you are trying to make it read-only so that the next post will be unmodified then you have a problem because anyone can mess with the post to produce whatever they want so when you do in fact finally receive the data you better be checking it again to make sure it is valid.
编辑：根据您的更新，您为什么如此担心将其设为只读？您可以通过客户端执行此操作，但如果不是，则必须将所需的标记添加到每个控件或转换数据并将其显示为没有控件的原始文本。如果您试图将其设置为只读以便下一篇文章不会被修改，那么您就会遇到问题，因为任何人都可以弄乱该文章以生成他们想要的任何内容，因此当您实际上最终收到数据时，您最好检查它再次确保它是有效的。
回答by Mystical
This is an ideal solution for disabling all inputs, textareas, selectsand buttonsin a specified element.
这是禁用指定元素中的所有输入、文本区域、选择和按钮的理想解决方案。
For jQuery 1.6 and above:
对于 jQuery 1.6 及更高版本：
// To fully disable elements
$('#myForm :input').prop('disabled', true);
Or
或者
// To make elements readonly
$('#myForm :input').prop('readonly', true);
jQuery 1.5 and below:
jQuery 1.5 及以下：
$('#myForm :input').prop('disabled', 'disabled');
And
和
$('#myForm :input').prop('readonly', 'readonly');
回答by Michael Clerx
There's no fully compliant, official HTML way to do it, but a little javascript can go a long way. Another problem you'll run into is that disabled fields don't show up in the POST data
没有完全兼容的、官方的 HTML 方法来做到这一点，但是一点点 javascript 可以大有帮助。您会遇到的另一个问题是禁用的字段不会显示在 POST 数据中
回答by M. Neuweiler
Another simple way that's supported by all browsers would be:
所有浏览器都支持的另一种简单方法是：
HTML:
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:
CSS：
.disabled {
pointer-events: none;
opacity: .4;
}
But be aware, that the tabbing still works with this approach and the elements with focus can still be manipulated by the user.
但请注意，标签仍然适用于这种方法，并且具有焦点的元素仍然可以由用户操作。
回答by Marcin ?urek
You add html invisible layer over the form. For instance
您在表单上添加 html 不可见层。例如
<div class="coverContainer">
<form></form>
</div>
and style:
和风格：
.coverContainer{
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0);
position: absolute;
}
Ofcourse user can hide this layer in web browser.
当然用户可以在网络浏览器中隐藏这一层。
回答by T.T.T.
Have all the form id's numbered and run a for loop in JS.
将所有表单 id 编号并在 JS 中运行 for 循环。
for(id = 0; id<NUM_ELEMENTS; id++)
document.getElementById(id).disabled = false;
