Запрет редактирования полей [23/28]
Иногда возникают ситуации, когда какие-то поля требуется сделать недоступными для редактирования.
Есть два способа: использование атрибута readonly и использование атрибута disabled
Пример записи:
<input type="text" readonly>
<input type="text" disabled>
В чем же отличие между ними?
Атрибут readonly не дает пользователю изменять поле (вводить новый текст, модифицировать существующий). Введенное значение можно выделить и скопировать. Данные из этого поля отправляются на сервер.
Атрибут disabled не дает пользователю изменять поле (вводить новый текст, модифицировать существующий). Нельзя поставить фокус в это поле, введенное значение нельзя выделять и копировать. Данные из этого поля НЕ отправляются на сервер.
form23-28.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Запрет редактирования полей</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/assets/course74/keksik-style.css">
</head>
<body>
<header class="page-header">Форма личных данных</header>
<main>
<form action="/echo" method="post">
<fieldset>
<legend>Заявление на получение визы</legend>
<label for="passport">Номер котопаспорта</label>
<input type="text" id="passport" name="passport" pattern="[0-9]{3}-[0-9]{5}" placeholder="Формат номера XXX-XXXXX">
<label for="tel">Номер телефона</label>
<input type="tel" id="tel" name="tel" pattern="[0-9]{1}-[0-9]{3}-[0-9]{3}" placeholder="Формат номера X-XXX-XXX">
<div class="half-width">
<label for="email">Email</label>
<input type="email" id="email" name="email">
</div>
<div class="half-width">
<label for="url">Личный сайт</label>
<input type="url" id="url" name="url" value="http://ya.ru" readonly>
</div>
<div class="one-third-width">
<label for="color">Окрас</label>
<input type="color" id="color" name="color">
</div>
<div class="two-third-width">
<label for="food">Любимая еда</label>
<select id="food" name="food" disabled>
<optgroup label="Вкуснятина">
<option value="meat">Мясо</option>
<option value="fish">Рыба</option>
<option value="chi">Курочка</option>
<option value="ind">Индейка</option>
<option value="mice">Мыши</option>
</optgroup>
<optgroup label="Сойдёт">
<option value="milk">Молоко</option>
<option value="kef">Кефир</option>
<option value="water">Вода</option>
<option value="smet">Сметана</option>
</optgroup>
</select>
</div>
</fieldset>
<div class="buttons">
<input type="submit" value="Оформить">
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>