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

Как сделать, чтобы в текстовом поле заранее выводился определенный текст?

Вывести в однострочном и многострочном текстовом поле формы произвольный текст.

Решение

Создание однострочного текстового поля осуществляется с помощью тега . Достаточно воспользоваться атрибутом value данного тега и присвоить ему в качестве значения строку. После чего заданный текст появится в поле автоматически (пример 1).

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере показано, как создать текст, который будет отображаться в поле сразу при открытии страницы (рис. 1).

Рис. 1. Текстовое поле с заданным текстом

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

Пример 2. Текст в многострочном текстовом поле

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
 Бар - песчаная подводная отмель; образуется в море на некотором расстоянии от устья реки под действием морских волн. 





 
  

Учтите, что все переносы строк в тексте и пробелы становятся значимыми и отображаются в текстовом поле. Результат примера показан на рис. 2.

Рис. 2. Текст со всеми пробелами в текстовом поле

Однострочное текстовое поле

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

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

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

Атрибут	Описание
size	Ширина текстового поля, которая определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали.
maxlength	Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут опустить, то можно вводить строку длинее самого поля.
name	Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value	Начальный текст отображаемый в поле.

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

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

       
Как вас зовут?
  

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

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

Как добавить текстовое поле в 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.

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

Основным атрибутом тега является атрибут type. В зависимости от значения этого атрибута тег принимает разные формы и служит для различных целей. Наиболее часто используемые значения атрибута type:

text — текстовое поле
password — поле для ввода пароля
button — кнопка
file — форма выбора файла
submit — кнопка для отправки данных с формы
radio — переключатели

Плюс в HTML5 добавлено много значений атрибута, что существенно упростит работу верстальщика — многое что делалось при помощи JS теперь будет делаться лишь сменой типа.

С помощью атрибута size задается длина поля равная числу символов (моноширинного шрифта).
Текст который вводится в текстовом поле заполняется в атрибуте value.

Placeholder используется для того чтобы если value=»» (пустой строке) в инпуте высвечивался текст находящийся в данном атрибуте. Соответственно при вводе текста пользователем текст placeholder-а скрывается. Используется это для пояснения пользователю для чего используется данное поле, какую информацию требуется ввести. (когда-то это делалось при помощи JS, теперь все намного проще, но отработает это лишь в браузерах с поддержкой HTML5)

Атрибут name определяет имя элемента. Требуется для того чтобы на серверный скрипт мог получить доступ к данным.

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

Изменим фон и добавим картинку с помощью backgroung-image, backgroung-color, backgroung-position, backgroung-repeat;

Изменим границы элемента и закруглим углы при помощи border и border-radius.

Похожие публикации:

1. Как называется цикл с заданным числом повторений
2. Как подключить к ноутбуку клавиатуру от компьютера
3. Пустая строка в питоне как обозначается
4. Что лучше учить после java