Атрибуты полей (placeholder, autocomplete) [Модуль 7: Формы и элементы ввода]: Тренажер HTML

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

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

Список тем

Добавляем первую подсказку (placeholder)

id: 37858_attributes-placeholder-basic

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

CSS

body {
  font-family: sans-serif;
  background-color: #f4f7f9;
  padding: 20px;
}
.search-form {
  display: flex;
  flex-direction: column;
}
label {
  margin-bottom: 5px;
  color: #333;
}
input[type='text'] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
input[type='text']:focus {
  outline: none;
  border-color: #007bff;
}

                     <form class="search-form">
  <label for="product">Поиск по сайту</label>
  <input type="text" id="product" name="product" input1="Название товара...">
</form>

HTML

<form class="search-form">
  <label for="product">Поиск по сайту</label>
  <input type="text" id="product" name="product" input1="Название товара...">
</form>

Чтобы добавить текстовую подсказку внутрь поля ввода, используйте атрибут `placeholder`. В качестве значения этого атрибута укажите нужный текст в кавычках. Например: `placeholder="Текст подсказки"`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37858_attributes-autocomplete-off

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

CSS

body {
  font-family: sans-serif;
  background-color: #f4f7f9;
  padding: 20px;
}
.promo-form {
  display: flex;
  flex-direction: column;
}
label {
  margin-bottom: 5px;
  color: #333;
}
input[type='text'] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
input[type='text']:focus {
  outline: none;
  border-color: #007bff;
}

                     <form class="promo-form">
  <label for="promo">Промокод</label>
  <input type="text" id="promo" name="promo" input1>
</form>

HTML

<form class="promo-form">
  <label for="promo">Промокод</label>
  <input type="text" id="promo" name="promo" input1>
</form>

Для управления автозаполнением используется атрибут `autocomplete`. Чтобы его отключить, присвойте ему значение `off`. Полная конструкция будет выглядеть так: `autocomplete="off"`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

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

id: 37858_attributes-placeholder-number

Теперь перед вами поле для ввода количества товара. Это поле числового типа. Добавьте в него подсказку, чтобы пользователь видел пример ввода, например, '0'.

CSS

body {
  font-family: sans-serif;
  background-color: #f4f7f9;
  padding: 20px;
}
.quantity-form {
  display: flex;
  flex-direction: column;
}
label {
  margin-bottom: 5px;
  color: #333;
}
input[type='number'] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  width: 100px;
}
input[type='number']:focus {
  outline: none;
  border-color: #007bff;
}

                     <form class="quantity-form">
  <label for="qty">Количество</label>
  <input type="number" id="qty" name="qty" input1="0">
</form>

HTML

<form class="quantity-form">
  <label for="qty">Количество</label>
  <input type="number" id="qty" name="qty" input1="0">
</form>

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

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Включаем тематическое автозаполнение

id: 37858_attributes-autocomplete-on-semantic

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

CSS

body {
  font-family: sans-serif;
  background-color: #f4f7f9;
  padding: 20px;
}
.delivery-form {
  display: flex;
  flex-direction: column;
}
label {
  margin-bottom: 5px;
  color: #333;
}
input[type='text'] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
input[type='text']:focus {
  outline: none;
  border-color: #007bff;
}

                     <form class="delivery-form">
  <label for="country">Страна</label>
  <input type="text" id="country" name="country" autocomplete="input1">
</form>

HTML

<form class="delivery-form">
  <label for="country">Страна</label>
  <input type="text" id="country" name="country" autocomplete="input1">
</form>

Атрибут `autocomplete` может принимать не только значения `on` и `off`, но и специальные значения, которые помогают браузеру лучше понять тип данных. Для названия страны используется значение `country-name`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Комбинируем placeholder и autocomplete

id: 37858_attributes-placeholder-autocomplete-combo

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

CSS

body {
  font-family: sans-serif;
  background-color: #f4f7f9;
  padding: 20px;
}
.address-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.form-group {
  display: flex;
  flex-direction: column;
}
label {
  margin-bottom: 5px;
  color: #333;
}
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
input:focus {
  outline: none;
  border-color: #007bff;
}

                     <form class="address-form">
  <div class="form-group">
    <label for="city">Город</label>
    <input type="text" id="city" name="city" input1="Например, Москва" autocomplete="on">
  </div>
  <div class="form-group">
    <label for="zip">Индекс</label>
    <input type="text" id="zip" name="zip" placeholder="Например, 101000" input2>
  </div>
</form>

HTML

<form class="address-form">
  <div class="form-group">
    <label for="city">Город</label>
    <input type="text" id="city" name="city" input1="Например, Москва" autocomplete="on">
  </div>
  <div class="form-group">
    <label for="zip">Индекс</label>
    <input type="text" id="zip" name="zip" placeholder="Например, 101000" input2>
  </div>
</form>

Вы можете использовать несколько атрибутов для одного элемента. Просто перечислите их через пробел внутри тега `input`. Для города используйте `placeholder` и `autocomplete="on"`. Для индекса — `placeholder` и `autocomplete="off"`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Форма отзыва о товаре

id: 37858_attributes-review-form

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

CSS

body {
  font-family: sans-serif;
  background-color: #f4f7f9;
  padding: 20px;
}
.review-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
label {
  margin-bottom: 5px;
  color: #333;
}
input, textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-family: sans-serif;
  width: 90%;
}
textarea {
  min-height: 100px;
  resize: vertical;
}
input:focus, textarea:focus {
  outline: none;
  border-color: #007bff;
}

                     <form class="review-form">
  <div>
    <label for="sku">Артикул товара</label>
    <input type="text" id="sku" name="sku" input1>
  </div>
  <div>
    <label for="review-text">Ваш отзыв</label>
    <textarea id="review-text" name="review-text" input2="Поделитесь вашим мнением..."></textarea>
  </div>
</form>

HTML

<form class="review-form">
  <div>
    <label for="sku">Артикул товара</label>
    <input type="text" id="sku" name="sku" input1>
  </div>
  <div>
    <label for="review-text">Ваш отзыв</label>
    <textarea id="review-text" name="review-text" input2="Поделитесь вашим мнением..."></textarea>
  </div>
</form>

Для поля с артикулом используйте `autocomplete="off"`. Для текстовой области (`textarea`) используйте атрибут `placeholder` так же, как и для `input`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Настраиваем поле для нового пароля

id: 37858_attributes-autocomplete-new-password

На странице создания учетной записи есть поле для ввода нового пароля. Чтобы помочь менеджерам паролей правильно сохранять данные и предлагать сгенерированные надежные пароли, задайте полю соответствующее значение для автозаполнения. Также добавьте подсказку 'Не менее 8 символов'.

CSS

body {
  font-family: sans-serif;
  background-color: #f4f7f9;
  padding: 20px;
}
.password-form {
  display: flex;
  flex-direction: column;
}
label {
  margin-bottom: 5px;
  color: #333;
}
input[type='password'] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
input[type='password']:focus {
  outline: none;
  border-color: #007bff;
}

                     <form class="password-form">
    <label for="new-pass">Придумайте пароль</label>
    <input type="password" id="new-pass" 
           input1="Не менее 8 символов" 
           autocomplete="input2">
</form>

HTML

<form class="password-form">
    <label for="new-pass">Придумайте пароль</label>
    <input type="password" id="new-pass" 
           input1="Не менее 8 символов" 
           autocomplete="input2">
</form>

Для полей, где пользователь должен создать новый пароль, используется специальное значение атрибута `autocomplete`: `new-password`. Атрибут `placeholder` добавляется как обычно.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку