Чистые входные данные формы CSS только для чтения
Только для чтения — это один из атрибутов элемента <input> в Pure CSS Forms. Он используется, чтобы сделать поле ввода в форме доступным только для чтения, т. е. мы не можем изменить существующее содержимое внутри поля ввода, независимо от того, пусто оно или не пусто. Само имя объясняет атрибут, оно делает поле ввода доступным только для чтения пользователю. t запрещает пользователю изменять содержимое, присутствующее внутри текстового поля <input>, но может выполнять действия пользователя, такие как выбор, копирование содержимого.
Класс ввода только для чтения в форме чистого CSS: нет класса, для которого у нас есть предопределенный атрибут, который может сделать любое поле ввода доступным только для чтения, и этот атрибут readonly=” ” с пустым значением.
Синтаксис:
<form class="pure-form">
<input type="..."
value="..." readonly="">
</form>Пример ниже иллюстрирует входные данные только для чтения формы Pure CSS.
Пример 1: В этом примере мы увидим, как найти поле ввода, доступное только для чтения. Содержимое внутри поля ввода, которое будет доступно только для чтения, будет выделено серым цветом. В приведенном ниже примере показано, что слово geeksforgeeks нельзя изменить, и оно выделено серым цветом, но мы можем выполнять такие действия, как выделение текста.
HTML
<!DOCTYPE html><html><head> <title>read-only</title> <!-- Import Pure CSS files --> <link rel="stylesheet" href= integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"></head><body> <h1>Geeksforgeeks</h1> <strong>Pure CSS Forms Read-Only Inputs</strong> <br><br> <form class="pure-form"> <!-- read-only Input --> <label>GeeksforGeeks: <input type="text" value="A Computer Science Portal" readonly /> <label> </form></body></html> |
Выход:
Пример 2: В этом примере мы будем Где мы можем его использовать. Его можно использовать при условии, что текст внутри текстового поля не должен изменяться, т. е. он должен иметь значение по умолчанию. В приведенном ниже примере показано, что места отправления (Мумбаи) и места назначения (Агра) нельзя изменить для конкретного поезда (поезда A), потому что Trian A принимает только пассажиров, которые отправляются из Мумбаи и направляются в Агру. Тег ввода со значением Mumbai и Agra добавляется с атрибутами только для чтения в последнюю часть поля ввода, чтобы сделать его доступным только для чтения. Вы можете обнаружить, что они серые.
HTML
<!DOCTYPE html><html><head> <!-- Import Pure CSS files --> <title>read-only</title> <link rel="stylesheet" href= integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"></head><body> <h1>Geeksforgeeks</h1> <strong>Pure CSS Forms Read-Only Inputs</strong> <form class="pure-form pure-form-aligned"> <fieldset> <div class="pure-control-group pure-controls"> <strong>Train A</strong><br> <label for="name"> Passenger full-name </label> <input type="text" class="pure-input" id="name" /> <br> <label for="from">From</label> <!-- To make the input field read-only --> <input type="text" class="pure-input" id="from" value="Mumbai" readonly /> <br> <label for="to">To</label> <input type="text" class="pure-input" id="to" value="Agra" readonly /> <br> <input type="button" class="pure-button pure-button-primary" value="Submit"> </div> </fieldset> </form></body></html> |
Выход:
Примечание. Атрибут disabled также похож на атрибут только для чтения, но с той лишь разницей, что мы не можем взаимодействовать с содержимым поля.
Ссылка: https://purecss.io/forms/#read-only-inputs