Создание базовой формы (form)

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

Опубликовано 04.04.2025
Просмотры 32
Автор
Рек. время прохождения 3 минуты
Упражнений 8
Комментарии 0
Тренажер HTML
В этой серии заданий вы познакомитесь с основой интерактивности в вебе — формами. Формы позволяют пользователям отправлять данные на сайт: регистрироваться, оставлять комментарии, искать информацию и многое другое. Мы начнем с самого главного — тега `<form>`, который является контейнером для всех элементов формы. Шаг за шагом вы научитесь добавлять текстовые поля, метки для них, поля для ввода пароля и, конечно же, кнопку для отправки данных. Каждое задание построено так, чтобы вы могли сосредоточиться на изучении HTML-синтаксиса, не отвлекаясь на придумывание контента.
Список тем

Создание контейнера формы

id: 37842_form-basic-1

Любая форма начинается с основного тега-контейнера. Ваша задача — обернуть текст 'Элементы формы будут здесь' в правильный тег, чтобы создать основу для будущей формы.

CSS
body { 
  font-family: sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
}
.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center;
  color: #888;
}
HTML
<input1 class="form-container">
  Элементы формы будут здесь
</input1>
Для создания форм в HTML используется парный тег `<form>`. Все элементы, предназначенные для сбора данных (поля ввода, кнопки и т.д.), должны размещаться внутри этого тега.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление текстового поля

id: 37842_form-basic-2

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

CSS
body { font-family: sans-serif; background-color: #f0f2f5; padding: 20px; }
.form-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
HTML
<form class="form-container">
  <input1>
</form>
Для создания большинства полей ввода используется тег `<input>`. Это одиночный тег, который не требует закрывающего `</input>`. По умолчанию он создает простое текстовое поле.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Связывание метки с полем ввода

id: 37842_form-basic-3

Поля ввода должны иметь подписи, чтобы пользователи понимали, какие данные нужно вводить. Добавьте атрибут к тегу `<label>`, чтобы связать его с полем ввода по `id`. Затем добавьте соответствующий `id` к самому полю ввода.

CSS
body { font-family: sans-serif; background-color: #f0f2f5; padding: 20px; }
.form-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
HTML
<form class="form-container">
  <div class="form-group">
    <label input1="user-name">Ваше имя:</label>
    <input type="text" input2="user-name">
  </div>
</form>
Для улучшения доступности и удобства использования форм, тег `<label>` связывают с тегом `<input>` с помощью атрибута `for`. Значение атрибута `for` должно совпадать со значением атрибута `id` у связанного элемента `<input>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указание типа поля: E-mail

id: 37842_form-basic-4

Тег `<input>` может принимать разные формы в зависимости от его типа. Измените тип поля ввода так, чтобы оно было предназначено специально для адресов электронной почты. Это поможет браузерам и мобильным устройствам правильно валидировать данные и отображать удобную клавиатуру.

CSS
body { font-family: sans-serif; background-color: #f0f2f5; padding: 20px; }
.form-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
HTML
<form class="form-container">
  <div class="form-group">
    <label for="user-email">Email:</label>
    <input input1="email" id="user-email">
  </div>
</form>
Чтобы указать назначение поля ввода, используется атрибут `type`. Для поля электронной почты установите значение атрибута `type` равным `email`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37842_form-basic-5

Для полей, в которые вводятся конфиденциальные данные, такие как пароли, существует специальный тип. Укажите правильное значение для атрибута `type`, чтобы вводимые символы скрывались за точками или звездочками.

CSS
body { font-family: sans-serif; background-color: #f0f2f5; padding: 20px; }
.form-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
HTML
<form class="form-container">
  <div class="form-group">
    <label for="user-pass">Пароль:</label>
    <input type="input1" id="user-pass">
  </div>
</form>
Чтобы создать поле для ввода пароля, в котором символы маскируются, используйте значение `password` для атрибута `type`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление кнопки отправки

id: 37842_form-basic-6

Форма почти готова, но ей не хватает главного — кнопки для отправки данных. Создайте кнопку с текстом 'Зарегистрироваться', которая будет выполнять действие отправки формы.

CSS
body { font-family: sans-serif; background-color: #f0f2f5; padding: 20px; }
.form-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
button { width: 100%; padding: 10px; border: none; border-radius: 4px; background-color: #007bff; color: white; font-size: 16px; cursor: pointer; }
button:hover { background-color: #0056b3; }
HTML
<form class="form-container">
  <input1 input2="submit">Зарегистрироваться</input1>
</form>
Кнопку для отправки формы можно создать с помощью тега `<button>`. Чтобы она работала как кнопка отправки, ей нужно задать атрибут `type` со значением `submit`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Подсказка в поле ввода

id: 37842_form-basic-7

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

CSS
body { font-family: sans-serif; background-color: #f0f2f5; padding: 20px; }
.form-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
HTML
<form class="form-container">
  <div class="form-group">
    <label for="full-name">Имя:</label>
    <input type="text" id="full-name" input1="Введите ваше имя">
  </div>
</form>
Для отображения текста-заполнителя в поле ввода используется атрибут `placeholder`. Текст, указанный в этом атрибуте, будет виден до тех пор, пока пользователь не начнет вводить свои данные.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Именование полей для отправки данных

id: 37842_form-basic-8

Чтобы данные из полей ввода могли быть отправлены на сервер, каждому полю необходимо дать уникальное имя. Добавьте атрибут `name` к полям для email и пароля, чтобы их можно было идентифицировать после отправки формы.

CSS
body { font-family: sans-serif; background-color: #f0f2f5; padding: 20px; }
.form-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
HTML
<form class="form-container">
  <div class="form-group">
    <label for="user-email">Email:</label>
    <input type="email" id="user-email" input1="email">
  </div>
  <div class="form-group">
    <label for="user-pass">Пароль:</label>
    <input type="password" id="user-pass" input2="password">
  </div>
</form>
Атрибут `name` используется для идентификации данных поля после их отправки на сервер. Без этого атрибута данные из поля просто не будут отправлены. Придумайте осмысленные имена, например, `email` и `password`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру