Веб-формы — Как мне сделать полную HTML-форму «только для чтения»?
Изменить еще раз:
Конечно, это стандартные вещи? Я не могу изобретать велосипед ?? !! Пользователь заполняет форму, и вы показываете ее ему (используя PHP, но это не должно иметь значения). Вы показываете это ему как подтверждение, поэтому он не должен пытаться изменить это снова …
Смотрите связанный вопрос, Как отобразить список формы как доступный только для чтения или отключенный с выбранным индексом? Суть в том, что я хочу выполнить то, что должно быть очень распространенной задачей …
Есть две формы — форма представления в HTML и обработка & Форма подтверждения в PHP.
Первая форма предлагает выбор во многих элементах управления, вторая проверяет ввод и, если он действителен, снова отображает форму ввода с сообщением подтверждения. На этой второй форме все поля должны быть статическими.
Из того, что я вижу, некоторые элементы управления формой могут быть readonly и все может быть disabledразница в том, что вы все еще можете вкладывать в поле только для чтения.
Вместо того, чтобы делать это поле за полем, есть ли способ пометить всю форму как readonly / disabled / static, чтобы пользователь не мог изменить ни один из элементов управления?
Редактировать: спасибо за все решения JS (которые у меня +1), но я ограничен решением на стороне сервера. Извините, я должен был сказать это изначально.
[Update] Это все еще получает ответы семь лет спустя 😉 В конце концов я сделал, чтобы сгенерировать форму из PHP и для каждого поля написать
readonly или же disabled атрибут (в зависимости от типа элемента управления), установленный в true или false в соответствии с глобальной переменной.
Решение
Оберните все содержимое формы в <fieldset> пометить и установить это disabled приписывать.
<form>
<fieldset disabled>
<input/>
<input/>
<input/>
</fieldset>
</form>
Другие решения
Оберните поля ввода и другие вещи в <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, например:
- флажки
- радио коробки
- файл загружен
- …Больше..
Тогда разумным решением будет установить все элементы формы disabled приписывает true, поскольку OP не указывал, что конкретная «заблокированная» форма должна быть отправлена на сервер (который 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.
На странице подтверждения не помещайте содержимое в редактируемые элементы управления, просто напишите их на странице.
Я не знаю, как это сделать, поэтому вам нужно будет придумать индивидуальное решение в зависимости от сложности вашей формы. Вы должны прочитать этот пост:
Конвертировать HTML-формы только для чтения
РЕДАКТИРОВАТЬ: Исходя из вашего обновления, почему вы так беспокоитесь о том, что оно доступно только для чтения? Вы можете сделать это через клиентскую часть, но если это не так, вам придется добавить требуемый тег в каждый элемент управления или преобразовать данные и отобразить их в виде необработанного текста без элементов управления. Если вы пытаетесь сделать его доступным только для чтения, чтобы следующий пост не изменялся, у вас возникла проблема, потому что любой может связываться с постом, чтобы произвести все, что он хочет, поэтому, когда вы на самом деле, наконец, получите данные, вам лучше проверить их снова. чтобы убедиться, что это действительно.
Не существует полностью совместимого официального HTML-способа сделать это, но небольшой JavaScript может иметь большое значение.
Другая проблема, с которой вы столкнетесь, заключается в том, что отключенные поля не отображаются в данных POST.
Пронумеруйте все идентификаторы формы и выполните цикл for в JS.
for(id = 0; id<NUM_ELEMENTS; id++)
document.getElementById(id).disabled = false;
detector