Html textbox: Атрибут pattern | htmlbook.ru

Текстовое поле HTML: подробное руководство

Текстовое поле — это обычное средство управления вводом в HTML, но оно имеет различные скрытые атрибуты. Текстовое поле HTML — это область на экране, в которой пользователь может вводить текст. Это обычный элемент ввода, который можно найти во многих программах, таких как веб-браузеры, почтовые клиенты и текстовые процессоры. Когда вы щелкаете по текстовому полю, включается курсор, указывая, что пользователь может начать печатать.

Что такое текстовое поле HTML?

Текстовое поле HTML — это элемент управления вводом, который позволяет пользователю вводить текст на веб-странице. используется для создания текстового поля.

Установка значения по умолчанию для текстового поля

Если вы хотите установить значение по умолчанию для текстового поля, вы можете использовать атрибут value. Всякий раз, когда форма загружается, значение по умолчанию отображается внутри текстового поля.

Многострочное текстовое поле

HTML-тег — это тег, используемый в форме для объявления многострочного текстового поля, позволяющего пользователю вводить текст в нескольких строках. </p><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> <p> </p> <p> </p> <h3><span class="ez-toc-section" id="i-3"> Специфические атрибуты текстового поля </span></h3> <p> Текстовое поле HTML поддерживает следующие атрибуты: </p> <table> <tbody> <tr> <td> <p> Атрибуты </p> </td> <td> <p> Значение </p> </td> <td> <p> Описание </p> </td> </tr> <tr> <td> <p> Автофокус </p> </td> <td> <p> Автофокус </p> </td> <td> <p> Указывает, что текстовое поле должно автоматически фокусироваться при загрузке страницы. </p> </td> </tr> <tr> <td> <p> столбцы </p> </td> <td> <p> Номер </p> </td> <td> <p> Указывает ширину текстового поля. </p> </td> </tr> <tr> <td> <p> строки </p> </td> <td> <p> Номер </p> </td> <td> <p> Указывает высоту текстового поля. </p> </td> </tr> <tr> <td> <p> Обернуть </p> </td> <td> <p> Жесткий <br/> Мягкий </p> </td> <td> <p> Указывает текст, который должен быть помещен в текстовое поле.<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/http/fuzeservers.ru/wp-content/uploads/0/6/e/06ed6bb99d978c09788e96345308b89a.jpeg' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/0/6/e/06ed6bb99d978c09788e96345308b89a.jpeg' /></noscript><div id="yandex_rtb_5" 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_5",blockId:rtbBlockID,pageNumber:5,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_5").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_5");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> </p> </td> </tr> <tr> <td> <p> Отключено </p> </td> <td> <p> Отключено </p> </td> <td> <p> Указывает ширину текстового поля на основе количества видимых символов. </p> </td> </tr> <tr> <td> <p> Форма </p> </td> <td> <p> Идентификатор_формы </p> </td> <td> <p> Указывает одну или несколько форм. </p> </td> </tr> <tr> <td> <p> Максимальная длина </p> </td> <td> <p> Номер </p> </td> <td> <p> Указывает максимальное количество символов в текстовом поле. </p> </td> </tr> <tr> <td> <p> Имя </p> </td> <td> <p> Текст </p> </td> <td> <p> Присваивает имя текстовому полю. </p> </td> </tr> <tr> <td> <p> Заполнитель </p> </td> <td> <p> Текст </p> </td> <td> <p> Указывает короткую подсказку о текстовом поле. </p> </td> </tr> </tbody> </table> <h3><span class="ez-toc-section" id="i-4"> Поддержка браузера </span></h3> <table> <tbody> <tr> <td> <p> Хром </p> </td> <td> <p> Сафари </p> </td> <td> <p> ИЭ </p> </td> <td> <p> Фаерфокс </p><center><ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="8813674614"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> </td> <td> <p> Опера </p> </td> <td> <p> Андроид </p> </td> </tr> <tr> <td> <p> Да </p> </td> <td> <p> Да </p> </td> <td> <p> Да </p> </td> <td> <p> Да </p> </td> <td> <p> Да </p> </td> <td> <p> Да </p> </td> </tr> </tbody> </table> <blockquote> Получите навыки работы с HTML5 и CSS3 с помощью магистерской программы Full Stack Java Developer.<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/http/fuzeservers.ru/wp-content/uploads/e/0/5/e058e3de0a073afe3f6852f2c26dd7d6.jpeg' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/e/0/5/e058e3de0a073afe3f6852f2c26dd7d6.jpeg' /></noscript> Нажмите, чтобы узнать подробности программы! </blockquote> <h4><span class="ez-toc-section" id="i-5"> Следующие шаги </span></h4> <p> Мы искренне надеемся, что эта статья о текстовом поле HTML дала вам краткое представление о том, как вы можете вводить текст на своих веб-страницах. Хотя это носит информационный характер, чтобы узнать больше о веб-разработке в целом, настоятельно рекомендуется получить соответствующую сертификацию для быстрого старта вашей карьеры программиста. Full Stack Java Developer от Simplilearn поможет вам освоить веб-разработку и усовершенствовать свои навыки. Курс исследует широкий спектр актуальных тем, которые охватывают внешние, промежуточные и внутренние технологии веб-разработки с использованием Java. Вы научитесь создавать комплексное приложение, тестировать и развертывать код, хранить данные с помощью MongoDB и многое другое. </p><div id="yandex_rtb_4" 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_4",blockId:rtbBlockID,pageNumber:4,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_4").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_4");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> <p> Если у вас есть какие-либо вопросы или отзывы относительно статьи о HTML-тегах, сообщите нам об этом в разделе комментариев к этой статье. Наши специалисты свяжутся с вами так же, как только это будет возможно.<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/http/slideplayer.com/slide/14351077/89/images/9/HTML+Form%3A+Input+Elements.jpg' /><noscript><img loading='lazy' src='/800/600/http/slideplayer.com/slide/14351077/89/images/9/HTML+Form%3A+Input+Elements.jpg' /></noscript> </p> <h2><span class="ez-toc-section" id="_HTML-3"> Поля формы HTML — текстовое поле </span></h2><pre> <input type="text" name="Name" value="default_value"> </pre>Текстовые поля — это поля ввода данных, которые берут небольшое количество данных от пользователя (текстовое поле используется для больших данных). Это один из наиболее широко используемых элементов управления WebForm. <br/> <iframe src="https://www.youtube.com/embed/s383kCcdnc0" title="HTML input textbox and its attributes like name value size maxlength autofocus with examples." frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> </iframe> <br/> <table> <tr> <th> Атрибут </th> <th> Описание </th> </tr> <tr> <td> Имя </td> <td> Этот атрибут указывает имя объекта, через которое на него можно сослаться. </td> </tr> <tr> <td> Значение </td> <td> Используется для указания значения текстового поля (необязательно) </td> </tr> <tr> <td> Размер </td> <td> Ширина текстового поля (необязательно) </td> </tr> <td> <td> Максимальная длина количество символов, которые можно ввести в текстовое поле.<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/http/i1.wp.com/www.lambdatest.com/blog/wp-content/uploads/2019/03/Windows-10-Chrome-71-O9iUI.png?resize=604%2C705&ssl=1' /><noscript><img loading='lazy' src='/800/600/http/i1.wp.com/www.lambdatest.com/blog/wp-content/uploads/2019/03/Windows-10-Chrome-71-O9iUI.png?resize=604%2C705&ssl=1' /></noscript> </td> </tr> <tr> <td> Автозаполнение </td> <td> Элемент ввода должен иметь автозаполнение. </td> </tr> <tr> <td> автофокус </td><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> <td> Фокус (дробилка внутри) поле ввода текста по умолчанию. <br/> ДЕМО автофокуса→ </td> </tr> <tr> <td> заполнитель </td> <td> Пользователю может быть предоставлена ​​подсказка, помощь или требования к вводу. <br/> ДЕМО заполнителя→ </td> </tr> <tr> <td> только для чтения </td> <td> Данные не могут быть изменены пользователем </td> </tr> <tr> <td> отключено </td> <td> Отключено пользователем </td> </tr> </table> Сохранение курсора в текстовом поле по умолчанию <br/> <h3><span class="ez-toc-section" id="i-6"> Пример: </span></h3> <input type="text" name="txtbox" value="Simple Text"> <p> Это помещает текстовое поле (область однострочного текста) в HTML-форму, на которое можно ссылаться, используя его имя «txtbox» и чье значение «Простой текст». Вот пример <br/> <br/> Как текстовое поле управляется JQuery <br/> TextArea для ввода большего количества текста Скрытое текстовое поле→ <br/> Отправить форму в новое окно → Код HTML и JavaScript для возврата на предыдущую страницу → <br/> ← HTML-форма </p> <p> Эта статья написана командой <strong itemprop="name"><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> plus2net.<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/http/magazine-cf.techacademy.jp/wp-content/uploads/2015/05/textarea.png' /><noscript><img loading='lazy' src='/800/600/http/magazine-cf.techacademy.jp/wp-content/uploads/2015/05/textarea.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/birzha-kontent-rabota-v-internete-na-domu-onlajn-poisk-zarabotka-na-kompyutere-bez-vlozhenij.html" rel="prev">Биржа контент: Работа в интернете на дому онлайн, поиск заработка на компьютере без вложений</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/klyuchevye-slova-dlya-sajta-kak-propisat-kak-dobavit-klyuchevye-slova-dlya-sajta.html" rel="next">Ключевые слова для сайта как прописать: Как добавить ключевые слова для сайта?</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-textbox-atribut-pattern-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 *

Сайт