Поле для ввода текста | HTML

  • Тег label
  • Атрибут placeholder
  • Другие текстовые поля

Основной элемент форм в HTML — поле для ввода. Оно реализуется с помощью тега <input> и позволяет задать различные поля для ввода данных: текст, пароли, чекбоксы, радио кнопки, кнопки отправки, загрузка файла, ввод даты и так далее.

Начиная со стандарта HTML5 список полей пополнился множеством новых вариантов. Базовыми типами инпутов являются:

  • Текст
  • Пароли
  • Чекбоксы
  • Радио кнопки

Самый простой способ использования <input> — создание текстового поля для ввода. Именно <input> присутствует во всех полях поиска. Чтобы создать простое текстовое поле для ввода данных, необходимо внутрь формы добавить непарный тег <input> и указать у него атрибут type со значением text:

<form>
  <input type="text">
</form>

Тег label

Поле создано, но совершенно непонятно что там вводить: имя? фамилию? код от сейфа? Чтобы указать назначение поля, используется тег <label>. Это парный тег, который напоминает параграф, но относится именно к описанию поля формы.

<form>
  <label>Введите имя</label>
  <input type="text">
</form>

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

Для связи label используется один из двух вариантов:

  • Связь по атрибуту id. Для этого у тега <input> указывается атрибут
    id     с произвольным именем, а у <label> добавляется атрибут for с таким же именем, как и значение id у элемента input
<form>
  <label for="name">Введите имя</label>
  <input type="text">
</form>
  • Связь через вложенность. Вы обратили внимание, что <label> — это парный тег? Для связи можно вложить input внутрь label, тогда они автоматически свяжутся друг с другом
<form>
  <label>Введите имя
    <input type="text">
  </label>
</form>

Атрибут placeholder

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

Например, вначале указать имя, а потом фамилию, или наоборот? Чтобы помочь пользователю сориентироваться используется атрибут placeholder у тега <input>. Значение этого атрибута будет выведено внутри текстового поля.

<form>
  <label for="name">Введите имя и фамилию</label>
  <input type="text" placeholder="Иван Иванов">
</form>

Введите имя и фамилию

Другие текстовые поля

Замечали, что при вводе паролей, браузер автоматически проставляет звёздочки вместо показа символов? Этого можно добиться указав значение

password для атрибута type:

<form>
  <label for="pin">Введите пинкод</label>
  <input type="password" placeholder="1234">
</form>

Введите пинкод

В стандарте HTML5 появилось ещё несколько интересных типов для тега <input>, которые реализуют обычное текстовое поле, но имеют свою реализацию. Например:

  • email
  • number
  • search
  • tel
  • url

Их назначение в том, что значения автоматически проверяются браузером на корректность. Например, если ввести значение email, то браузер будет ожидать корректный шаблон для Email адреса. В противном случае он сам укажет, что значение неверное при попытке отправить форму.

Мобильные устройства также не обходят стороной эти поля. В современных версиях мобильных операционных систем клавиатура подстраивается под тип поля, которое заполняется. Если выставлен тип email, то на клавиатуру сразу будет добавлен символ @, чтобы его не приходилось искать в дополнительных символах

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу

/people. Внутри формы создайте 2 текстовых поля

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

←Предыдущий

Следующий→

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

HTML5 | Текстовые поля

Последнее обновление: 21.05.2016

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

<input type="text" name="login" />

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

  • dir: устанавливает направление текста

  • list: устанавливает список подсказок для ввода в поле

  • maxlength: максимально допустимое количество символов в текстовом поле

  • pattern: определяет шаблон, которому должен соответствовать вводимый текст

  • placeholder: устанавливает текст, который по умолчанию отображается в текстовом поле

  • readonly: делает текстовом поле доступным только для чтения

  • required: указывает, что текстовое поле обязательно должно иметь значение

  • size: устанавливает ширину текстового поля в видимых символах

  • value: устанавливает значение по умолчанию в текстовом поле

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Текстовые поля в HTML5</title>
	</head>
	<body>
		<form>
			<p><input type="text" name="userName" placeholder="Введите имя" size="18" /></p>
			<p><input type="text" name="userPhone" placeholder="Введите номер телефона" size="18" maxlength="11" /></p>
			<p>
				<button type="submit">Отправить</button> 
				<button type="reset">Отмена</button>
			</p>
		</form>
	</body>
</html>

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

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

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


<p><input type="text" name="userName" value="Том" /></p>
<p><input type="text" name="userPhone" placeholder="Номер телефона" /></p>

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


<p><input type="text" name="userName" value="Том" readonly /></p>
<p><input type="text" name="userPhone" value="+12345678901" disabled /></p>

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Текстовые поля в HTML5</title>
	</head>
	<body>
		<form>
			<p><input list="phonesList" type="text" name="model" placeholder="Введите модель" /></p>
			<p>
				<button type="submit">Отправить</button>
			</p>
		</form>
		<datalist>
			<option value="iPhone 6S" label="54000"/>
			<option value="Lumia 950">35000</option>
			<option value="Nexus 5X"/>
		</datalist>
	</body>
</html>

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

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

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

<input type="text" name="username" dir="rtl" />

Поле поиска

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Поиск в HTML5</title>
	</head>
	<body>
	<form>
		<input type="search" name="term" />
		<input type="submit" value="Поиск" />
	</form>
	</body>
</html>

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

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


<form>
	<p><input type="text" name="login" /></p>
	<p><input type="password" name="password" /></p>
	<input type="submit" value="Авторизация" />
</form>

НазадСодержаниеВперед

html — разрывы строк во входном значении элемента формы

спросил

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

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

Я пытаюсь добавить разрывы строк (также известные как новые строки) к значениям input -элемента. &НоваяСтрока; , , и \n не работают; все равно все в одну строку.

Я не нашел ответа на этот вопрос среди других вопросов, решающих мою проблему. Заранее спасибо.

  • html
  • формы
  • ввод
  • новая строка

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

Элементы HTML input , type text или что-то подобное (например, электронная почта ) преднамеренно удалит все разрывы строк, так что это не сработает.

Единственным элементом формы, допускающим разрывы строк, является текстовое поле .

Между прочим, Clipboard. js работает, создавая фиктивный элемент textarea , чтобы творить чудеса.

0

вы можете использовать элемент div и передать атрибут ‘contenteditable=»true»‘ 

 
ваши входы

// CSS
.поле ввода {
  перенос слов: прерывание слова;
  слово-разрыв: слово-разрыв;
}

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

 Информация
1

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

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

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

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

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

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

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

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

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

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

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

Как создать текстовое поле HTML [Примеры]

При создании веб-форм вам понадобится несколько элементов, включая элементы div, метки и поля ввода.

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

Текстовое поле HTML позволяет пользователям форм отправлять свое имя, имя пользователя и другую важную информацию. Узнайте, как сделать его, следуя инструкциям ниже, а затем посмотрите несколько примеров.

Как создать текстовое поле в HTML

Создать текстовое поле в HTML легко с помощью элемента . Давайте разберем процесс шаг за шагом ниже.

Шаг 1: Создайте элемент этикетки.

Для начала создайте элемент

Шаг 2: Создайте элемент ввода.

Затем создайте элемент . В открывающем теге добавьте атрибут type и установите для него значение «text». Обратите внимание, что это значение по умолчанию. Затем добавьте атрибут ID  и name  и задайте для них то же значение, что и для атрибута for на предыдущем шаге.

Итак, для этого примера вы должны установить атрибуты имени и идентификатора на «Имя». Вот HTML:

Атрибут имени необходим для отправки любых данных из формы. Атрибут id необходим, чтобы связать поле ввода с меткой.

Шаг 3: Определите любые другие необходимые атрибуты.

Ввод текста поддерживает дополнительные атрибуты, такие как maxlength, minlength и заполнитель, которые могут предоставить пользователям важный контекст при заполнении формы.

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

См. пример ввода текстового поля Pen HTML от HubSpot (@hubspot) на CodePen.

Вот видео, в котором эти шаги объясняются более подробно.

Ввод текстового поля HTML

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

Элемент может отображаться другими способами с использованием различных атрибутов типа, таких как «флажок», «дата», «электронная почта», «пароль» и «отправить». Но при использовании атрибута типа текста или без атрибута результат будет выглядеть следующим образом:

Источник изображения

HTML Textarea

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