전체 HTML 양식을 "읽기 전용"으로 만들려면 어떻게해야합니까?

전체 HTML 양식을 "읽기 전용"으로 만들려면 어떻게해야합니까?

---

HTML 양식이있는 두 페이지가 있습니다. 첫 번째 페이지에는 제출 양식이 있고 두 번째 페이지에는 승인 양식이 있습니다. 첫 번째 양식은 많은 컨트롤을 선택할 수있는 반면, 두 번째 페이지는 제출 양식의 데이터를 확인 메시지와 함께 다시 표시합니다. 이 두 번째 양식에서 모든 필드는 정적이어야합니다.

내가 볼 수 있듯이, 일부 양식 컨트롤은 readonly모두 가능하며 disabled, 차이점은 여전히 ​​읽기 전용 필드로 탭 할 수 있다는 것입니다.

이 필드를 필드별로 수행하는 대신 사용자가 컨트롤을 변경할 수 없도록 전체 양식을 읽기 전용 / 비활성화 / 정적으로 표시하는 방법이 있습니까?

---

입력 필드 및 기타 항목을 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>

---

readonly예를 들어 모든 양식 요소를로 설정할 수있는 것은 아닙니다 .

• 확인란
• 라디오 박스
• 파일 업로드
• ...더..

OP가 특정 "잠금"양식을 서버로 보내야한다고 명시하지 않았기 때문에 모든 양식 요소의 disabled속성을 로 설정하는 것이 합리적 솔루션입니다 true( disabled속성이 허용하지 않음).

아래 데모에서 제시되는 또 다른 솔루션은 form요소 위에 레이어를 배치 하여 요소 내부의 모든 요소와의 상호 작용을 방지 하는 레이어를 배치하는 것 form입니다. 레이어는 더 큰 z-index값으로 설정되어 있기 때문입니다 .

데모:

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>

---

이 기능을 사용하여 양식을 비활성화 할 수 있습니다.

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

실무 데모보기

jQuery를 사용합니다.

---

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

---

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.

---

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

---

Have all the form id's numbered and run a for loop in JS.

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

---

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.

---

Easiest way

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

---

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

---

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.

참고URL : https://stackoverflow.com/questions/3507958/how-can-i-make-an-entire-html-form-readonly