Html read only input: Атрибут readonly | htmlbook.ru

html. Каков правильный синтаксис атрибута только для чтения для элементов ввода текста?

спросил 10 лет, 2 месяца назад

Изменено 12 месяцев назад

Просмотрено 107 тысяч раз

Как и большинство, я знаком с атрибутом только для чтения для ввода текста , но при чтении кода с других веб-сайтов (моя неприятная привычка) я видел более одной реализации этого атрибута:

и

и я даже видел

.. Кажется, я видел даже больше, но сейчас не могу вспомнить точный синтаксис.

Итак, какой из них правильный, который мне следует использовать?

• html
• формы
• только для чтения
• поле ввода

1

Спецификация HTML5 :

http://www. w3.org/TR/html5/forms.html#attr-input-readonly :

Атрибут только для чтения является логическим атрибутом

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes:

Наличие логического атрибута у элемента представляет истинное значение, а отсутствие атрибута представляет ложное значение.

Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, нечувствительным к регистру ASCII, соответствующим каноническому имени атрибута, без пробелов в начале или конце.

Заключение :

Следующие действительны, эквивалентны и истинны :

 
<тип ввода="текст" только для чтения="" />
<тип ввода = "текст" только для чтения = "только для чтения" />
  
 

Следующие недействительны :

 
<тип ввода = "текст" только для чтения = "1" />
<тип ввода = "текст" только для чтения = "ложь" />
<тип ввода = "текст" только для чтения = "истина" />
 

Отсутствие атрибута является единственным допустимым синтаксисом для false :

Рекомендация

Если вы заботитесь о правильном написании XHTML, используйте readonly="readonly" , начиная с <ввод только для чтения> недействителен, а другие альтернативы менее удобочитаемы. В противном случае просто используйте , так как он короче.

3

Из w3:

только для чтения = «только для чтения» или «» (пустая строка) или пусто — Указывает, что элемент представляет элемент управления, значение которого не предназначено для редактирования.

Так что в основном то же самое.

2

должно быть

1

Лучше всего использовать просто только для чтения . Это делает его наиболее смысловым и лаконичным.

Хотите верьте, хотите нет,

 readonly="false"
 

возвращает истину;

Чтобы определить в JavaScript, доступен ли элемент только для чтения, используйте следующий синтаксис:

 элемент.только для чтения
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Ввод только для чтения и текстовая область

Bootstrap

6 месяцев назад

Надя Бано

Часто, чтобы зарегистрироваться в любом приложении, мы должны предоставить приложению некоторые учетные данные. При создании профиля вы можете столкнуться с тем, что основные учетные данные, такие как имя, адрес электронной почты и пароль, уже отображаются. Эти учетные данные доступны только для чтения и не могут быть изменены.

Используя Bootstrap, « » и « </strong>» можно сделать только для чтения, используя «<strong> только для чтения </strong> ”атрибут. Входной текст только для чтения не может быть изменен. Однако его можно открыть вкладкой и выделить, чтобы скопировать содержимое. </p> <p> Этот пост поможет вам: </p> <ul> <li> Как сделать поля ввода только для чтения в Bootstrap? </li> <li> Как сделать поле Textarea только для чтения в Bootstrap? </li> </ul> <h3><span class="ez-toc-section" id="_Bootstrap"> Как сделать поля ввода только для чтения в Bootstrap? </span></h3> <p> Чтобы сделать текст только для чтения, можно использовать атрибут «<strong> только для чтения </strong>».<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/itchief.ru/assets/images/149/styling-input-disabled-readonly.png' /><noscript><img loading='lazy' src='/800/600/https/itchief.ru/assets/images/149/styling-input-disabled-readonly.png' /></noscript> Прежде чем продолжить, мы создадим файл HTML для демонстрации. </p> <h3><span class="ez-toc-section" id="_HTML"> Предварительное условие: Создайте HTML-файл и добавьте поля ввода </span></h3> <p> Чтобы создать HTML-файл, следуйте приведенным ниже инструкциям: </p> <ul> <li> Создайте элемент «<strong> <div> </strong>» и назначьте ему класс «<strong><div id="yandex_rtb_3" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_3",blockId:rtbBlockID,pageNumber:3,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_3").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_3");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> p-4 </strong>». Этот класс добавляет отступы со всех сторон элемента. </li> <li> Затем добавьте элемент «<strong> <label> </strong>», чтобы указать заголовок элемента ввода. Его атрибут «<strong> для </strong>» должен соответствовать «<strong> id </strong>» тега «<input>». </li> <li> Чтобы добавить поле ввода текста, поместите тег «<strong> <input> </strong>» с атрибутами «type», «id», «class», «value» и «readonly». </li> <li> Атрибут «<strong> тип </strong>» со значением «<strong> текст </strong>» определяет поле ввода текста. </li> <li> «<strong> id </strong>» определяет уникальный идентификатор элемента. </li> <li> Атрибут «<strong> class </strong>» установлен с классом Bootstrap «<strong> form-control </strong>».<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/progler.ru/public/uploads/articles2/readonly-1.png' /><noscript><img loading='lazy' src='/800/600/https/progler.ru/public/uploads/articles2/readonly-1.png' /></noscript> Этот класс обеспечивает полную ширину элементов, чтобы сделать их отзывчивыми. </li> <li> « <strong> значение </strong> » определяет значение в поле ввода текста. </li><center><div class="advv"><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center><center><div class="advv"><ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center> <li> Атрибут « <strong> только для чтения </strong> » делает текст доступным только для чтения. Это указывает на то, что его нельзя отредактировать или изменить. </li> </ul> <p> <strong> HTML </strong> </p> <p> <div> <br/>  <label for="name"> Введите ваше имя</label> <br/>  <input type="text" value="John Edward" только для чтения> <br/>  <label for="name" > Введите адрес электронной почты</label> <br/>  <input type="text" value="abc@xyz.com" только для чтения> <br/> </div> </p> <p> <strong> Вывод </strong> </p> <p> </p> <h3><span class="ez-toc-section" id="_Bootstrap-2"> Как сделать текстовые поля только для чтения в Bootstrap? </span></h3> <p> Атрибут « <strong> readonly </strong> » можно указать в элементе « <strong> <textarea> </strong> », чтобы сделать его доступным только для чтения. Более того, HTML-тег «<textarea>» создает элемент управления многострочным вводом текста.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/1.bp.blogspot.com/-Ncj-kJGuN9c/W4wD_71aPRI/AAAAAAAABuU/hQ3dMBnrvmQPosf85yir4FAJHp_D3r1fQCLcBGAs/s1600/1.1.png' /><noscript><img loading='lazy' src='/800/600/https/1.bp.blogspot.com/-Ncj-kJGuN9c/W4wD_71aPRI/AAAAAAAABuU/hQ3dMBnrvmQPosf85yir4FAJHp_D3r1fQCLcBGAs/s1600/1.1.png' /></noscript> </div> </div> </div> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/java-javascript-chto-luchshe-izuchat-java-ili-javascript.html" rel="prev">Java javascript: Что лучше изучать: Java или JavaScript</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/css/linear-gradient-css3-linear-gradient-css-cascading-style-sheets.html" rel="next">Linear gradient css3: linear-gradient() — CSS: Cascading Style Sheets</a></div></div> </nav><div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/html-read-only-input-atribut-readonly-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Имя *

Email *

Сайт