HTML-формы

Введение

HTML-формы являются фундаментальной частью веба, позволяя пользователям взаимодействовать с веб-сайтами, вводя информацию. Это может быть что угодно, от простого поля поиска до сложной страницы регистрации. В этой лабораторной работе вы изучите основы создания HTML-формы, включая добавление текстовых полей, меток (labels) и кнопок отправки (submit buttons). Мы шаг за шагом создадим простую контактную форму.

В лабораторной среде для вас уже запущен веб-сервер. Вы можете писать свой HTML-код в файле index.html и видеть предпросмотр в реальном времени, нажав на вкладку Web 8080 в верхнем левом углу.

Создайте тег form с атрибутом action

На этом шаге мы начнем с создания контейнера для наших элементов формы. Тег <form> используется для создания HTML-формы для ввода данных пользователем. Все элементы формы, такие как текстовые поля, кнопки и флажки (checkboxes), должны быть помещены внутрь тега <form>.

Атрибут action указывает, куда будут отправлены данные формы при ее отправке. Для этой лабораторной работы мы оставим его пустым, так как мы сосредоточены на HTML-структуре, а не на серверной обработке.

Пожалуйста, откройте файл index.html из файлового менеджера слева и добавьте следующий код.

<form action=""></form>

После добавления кода вы можете переключиться на вкладку Web 8080, чтобы просмотреть страницу. Пока вы ничего не увидите, так как форма в настоящее время пуста.

Добавьте тег input с типом text для текстового поля

На этом шаге мы добавим поле для ввода текста пользователем. Тег <input> является одним из наиболее часто используемых элементов формы. Он может отображаться различными способами в зависимости от атрибута type.

Для создания однострочного поля ввода текста мы используем type="text". Это идеально подходит для таких вещей, как имена пользователей, имена или адреса электронной почты.

Теперь давайте добавим поле ввода текста внутрь тегов <form> в вашем файле index.html.

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

Сохраните файл и переключитесь на вкладку Web 8080. Теперь вы должны увидеть небольшое текстовое поле на странице, куда можно вводить текст.

Вставьте тег input с типом submit для кнопки

На этом шаге мы добавим кнопку, которая позволит пользователям отправлять форму. Мы можем создать кнопку отправки, снова используя тег <input>, но на этот раз с type="submit".

Когда пользователь нажимает эту кнопку, данные формы отправляются на сервер, указанный в атрибуте action тега <form>. Текст, отображаемый на кнопке, можно задать с помощью атрибута value.

Давайте добавим кнопку отправки в нашу форму в index.html.

<form action="">
  <input type="text" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Мы также добавили теги <br><br> для создания вертикального пространства между текстовым полем и кнопкой для лучшего расположения. Сохраните файл и проверьте вкладку Web 8080, чтобы увидеть новую кнопку "Submit".

Используйте тег label с атрибутом for для маркировки

На этом шаге мы добавим подпись к нашему текстовому полю. Тег <label> определяет подпись для многих элементов формы. Он улучшает удобство использования и доступность, поскольку при нажатии на подпись соответствующее поле ввода получит фокус.

Чтобы связать <label> с <input>, атрибут for тега <label> должен совпадать с атрибутом id тега <input>.

Давайте добавим id к нашему текстовому полю ввода и соответствующий тег <label> в index.html.

<form action="">
  <label for="username">Name:</label><br />
  <input type="text" id="username" name="username" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Мы добавили label для "Name:" и связали его с полем ввода, используя id="username" и for="username". Мы также добавили атрибут name к полю ввода, что важно для идентификации данных при отправке формы.

Сохраните файл и просмотрите изменения на вкладке Web 8080. Теперь, если вы нажмете на текст "Name:", курсор автоматически переместится в текстовое поле.

Добавьте тег textarea для многострочного ввода

На этом шаге мы добавим большую текстовую область для ввода сообщений пользователями. В то время как <input type="text"> предназначен для однострочного ввода текста, тег <textarea> используется для многострочного ввода.

Вы можете контролировать размер <textarea> с помощью атрибутов rows и cols, которые соответственно указывают видимое количество строк и символов в строке.

Давайте добавим <textarea> для сообщения в нашу форму, вместе с его собственной <label>. Обновите ваш файл index.html с финальным кодом ниже.

<form action="">
  <label for="username">Name:</label><br />
  <input type="text" id="username" name="username" />
  <br /><br />
  <label for="message">Message:</label><br />
  <textarea id="message" name="message" rows="4" cols="30"></textarea>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

Теперь наша форма имеет поле для имени и область для сообщения. Сохраните файл и посмотрите на завершенную форму на вкладке Web 8080. Теперь у вас есть функциональная, хорошо структурированная HTML-форма.

Резюме

Поздравляем! Вы успешно создали базовую HTML-форму. В этой лабораторной работе вы научились:

• Использовать тег <form> как контейнер для элементов формы.
• Создавать однострочное текстовое поле с помощью <input type="text">.
• Создавать кнопку отправки с помощью <input type="submit">.
• Улучшать доступность и удобство использования, связывая <label> с полем ввода с помощью атрибутов for и id.
• Добавлять многострочную текстовую область с помощью тега <textarea>.

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