How can I make an entire HTML form readonly

Question

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   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 any way to mark the whole form as readonly disabled static such that the user can t alter any of the controls

User · Answer

You add html invisible layer over the form. For instance

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

User · Answer

Wrap the input fields and other stuff into a  lt fieldset gt  and give it the disabled  disabled  attribute   Example  http   jsfiddle net 7qGHN      x000D   x000D   lt form gt  x000D       lt fieldset disabled  disabled  gt  x000D           lt input type  text  name  something  placeholder  enter some text    gt  x000D           lt select gt  x000D               lt option value  0  disabled  disabled  selected  selected  gt select somethihng lt  option gt  x000D               lt option value  1  gt woot lt  option gt  x000D               lt option value  2  gt is lt  option gt  x000D               lt option value  3  gt this lt  option gt  x000D           lt  select gt  x000D       lt  fieldset gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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    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   DEMO    x000D   x000D  var form   document forms 0      form element to be  readonly  x000D      btn1   document querySelectorAll  button   0   x000D      btn2   document querySelectorAll  button   1  x000D   x000D  btn1 addEventListener  click   lockForm  x000D  btn2 addEventListener  click   lockFormByCSS  x000D   x000D  function lockForm    x000D    btn1 classList toggle  on    x000D       slice call  form elements   forEach function item   x000D        item disabled    item disabled  x000D        x000D    x000D   x000D  function lockFormByCSS    x000D    btn2 classList toggle  on    x000D    form classList toggle  lock    x000D    x000D  form  position relative     x000D  form lock  before  x000D    content     x000D    position absolute  x000D    z-index 999  x000D    top 0  x000D    right 0  x000D    bottom 0  x000D    left 0  x000D    x000D   x000D  button on  color red    x000D   lt button type  button  gt Lock   Unlock Form lt  button gt  x000D   lt button type  button  gt Lock   Unlock Form  with CSS  lt  button gt  x000D   lt br gt  lt br gt  x000D   lt form gt  x000D     lt fieldset gt  x000D       lt legend gt Some Form lt  legend gt  x000D       lt input placeholder  text input  gt  x000D       lt br gt  lt br gt  x000D       lt input type  file  gt  x000D       lt br gt  lt br gt  x000D       lt textarea placeholder  textarea  gt  lt  textarea gt  x000D       lt br gt  lt br gt  x000D       lt label gt  lt input type  checkbox  gt Checkbox lt  label gt  x000D       lt br gt  lt br gt  x000D       lt label gt  lt input type  radio  name  r  gt option 1 lt  label gt  x000D       lt label gt  lt input type  radio  name  r  checked gt option 2 lt  label gt  x000D       lt label gt  lt input type  radio  name  r  gt option 3 lt  label gt  x000D       lt br gt  lt br gt  x000D       lt select gt  x000D         lt option gt options 1 lt  option gt  x000D         lt option gt options 2 lt  option gt  x000D         lt option selected gt options 3 lt  option gt  x000D       lt  select gt  x000D     lt  fieldset gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Have all the form id s numbered and run a for loop in JS       for id   0  id lt NUM ELEMENTS  id       document getElementById id  disabled   false

User · Answer

Another simple way that s supported by all browsers would be   HTML    lt form class  disabled  gt     lt input type  text  name  name    gt     lt input type  radio  name  gender  value  male  gt     lt input type  radio  name  gender  value  female  gt     lt input type  checkbox  name  vegetarian  gt   lt  form gt    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

User · Answer

I d rather use jQuery         formID  find   input   attr  disabled    disabled      find   would go much deeper till nth nested child than children    which looks for immediate children only

User · Answer

This is an ideal solution for disabling all inputs  textareas  selects and buttons in a specified element   For jQuery 1 6 and above      To fully disable elements     myForm  input   prop  disabled   true      Or     To make elements readonly     myForm  input   prop  readonly   true      jQuery 1 5 and below       myForm  input   prop  disabled    disabled      And      myForm  input   prop  readonly    readonly

User · Answer

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

User · Answer

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

User · Answer

Easiest way      yourform     prop  readonly   true

User · Answer

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

[html] How can I make an entire HTML form "readonly"?

Examples related to html