Ich habe zwei Seiten mit HTML-Formularen. Die erste Seite hat ein Einreichungsformular und die zweite Seite hat ein Bestätigungsformular. Das erste Formular bietet eine Auswahl vieler Steuerelemente, während auf der zweiten Seite die Daten aus dem Übermittlungsformular erneut mit einer Bestätigungsnachricht angezeigt werden. In diesem zweiten Formular müssen alle Felder statisch sein.

Soweit ich sehen kann, können einige Formularsteuerelemente sein readonlyund alle können es sein disabled, mit dem Unterschied, dass Sie immer noch zu einem schreibgeschützten Feld wechseln können.

Gibt es eine Möglichkeit, das gesamte Formular als schreibgeschützt / deaktiviert / statisch zu markieren, anstatt es Feld für Feld auszuführen, sodass der Benutzer keines der Steuerelemente ändern kann?

Wickeln Sie die Eingabefelder und andere Dinge in ein <fieldset>und geben Sie ihm das disabled="disabled"Attribut.

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

Nicht alle Formularelemente können festgelegt werden readonly, zum Beispiel:

• Kontrollkästchen
• Radioboxen
• Datei-Upload
• ...Mehr..

Dann wäre die vernünftige Lösung, die disabledAttribute aller Formularelemente auf zu setzentrue , da das OP nicht angegeben hat, dass das spezifische "gesperrte" Formular an den Server gesendet werden soll (was das disabledAttribut nicht zulässt).

Eine andere Lösung, die in der folgenden Demo vorgestellt wird, besteht darin, eine Ebene über dem formElement zu platzieren, die jegliche Interaktion mit allen Elementen innerhalb des formElements verhindert, da diese Ebene mit einer größeren Ebene festgelegt istz-index Wert festgelegt ist:

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>

Mit dieser Funktion können Sie das Formular deaktivieren:

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

Sehen Sie hier die Arbeitsdemo

Beachten Sie, dass jQuery verwendet wird.

Fügen Sie den Inhalt auf der Bestätigungsseite nicht in bearbeitbare Steuerelemente ein, sondern schreiben Sie ihn einfach auf die Seite.

Ich kenne keine integrierte Methode, um dies zu tun. Je nachdem, wie kompliziert Ihr Formular ist, müssen Sie eine benutzerdefinierte Lösung finden. Sie sollten diesen Beitrag lesen:

HTML-Formulare in schreibgeschützte konvertieren ( Update : defekter Post-Link, archivierter Link )

BEARBEITEN: Warum sind Sie aufgrund Ihres Updates so besorgt, dass es schreibgeschützt ist? Sie können dies clientseitig tun. Andernfalls müssen Sie jedem Steuerelement das erforderliche Tag hinzufügen oder die Daten konvertieren und als Rohtext ohne Steuerelemente anzeigen. Wenn Sie versuchen, es schreibgeschützt zu machen, damit der nächste Beitrag nicht geändert wird, haben Sie ein Problem, da jeder mit dem Beitrag herumspielen kann, um das zu produzieren, was er will. Wenn Sie also tatsächlich die Daten erhalten, sollten Sie sie besser überprüfen erneut, um sicherzustellen, dass es gültig ist.

Es gibt keine vollständig konforme, offizielle HTML-Methode, aber ein wenig Javascript kann viel bewirken. Ein weiteres Problem besteht darin, dass deaktivierte Felder in den POST-Daten nicht angezeigt werden

Dies ist eine ideale Lösung zum Deaktivieren aller Eingaben , Textbereiche , Auswahlen und Schaltflächen in einem bestimmten Element.

Für jQuery 1.6 und höher :

// To fully disable elements
$('#myForm :input').prop('disabled', true); 

Oder

// To make elements readonly
$('#myForm :input').prop('readonly', true); 

jQuery 1.5 und niedriger :

$('#myForm :input').prop('disabled', 'disabled');

Und

$('#myForm :input').prop('readonly', 'readonly');

Eine andere einfache Möglichkeit, die von allen Browsern unterstützt wird, ist:

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:

.disabled {
  pointer-events: none;
  opacity: .4;
}

Beachten Sie jedoch, dass das Tabbing bei diesem Ansatz weiterhin funktioniert und die Elemente mit Fokus weiterhin vom Benutzer bearbeitet werden können.

Lassen Sie alle Formular-IDs nummerieren und führen Sie eine for-Schleife in JS aus.

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

Ich würde lieber jQuery verwenden:

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

find () würde bis zum n-ten verschachtelten Kind viel tiefer gehen als children (), das nur nach unmittelbaren Kindern sucht.

Einfachster Weg

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

Sie fügen dem Formular eine unsichtbare HTML-Ebene hinzu. Zum Beispiel

<div class="coverContainer">
<form></form>
</div>

und Stil:

.coverContainer{
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
    position: absolute;
}

Natürlich kann der Benutzer diese Ebene im Webbrowser ausblenden.