Текстовые поля (input type='text')

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 16
Автор
Рек. время прохождения 4 минуты
Упражнений 10
Комментарии 0
Тренажер HTML
В этой серии заданий мы сосредоточимся на одном из самых фундаментальных элементов HTML-форм — текстовом поле ввода `<input type='text'>`. Это основной инструмент для сбора любой текстовой информации от пользователя, будь то поисковый запрос, название товара или короткий комментарий. Задания построены по принципу 'от простого к сложному'. Вы начнете с создания самого базового текстового поля, а затем постепенно научитесь добавлять к нему полезные атрибуты: подсказки (placeholder), значения по умолчанию (value), ограничения на длину вводимого текста (maxlength), а также научитесь делать поля обязательными для заполнения (required) или недоступными для редактирования (disabled, readonly). Каждое задание — это практический шаг к уверенному владению формами в HTML.
Список тем

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

id: 37844_text-input-basic-01

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

CSS
body {
  font-family: Arial, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
HTML
<div class="form-group">
  <label for="search">Поиск</label>
   <input1 id="search" input2="text">
</div>
Используйте тег `<input>`. Чтобы он стал текстовым полем, ему нужен атрибут `type` со значением `text`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление подсказки (placeholder)

id: 37844_text-input-placeholder-02

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

CSS
body {
  font-family: Arial, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
HTML
<div class="form-group">
  <label for="product_name">Название товара</label>
  <input type="text" id="product_name" input1="Например, 'Умные часы'">
</div>
Для добавления текста-подсказки внутри поля используется атрибут `placeholder`. В качестве значения ему передается строка с текстом.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37844_text-input-value-03

Иногда нужно, чтобы текстовое поле уже содержало какое-то значение при загрузке страницы. Установите для поля ввода значение по умолчанию 'Без категории'.

CSS
body {
  font-family: Arial, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
HTML
<div class="form-group">
  <label for="category">Категория товара</label>
  <input type="text" id="category" input1="Без категории">
</div>
Чтобы задать полю начальное значение, которое пользователь может изменить, используется атрибут `value`. Его значением будет нужный текст.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Отключенное (неактивное) поле

id: 37844_text-input-disabled-04

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

CSS
body {
  font-family: Arial, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type="text"]:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}
HTML
<div class="form-group">
  <label for="sku">Артикул (нельзя изменить)</label>
  <input type="text" id="sku" value="SKU-12345-XYZ" input1>
</div>
Чтобы полностью отключить элемент формы, используется булевый атрибут `disabled`. Его не нужно присваивать какому-либо значению, достаточно просто добавить его к тегу.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Поле 'только для чтения'

id: 37844_text-input-readonly-05

Создайте поле, значение которого пользователь не может изменить, но может выделить и скопировать. В отличие от `disabled`, значение такого поля отправляется на сервер при отправке формы.

CSS
body {
  font-family: Arial, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type="text"][readonly] {
  background-color: #f8f9fa;
}
HTML
<div class="form-group">
  <label for="item_id">ID товара (можно скопировать)</label>
  <input type="text" id="item_id" value="ID-9876-5432" input1>
</div>
Для создания поля 'только для чтения' используется булевый атрибут `readonly`. Как и `disabled`, его достаточно просто добавить в тег.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Ограничение длины вводимого текста

id: 37844_text-input-maxlength-06

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

CSS
body {
  font-family: Arial, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
HTML
<div class="form-group">
  <label for="promo">Промокод (макс. 8 символов)</label>
  <input type="text" id="promo" input1="8">
</div>
Чтобы ограничить максимальное количество символов в поле ввода, используйте атрибут `maxlength`. В качестве значения укажите целое число, равное максимальной длине.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Настройка видимой ширины поля

id: 37844_text-input-size-07

Измените видимую ширину поля для ввода почтового индекса так, чтобы в нем помещалось примерно 6 символов. Это не ограничивает количество вводимых символов, а лишь меняет визуальный размер элемента.

CSS
body {
  font-family: Arial, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
HTML
<div class="form-group">
  <label for="zipcode">Индекс</label>
  <input type="text" id="zipcode" maxlength="6" input1="6">
</div>
Для управления видимой шириной поля в символах используется атрибут `size`. Его значение — это число символов, которое должно помещаться в поле. Обратите внимание, что CSS-свойство `width` в нашем примере имеет больший приоритет, но знание этого атрибута все равно полезно.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Обязательное для заполнения поле

id: 37844_text-input-required-08

Сделайте поле для ввода названия города обязательным. Браузер не позволит отправить форму (если бы она была), пока это поле не будет заполнено.

CSS
body {
  font-family: Arial, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input:required:invalid {
  border-color: #dc3545;
}
HTML
<div class="form-group">
  <label for="city">Город доставки</label>
  <input type="text" id="city" placeholder="Например, Москва" input1>
</div>
Чтобы сделать поле обязательным для заполнения, добавьте к нему булевый атрибут `required`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комбинация атрибутов

id: 37844_text-input-combined-09

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

CSS
body {
  font-family: Arial, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input:required:invalid {
  border-color: #dc3545;
}
HTML
<div class="form-group">
  <label for="query">Что вы ищете?</label>
  <input id="query" name="q" input1="text" input2="Поиск по сайту..." input3>
</div>
Вам нужно последовательно добавить три атрибута к тегу `<input>`: `type` со значением `text`, `placeholder` с текстом подсказки и булевый атрибут `required`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Проверка ввода по шаблону

id: 37844_text-input-pattern-10

Добавьте правило валидации для поля 'Код продукта'. Поле должно принимать только латинские буквы (в любом регистре) и цифры. Для этого используйте специальный атрибут, который проверяет значение по регулярному выражению.

CSS
body {
  font-family: Arial, sans-serif;
  padding: 15px;
  background-color: #f0f2f5;
  color: #333;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input:invalid {
  border-color: red;
}
HTML
<div class="form-group">
  <label for="product_code">Код продукта (латиница и цифры)</label>
  <input type="text" id="product_code" input1="[A-Za-z0-9]+" title="Код может содержать только латинские буквы и цифры.">
</div>
Для проверки вводимого значения на соответствие регулярному выражению используется атрибут `pattern`. В данном случае, чтобы разрешить только латинские буквы и цифры, используйте значение `[A-Za-z0-9]+`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру