Как сделать ввод текста в html

Как сделать ввод текста в html

Однострочное текстовое поле создается с помощью элемента input , когда его атрибут type имеет значение text :

С помощью ряда дополнительных атрибутов можно настроить текстовое поле:

• dir : устанавливает направление текста
• list : устанавливает список подсказок для ввода в поле
• maxlength : максимально допустимое количество символов в текстовом поле
• pattern : определяет шаблон, которому должен соответствовать вводимый текст
• placeholder : устанавливает текст, который по умолчанию отображается в текстовом поле
• readonly : делает текстовом поле доступным только для чтения
• required : указывает, что текстовое поле обязательно должно иметь значение
• size : устанавливает ширину текстового поля в видимых символах
• value : устанавливает значение по умолчанию в текстовом поле

Применим некоторые атрибуты:

       
Отправить Отмена 
 
   

В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size — то есть количество символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем maxlength, мы не сможем.

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

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

Среди атрибутов текстового поля также следует отметить такой атрибут как list . Он содержит ссылку на элемент datalist , который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:

       
Отправить 
 
    

Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.

Направление текста

Атрибут dir задает направление ввода текста. Он может принимать два значения: ltr (слева направо) и rtl (справа налево):

Поле поиска

Для создания полей поиска предназначен элемент input с атрибутом type=»search» . Формально он представляет собой простое текстовое поле:

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

Для ввода пароля используется элемент input с атрибутом type=»password» . Его отличительной чертой является то, что вводимые символы маскируются точками:

Текстовое поле

Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.

Значение атрибута type для по умолчанию определено как text , поэтому его можно не указывать явно. Таким образом, текстовое поле задаётся просто как .

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

Табл. 1. Атрибуты однострочного текстового поля

Атрибут	Описание
name	Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
disabled	Блокирует поле для ввода текста и не отправляет данные на сервер.
form	Идентификатор формы для связывания текстового поля с элементом .
type	Для текстового поля мы указываем значение text или вообще не пишем этот атрибут.
maxlength	Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если данный атрибут опустить, то можно вводить строку длинее самого поля.
readonly	Блокирует поле для ввода текста.
size	Ширина текстового поля, которая определяется числом символов моноширинного шрифта. Обычно не указывают, потому что через стили задать желаемые размеры проще и точнее.
value	Начальный текст, отображаемый в поле.
autocomplete	Введённый ранее текст запоминается браузером и подставляется при следующем вводе.
autofocus	Поле получает фокус после загрузки документа.
list	Значение атрибута id элемента , для связи с этим элементом.
pattern	Шаблон ввода текста.
required	Указывает, что поле является обязательным для заполнения.
placeholder	Добавляет подсказку, которая исчезает при вводе текста.
dirname	Имя переменной, которая отправляется на сервер и автоматически получает значение ltr (для текста слева направо) или rtl (для текста справа налево).

Большинство атрибутов являются типовыми и применяются к другим элементам формы. Некоторые атрибуты мы подробнее рассмотрим в следующих уроках.

Создание текстового поля показано в примере 1.

Пример 1. Текстовое поле

В результате получим следующее (рис. 1).

Рис. 1. Вид текстового поля в браузере

Для элемента есть простые правила, которые следует соблюдать:

• нельзя вкладывать внутрь ссылки ;
• нельзя вкладывать внутрь кнопки ;
• атрибут list должен ссылаться на элемент .

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

пишется обычно за пределами формы, каждый пункт при этом создаётся элементом , а затем полученный список связывается с текстовым полем с помощью атрибута list , значением которого выступает значение id у (пример 2).

Пример 2. Подсказки для текстового поля

Результат данного примера показан на рис. 2.

Рис. 2. Вид текстового поля с подсказками

При наборе первых букв показываются подходящие варианты из списка. Пункт списка можно выбрать курсором мыши или с помощью стрелок на клавиатуре и он добавится в текстовое поле. При этом можно вводить собственный текст или редактировать уже добавленный.

Подсказывающий текст

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

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

В примере 1 показано добавление подсказки к полям формы для создания авторизации.

Пример 1. Подсказывающий текст

HTML5 IE 10+ Cr Op Sa Fx

Результат примера в браузере Chrome показан на рис. 1.

Рис. 1. Вид полей с подсказывающим текстом

Поля ввода в HTML. Тег

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

text и password . Это, наверное, самые часто используемые типы полей ввода. Это простые текстовые поля. password отличается тем, что скрывает введенные символы.

radio и checkbox . С помощью radio пользователи выбирают один вариант из нескольких, а с помощью checkbox — ставят галочку, это может быть как одиночный выбор, так и множественный. Очень важно, чтобы у радиокнопок было одинаковое имя ( name ), чтобы группировать их.

 Кошка Собака Подписаться на новости 

submit — кнопка для отправки формы. Обычно ставится в конце формы. Хотя на практике часто используют , так как кнопку проще стилизовать.

Если пользователю нужно загрузить файл, используйте тип . Но помните про безопасность и валидацию загружаемых файлов на сервере!

Тип используется, когда вы хотите передать какие-то скрытые данные, которые не должны отображаться пользователю. Такое поле не видно на странице.

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

Есть и другие типы, такие как tel , email , url , но на практике они используются реже. Их основная идея — обеспечить ввод для конкретных данных.

Важные атрибуты

С помощью атрибута name сервер определяет, какие именно данные пришли.

placeholder полезен для коротких подсказок. Но это не замена для . Всегда используйте подписи у полей ввода!

Если поле обязательно для заполнения, добавьте атрибут required .

Атрибут value устанавливает начальное значение поля.