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

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

В этом блоке заданий мы поработаем с одной из крутых фишек HTML5 — специальными типами полей для форм. Раньше для всего, от email до даты, использовался один и тот же `<input type="text">`. Это было неудобно: никакой автоматической проверки, а на телефонах всегда появлялась обычная текстовая клавиатура.<br>HTML5 всё изменил, добавив типы `email`, `url`, `number`, `tel` и другие. Зачем они нужны? Во-первых, для удобства пользователя: на мобильном устройстве для поля с номером телефона откроется цифровая клавиатура, а для email — клавиатура с символами «@» и «.». Во-вторых, для встроенной валидации. Браузер сам может проверить, похожа ли введенная строка на email или URL, и не даст отправить форму с ошибкой.<br>В этих упражнениях ты на практике научишься создавать такие поля и настраивать их с помощью специальных атрибутов. Это несложно, но сильно улучшает качество твоих веб-форм.

Список тем

Поле для веб-адреса

id: 37853_html-input-types-url-2

Создайте поле для ввода URL-адреса. Браузер сможет выполнить базовую проверку на корректность ссылки и предложит соответствующую клавиатуру на мобильных устройствах (например, с кнопкой «.com»).

CSS

body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  color: #333;
}
.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 320px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

                     <div class="form-container">
  <form>
    <div class="form-group">
      <label for="website">Веб-сайт:</label>
      <input type="input1" id="website" name="website" placeholder="https://example.com">
    </div>
    <button type="submit">Отправить</button>
  </form>
</div>

HTML

<div class="form-container">
  <form>
    <div class="form-group">
      <label for="website">Веб-сайт:</label>
      <input type="input1" id="website" name="website" placeholder="https://example.com">
    </div>
    <button type="submit">Отправить</button>
  </form>
</div>

Для поля, предназначенного для ввода URL, используется атрибут `type` со значением `url`.

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

Результат

Сообщения

Выполнить

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

Поле для ввода числа

id: 37853_html-input-types-number-4

Создайте поле, которое принимает только числовые значения. Рядом с полем появятся стрелки для увеличения или уменьшения числа, а на смартфонах откроется удобная цифровая клавиатура.

CSS

body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  color: #333;
}
.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 320px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

                     <div class="form-container">
  <form>
    <div class="form-group">
      <label for="quantity">Количество:</label>
      <input type="input1" id="quantity" name="quantity">
    </div>
    <button type="submit">Отправить</button>
  </form>
</div>

HTML

<div class="form-container">
  <form>
    <div class="form-group">
      <label for="quantity">Количество:</label>
      <input type="input1" id="quantity" name="quantity">
    </div>
    <button type="submit">Отправить</button>
  </form>
</div>

Для числового поля используется тип `number`. Просто укажите `type="number"`.

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

Результат

Сообщения

Выполнить

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

Числовое поле с ограничениями

id: 37853_html-input-types-number-range-6

Создайте поле для выбора количества товара. Пользователь должен иметь возможность выбрать число от 1 до 10 с шагом в 2 (то есть сможет ввести 1, 3, 5, 7, 9).

CSS

body {
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  color: #333;
}
.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 320px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

                     <div class="form-container">
  <form>
    <div class="form-group">
      <label for="items">Количество (1-10, шаг 2):</label>
      <input type="number" id="items" name="items" value="1" input1="1" input2="10" input3="2">
    </div>
    <button type="submit">Отправить</button>
  </form>
</div>

HTML

<div class="form-container">
  <form>
    <div class="form-group">
      <label for="items">Количество (1-10, шаг 2):</label>
      <input type="number" id="items" name="items" value="1" input1="1" input2="10" input3="2">
    </div>
    <button type="submit">Отправить</button>
  </form>
</div>

Используйте атрибуты `min` для минимального значения, `max` для максимального и `step` для шага изменения значения. Например: `min="1"`.

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

Результат

Сообщения

Выполнить

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