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

Edit again:

Surely this is standard stuff? I can't be reinventing the wheel??!! User fills in a form and you show it to him (using PHP, but that should not matter). You show it to him as confirmation, so he should not be able to attempt to change it again ...

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

---

See related question, How to display a form list box as read-only or disabled with a selected index? The gist of it is that I want to perform what must be a very common task ...

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

There are two forms - a submission form in HTML and a processing & acknowledgement form in PHP.

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

The first form offers a choice in many controls, the second verifies the input and, if valid, displays the input form again with a confirmation message. On this second form all fields must be static.

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

From what I can see, some form controls can be readonly and all can be disabled, the difference being that you can still tab to a readonly field.

从我所看到的,一些表单控件可以是只读的,并且所有表单控件都可以被禁用,不同之处在于你仍然可以选择一个只读字段。

Rather than doing this field by field is there anyway to mark the whole form as readonly/disabled/static such that the user can't alter any of the controls?

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

---

Edit: thanks for all the JS solutions (which I have +1) but I am restricted to a server-side solution. Sorry, I ought to have said this originally.

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

---

[Update] This is still getting answers seven years later ;-) What I did, in the end, was to generate the form from PHP and, for each field write a readonly or disabled attribute (as appropriate to the type of control), set to true or false according to to a global variable.

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

11 个解决方案

#1

Wrap the entire form's content in a <fieldset> tag and set it's disabled attribute.

将整个表单的内容包装在

标记中,并将其设置为disabled属性。

<form>
    <fieldset disabled>
        <input/>
        <input/>
        <input/>
    </fieldset>
</form>

#2

Wrap the input fields and other stuff into a <fieldset> and give it the disabled="disabled" attribute.

将输入字段和其他内容包装到

中,并为其指定disabled =“disabled”属性。

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

#3

You can use this function to disable the form:

您可以使用此函数禁用表单:

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

See the working demo here

请参阅此处的工作演示

Note that it uses jQuery.

请注意,它使用jQuery。

#4

Not all form elements can be set to readonly, for example:

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

• checkboxes
• radio boxes
• file upload
• ...more..

Then the reasonable solution would be to set all form elements' disabled attributes to true, since the OP did not state that the specific "locked" form should be sent to the server (which the disabled attribute does not allow).

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

Another solution, which is presented in the demo below, is to place a layer on top of the form element which will prevent any interaction with all the elements inside the form element, since that layer is set with a greater z-index value:

下面的演示中提供的另一个解决方案是在表单元素的顶部放置一个图层,这将阻止与表单元素内的所有元素进行任何交互,因为该图层设置了更大的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>

#5

On the confirmation page, don't put the content in editable controls, just write them to the page.

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

#6

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

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

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

#7

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数据中

#8

I'd rather use jQuery:

我宁愿使用jQuery:

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

find() would go much deeper till nth nested child than children(), which looks for immediate children only.

find()会比第n个嵌套子项更深入,而不是子项(),它只查找直接子项。

#9

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; 

#10

Easiest way

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

#11

This is an ideal solution for disabling all inputs, textareas, selects and buttons in a specified element.

这是禁用指定元素中所有输入,textareas,选择和按钮的理想解决方案。

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