Html поле ввода: Атрибут pattern | htmlbook.ru

Тег — поле для ввода текста

Поддержка браузерами

Описание

HTML тег <textarea> определяет многострочное текстовое поле. Количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным шрифтом.

По умолчанию поле ввода элемента <textarea>, при отображении в браузере, можно растянуть (изменить его размер), потянув за нижний правый угол. Если вам нужно запретить изменение размера <textarea>, то нужно прописать CSS свойство resize со значением none в атрибуте style, в этом случае получится запретить растягивать только данное поле ввода:

<textarea></textarea>

Либо можно прописать resize: none; в стилях, тогда правило примениться ко всем многострочным текстовым полям:

textarea { resize: none; }

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

rows и cols или изменить ширину и высоту элемента с помощью CSS.

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет изначально отображаться внутри текстового поля. Обратите внимание, что этот текст не исчезнет, когда поле ввода окажется в фокусе, поэтому если пользователь, при заполнении поля, не удалит данный текст, то он будет отправлен на сервер вместе с введенными данными.

Атрибуты

autofocus:

Указывает, что элемент <textarea> автоматически получит фокус после загрузки страницы. Возможные значения логического атрибута autofocus:

<textarea autofocus>
<textarea autofocus="autofocus">
<textarea autofocus="">

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.

cols:

Указывает положительное целое число, определяющее ширину текстового поля (единицей измерения выступает ширина одного символа). Если атрибут не указан, то используется значение по умолчанию — 20.

disabled:

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

<textarea disabled>
<textarea disabled="disabled">
<textarea disabled="">

form:

Определяет форму с которой связан элемент <textarea>. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать многострочное текстовое поле в произвольном месте документа, а не только в качестве потомка элемента <form>.

Примечание: атрибут form не поддерживается браузером Internet Explorer.

maxlength:

Определяет максимально количество символов, которое можно будет ввести в текстовое поле.

Примечание: атрибут maxlength не поддерживается в IE9 и более ранних версия, и в Opera.

name:

Определяет имя для элемента.

placeholder:

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

Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версия.

readonly:

Указывает, что текстовое поле будет доступно только для чтения, т.е. текст невозможно будет изменить, но будет возможность его скопировать. Возможные значения логического атрибута readonly:

<textarea readonly>
<textarea readonly="readonly">
<textarea readonly="">

required:

Указывает, что текстовое поле должно быть заполнено перед отправкой формы на сервер.

Примечание: атрибут required не поддерживается браузерами Internet Explorer и Safari.

rows:

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

wrap:

Определяет параметры переноса строк в тексте, при отправке данных на сервер:

• hard — браузер автоматически вставляет разрывы строки так, что каждая строка не будет иметь ширину больше, чем ширина текстового поля. Обязательным условием использования значения hard является установленный атрибут cols.
• soft — текст отправляется одной сплошной строкой, дополнительные переносы строк не добавляются. Является значением по умолчанию.

Тег <textarea> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример

<textarea rows="3" cols="40">
  Здесь могла быть ваша реклама :)
</textarea>

Результат данного примера в окне браузера:

Поле ввода. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Поле ввода. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

ВикиЧтение

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Дронов Владимир

Содержание

Поле ввода

Поле ввода — наиболее распространенный элемент управления в Web-формах — создается с помощью одинарного тега <INPUT>:

<INPUT [TYPE=»text»] [VALUE=»<изначальное значение>«] [SIZE=»<размер>«] [MAXLENGTH=»<максимальное количество символов>«] [DISABLED] [TABINDEX=»<номер в порядке обхода>«] [ACCESSKEY=»<быстрая клавиша>«] [READONLY] [AUTOFOCUS]>

Атрибут тега TYPE, как уже говорилось, задает тип элемента управления. Значение «text» указывает Web-обозревателю создать именно поле ввода. Поле ввода также создается, если атрибут тега TYPE не указан (как уже говорилось, он необязательный).

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

Необязательный атрибут тега SIZE задает длину поля ввода в символах. Если он не указан, длина поля ввода будет зависеть от Web-обозревателя.

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

Необязательные атрибуты тега TABINDEX и ACCESSKEY задают, соответственно, номер в порядке обхода и «горячую» клавишу для доступа к элементу управления. Они знакомы нам по гиперссылкам (см. главу 6).

Атрибут тега без значения DISABLED позволяет сделать поле ввода недоступным для посетителя; оно будет отображаться серым цветом, и посетитель не сможет даже его активизировать. Если этот атрибут присутствует в теге, поле ввода недоступно, если отсутствует — доступно.

Атрибут тега без значения READONLY позволяет сделать поле ввода доступным только для чтения; при этом посетитель все-таки сможет активизировать это поле, выделить содержащийся в нем текст и скопировать его в Буфер обмена. Если этот атрибут тега присутствует, поле ввода будет доступно только для чтения, если отсутствует — доступно и для чтения, и для ввода.

Если атрибут тега без значения AUTOFOCUS присутствует, данное поле ввода будет автоматически активизировано при открытии Web-страницы. Если же он отсутствует, поле ввода активизировано не будет и посетителю придется его активизировать щелчком мышью или клавишами <Tab> или <Shift>+<Tab>.

ВНИМАНИЕ!

Атрибут тега AUTOFOCUS можно указывать только для одного элемента управления на всей Web-странице.

Листинг 20.1

<FORM ACTION=»#»>

<P>Имя: <INPUT TYPE=»text» NAME=»name1″ SIZE=»20″

AUTOFOCUS></P>

<P>Фамилия: <INPUT TYPE=»text» NAME=»name2″ SIZE=»30″></P>

</FORM>

В листинге 20. 1 мы создаем Web-форму с двумя полями ввода: name1 длиной 20 символов, автоматически активизирующееся при открытии Web-страницы, и name2 длиной 30 символов. Оба поля ввода имеют надписи, представляющие собой обычный текст и расположенные перед ними.

Обратим внимание, что для размещения элементов управления в Web-форме мы использовали абзацы. Вообще, для этого можно применять любые элементы Web- страниц из уже знакомых нам: списки, таблицы, контейнеры и пр.

Данный текст является ознакомительным фрагментом.

Поле для ввода пароля

Поле для ввода пароля Чтобы создать поле для ввода пароля, задаем значение атрибута type=»password». Особенность этого поля в том, что все введенные буквы закрываются звездочками (или точками, в зависимости от системы) и увидеть вводимый пароль невозможно. Вместе с этим полем

Поле для ввода файла

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

Поле ввода пароля

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

Поле ввода значения для поиска

Поле ввода значения для поиска Поле ввода значения для поиска появилось в HTML 5. Оно ничем не отличается от обычного поля ввода за тем исключением, что из введенного в него значения автоматически удаляются переводы строк. Поле ввода значения для поиска также создается с

Поле ввода

Поле ввода Поле ввода — наиболее распространенный элемент управления в Web-формах — создается с помощью одинарного тега &lt;INPUT&gt;:&lt;INPUT [TYPE=»text»] [VALUE=»&lt;изначальное значение&gt;»] [SIZE=»&lt;размер&gt;»] [MAXLENGTH=»&lt;максимальное количество символов&gt;»] [DISABLED] [TABINDEX=»&lt;номер в порядке

Поле ввода пароля

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

Поле ввода значения для поиска

Поле ввода значения для поиска Поле ввода значения для поиска появилось в HTML 5. Оно ничем не отличается от обычного поля ввода за тем исключением, что из введенного в него значения автоматически удаляются переводы строк.Поле ввода значения для поиска также создается

6.13.2 Поля назначения, поле источника и поле протокола

6.13.2 Поля назначения, поле источника и поле протокола Наиболее важными полями заголовка являются: Destination IP Address (IP-адрес назначения), Source IP Address (IP-адрес источника) и Protocol (протокол).IP-адрес назначения позволяет маршрутизировать датаграмму. Как только она достигает точки

6.14.1 Поле идентификации

6.14.1 Поле идентификации Поле идентификации содержит 16-разрядное число, помогающее хосту назначения распознать фрагмент датаграммы при

6.14.2 Поле Флагов

6. 14.2 Поле Флагов Поле флагов содержит три бита: Бит 0 Бит 1 Бит 2 0=Зарезервировано 0=Можно фрагментировать 1=Нельзя фрагментировать 0=Последний фрагмент (Last) 1=Есть еще фрагменты (More) Бит 0 зарезервирован, но должен иметь значение 0. Отправитель может указать в следующем

Текстовое поле для ввода чисел

Текстовое поле для ввода чисел Очень часто программистам необходимо создавать текстовые поля, в которых можно указывать только числа. В статье «How to: Create a Numeric Text Box», которую можно найти по адресу msdn2.microsoft.com/en-us/library/ms229644(VS.80).aspx, рассказывается об одном из таких способов.

Поле поиска

Поле поиска Помимо удаления кнопки Поиск, существует несколько возможностей настройки работы поля поиска, отображаемого в меню Пуск. Все они основаны на параметрах REG_DWORD-типа, расположенных в ветви реестра HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionPoliciesExplorer:• NoStartMenuSearchComm – если

Поле брани

Поле брани «Мы матом не ругаемся, мы на нем разговариваем» — сия полушутливая фраза, похоже, уже перестала восприниматься как анекдот. Чтобы убедиться в этом, не обязательно наступать двумя ногами на новенький ботинок какому-нибудь верзиле в общественном транспорте или

В ПОЛЕ ЗРЕНИЯ

В ПОЛЕ ЗРЕНИЯ Часто бывает так, что новость — это лишь вершина айсберга, тогда как для понимания полной картины происходящего надо знать множество мелких подробностей. В этом разделе наши авторы вместе с известными экспертами вскрывают подоплеку

Поле «Что Вы хотите записать?»

Поле «Что Вы хотите записать?» Для того чтобы запустить процесс записи, нужно с помощью мышки навести курсор на строку и щелкнуть по выбранной строке. А что будет дальше, опишем ниже. При нажатии на строку Данные справа от нее появляется новый список.Здесь вы сможете

Антенное поле чудес

Антенное поле чудес Автор: Юрий РомановВоспользовавшись любезным приглашением заместителя директора Радиоастрономического института академика НАН Украины А. А. Коноваленко [За что хочу выразить ему благодарность, а также за доброжелательную помощь в подготовке

Тег ввода HTML — GeeksforGeeks

Улучшить статью

Сохранить статью

• Уровень сложности: Базовый
• Последнее обновление: 22 июл, 2022

Читать

Обсудить

Улучшить статью

Сохранить статью

В HTML поле ввода может быть указано с помощью , где пользователь может вводить данные . Тег ввода используется в элементе

для объявления элементов управления вводом, которые позволяют пользователям вводить данные. Поле ввода может быть разных типов в зависимости от типа атрибута. Тег Input — это пустой элемент, который содержит только атрибуты. Для определения меток для элемента ввода <метка> можно использовать.

Синтаксис

Атрибуты:  
 

• type : Атрибут type используется для указания типа элемента ввода. Его значение по умолчанию — текст.
• значение : Атрибут value используется для указания значения входного элемента.
• заполнитель : Атрибут заполнителя используется для указания подсказки, описывающей ожидаемое значение поля ввода.
• name : Атрибут name используется для указания имени входного элемента.
• alt : Атрибут alt используется для предоставления пользователю альтернативного текста, если он не может просмотреть изображение.
• autofocus : Атрибут Autofocus указывает, что элемент должен автоматически получать фокус при загрузке страницы.
• checked : Атрибут checked указывает, что элемент должен быть предварительно выбран (проверен) при загрузке страницы. Атрибут checked можно использовать с < input type = «checkbox» > и < input type = «radio» >.
• отключено : Атрибут disabled указывает, что элемент должен быть отключен. Атрибут disabled может быть установлен таким образом, чтобы пользователь не использовал элемент до тех пор, пока не будет выполнено какое-либо другое условие.
• форма : Атрибут формы используется для указания одной или нескольких форм, которым принадлежит элемент .
   
• max : Атрибут max используется для указания максимального значения для элемента < input >.
• required : Атрибут required указывает, что поле ввода должно быть заполнено перед отправкой формы.
   
• только для чтения : Атрибут только для чтения указывает, что поле ввода доступно только для чтения. Поле ввода только для чтения не может быть изменено. Форма по-прежнему будет отправлять поле ввода, доступное только для чтения, но не будет отправлять поле ввода, которое отключено.
   
• accept : Это свойство используется для указания типов файлов, которые принимает сервер.
• align : Это свойство используется для указания выравнивания входного изображения.
• autocomplete : Это свойство используется, чтобы указать, должно ли быть включено автозаполнение элемента .
• имя_каталога : Это свойство используется для указания направления текста.
• formaction : Это свойство используется для указания URL-адреса файла, который будет обрабатывать элемент управления вводом при отправке формы (для type=»submit» и type=»image»)
• formenctype : Это свойство используется для указания способа кодирования данных формы при их отправке на сервер (для type=»submit» и type=»image»)
• formmethod : Это свойство используется для определения метода HTTP для отправки данных на URL-адрес действия (для type=»submit» и type=»image»)
• formnovalidate : Это свойство используется для определения того, что элементы формы не должны быть подтверждено при отправке
• formtarget : Это свойство используется для указания места отображения ответа, полученного после отправки формы (для type=»submit» и type=»image»)
• height : Это свойство используется для указания высоты элемента (только для type=»image»)
• list : Это свойство используется для ссылки на элемент
• maxlength : Это свойство используется для указания максимально допустимого количества символов в элементе
• min : Это свойство используется для указания минимального значения для элемента
• множественный : Это свойство используется для указания того, что пользователь может ввести более одного значения в элемент
• шаблон : Это свойство используется для указания регулярного выражения, которое значение элемента проверяется на
• size : Это свойство используется для указания ширины элемента в символах button (только для type=»image»)
• step : Это свойство используется для указания допустимых интервалов чисел для поля ввода
• ширина : Это свойство используется для указания ширины Элемент (только для type=»image»)

Пример 1: Использование атрибута «тип» .
 

html

< html >   < body >      < h2 >GeeksForGeeks h2 >        < form >          < label >Name: label >          < input type = "text" name = "name" value = "" >          < br >< br >            < label >E-mail: label >          < input type = "email" name = "emailaddress" >          < br >< br >            < label >Password: label >          < input type = "пароль" имя = "пароль" >          7 < 90>< 90><0247 br >            < input type = "submit" >        form > body >   html >

Output:  
 

Пример 2: Использование атрибута «значение» .
 

html

< html >   < body >      < h2 >ГикиДляГиков h2 >      < form >            < label > Name: label >          < input type = "текст" имя = "имя1" значение = "Рахул" 9 > 7          < br >          < br >          < input type = "submit" value = "Отправить форму" >        форма > 9 030246 body >   html >

Output:  
 

Supported Browsers:  
 

• Google Chrome
• Edge 12 и выше
• Internet Explore
• Firefox 1 и выше
• Opera
• Safari 1 и выше

 

Далее

Теги HTML — список от А до Я

Статьи по теме

Вводимый текст [Все, что вы должны знать]

Вводы очень важны в дизайне взаимодействия с пользователем, и очень важно, чтобы их стиль идеально переносился из дизайна на страницу. Ни для кого не секрет, что для презентации на веб-странице вам нужен CSS, но сложность заключается в том, как сделать его как можно лучше.

Вводы имеют больше вариаций, состояний и прочего, чем любой другой элемент в HTML , поэтому давайте рассмотрим все, что нужно знать о тексте типа ввода сообщения. Давайте сломаем вход!

Введите [тип = "текст"]

Вводимый текст представляет собой пустой квадрат там, где ожидается ввод текста. Это довольно распространенный элемент, и в большинстве случаев он представляет собой белый элемент, окруженный цветной рамкой.
Хорошей практикой является добавление текста-заполнителя внутри него и метки вне его.

Текст ввода по умолчанию

Текст ввода по умолчанию в состоянии фокуса

Текст заполнителя по умолчанию

Состояние автозаполнения по умолчанию

Для добавления желаемого стиля к вводу есть несколько стандартных опций и несколько специальных. Если для входа есть метка, она добавляется в элемент label рядом с входом, а его атрибут для имеет то же значение, что и атрибут id связанного элемента ввода. Элемент метки может быть оформлен как стандартный текстовый элемент HTML.

Для ввода стандартно изменить размеры, border , background-color , border-radius и font варианты. Нестандартно стилизовать текст заполнителя, фокус, автозаполнение и состояние проверки. Эти нестандартные опции будут объяснены в следующей статье, а после этого будут представлены некоторые примеры различных используемых опций.

Текст-заполнитель

Для стилизации текста-заполнителя, установленного с атрибутом заполнителя, используется псевдоэлемент ::placeholder . Поддерживаются все стили текста (шрифт, цвет, фон, непрозрачность, межсловный интервал, преобразование текста, высота строки. ..). В браузере Firefox ко всем заполнителям применяется значение непрозрачности, поэтому для сброса этого значения необходимо определить непрозрачность.

 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
     ...
 }
 ::-moz-placeholder { /* Firefox 19+ */
     непрозрачность:1;
     ...
 }
 :-ms-input-placeholder { /* IE 10+ */
     ...
 }
 :-moz-placeholder { /* Firefox 18- */
     ...
 }
 

Пример:

 ::заполнитель{
    цвет: коралловый;
    размер шрифта: 14px;
    семейство шрифтов: без засечек;
    межбуквенный интервал: .2px;
    отступ слева: 5px;
 }
 

Результат:

Состояние фокуса

Состояние фокуса важно для взаимодействия с пользователем и существует для каждого элемента ввода. Используется для указания текущего целевого элемента. Это состояние представлено синей рамкой вокруг элемента, а в CSS оно выбирается с помощью псевдокласса :focus .

Синяя рамка вокруг сфокусированного элемента добавляется со строкой по умолчанию контур: auto 5px -webkit-focus-ring-color , и это значение цвета по умолчанию определяется в теме браузера. В некоторых случаях это представление раздражает дизайнеров элемента, и некоторые люди предпочитают отключать его с помощью следующего кода:

 :фокус{
     контур: нет;
 }
 

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

Пример:

 :фокус{
     контур: нет;
     граница: сплошной коралл 1px;
     box-shadow:0 0 5px коралловый;
 }
 

Результат:

Приятно добавить переход в этом случае (и любом другом!).

Состояние автозаполнения

Браузеры Webkit предоставляют настройку, которая позволяет пользователям автоматически заполнять данные для общих полей форм. Вы видели это при заполнении формы, которая запрашивает такие вещи, как имя, адрес и адрес электронной почты. Поля автозаполнения имеют желтый фон по умолчанию, и это может мешать дизайну, а также это то, что можно легко изменить (в этом режиме вы также можете изменить цвет текста).

 :-вебкит-автозаполнение {
    -webkit-box-shadow: 0 0 0 1000px мятно-кремовая вставка !важно;
 }
 :-вебкит-автозаполнение {
    -webkit-text-fill-color: коралловый !важно;
 }
 

Результат:

Состояния проверки

Есть два относительно новых псевдокласса :valid и :invalid . Эти псевдоклассы полезны для выделения пользователю успеха и неудачи. Часто можно увидеть зеленый , когда контент действителен, и красный , если нет, так что теперь вы можете легко определить это с помощью CSS. Старые версии браузеров его не поддерживают, имейте это в виду.

: действительный {
    box-shadow: -5px 0 лайм;
    граница слева: нет;
 }
 :недействителен {
    box-shadow: -5px 0 оранжево-красный;
    граница слева: нет;
 }
 

опция box-shadow используется вместо border-left , т.к. возникает визуальная проблема в случае, когда границы одного элемента имеют разный стиль или цвет

Результат:

Дополнительный совет

Еще одна проблема с полями ввода — проблема на iOS, которая возникает из-за добавления стилей по умолчанию.