Создайте базовые HTML-формы

Введение

В этом практическом занятии мы научимся создавать базовую HTML-форму с использованием тега <form> и различных элементов форм.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Настройка HTML-документа

Начнем с создания базового HTML-документа со следующей структурой:

<!doctype html>
<html>
  <head>
    <title>HTML Form Example</title>
  </head>
  <body></body>
</html>

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

Теперь создадим базовую HTML-форму с полем ввода и кнопкой отправки. Добавьте следующий код внутри тега body:

<h1>HTML Form Example</h1>
<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

В коде выше у нас есть тег <h1>, который служит заголовком для нашей формы. Затем мы имеем тег <form>, и внутри него теги <label> и <input>. Значение атрибута for тега <label> должно совпадать с атрибутом id в теге <input>. Также у нас есть тег <br> для добавления переноса строки. Наконец, у нас есть тег <input> с атрибутом type равным "submit".

Добавление элементов формы

Мы можем добавить различные элементы форм, используя разные типы полей ввода в форме. Добавим выпадающее меню и флажки к нашей форме. Замените код тега <form> на следующий код:

<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <label for="gender">Gender:</label>
  <select name="gender" id="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
  <br /><br />
  <label for="hobby">Hobbies:</label>
  <br />
  <input type="checkbox" id="coding" name="hobby" value="coding" />
  <label for="coding">Coding</label>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <input type="checkbox" id="drawing" name="hobby" value="drawing" />
  <label for="drawing">Drawing</label>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

В коде выше мы добавили тег <select> для поля выбора пола с тремя вариантами с использованием тега <option>. Также добавили три флажка с разными подписями для увлечений.

Атрибуты форм

Мы можем добавить атрибуты к тегу <form>, чтобы настроить поведение формы. Добавим атрибуты action и method к нашей форме. Замените код тега <form> на следующий код:

<form action="submit-form.php" method="post"></form>

В коде выше мы добавили атрибут action со значением "submit-form.php" и атрибут method со значением "post". Это говорит браузеру отправить данные формы в файл "submit-form.php" с использованием HTTP-метода POST.

Валидация форм

Мы можем использовать атрибут required, чтобы сделать некоторые поля обязательными. Добавьте атрибут required к тегу <input> для поля имени.

<input type="text" name="name" id="name" required />

Доступность форм

Мы также можем добавить функции доступности к нашей форме, используя теги <fieldset> и <legend>. Оберните поле выбора пола следующим кодом:

<fieldset>
  <legend>Gender:</legend>
  ...
</fieldset>

Это группирует поле выбора пола и добавляет легенду для группы.

Добавление меток

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

<label for="coding">Coding</label>
<input type="checkbox" id="coding" name="hobby" value="coding" />

Это связывает каждую метку с соответствующим флажком.

Резюме

В этом практическом занятии мы узнали, как создавать базовую HTML-форму с использованием тега <form> и различных элементов форм, таких как поля ввода, выпадающие списки и флажки. Мы также узнали, как добавлять атрибуты форм, такие как method, action и required, и как добавлять функции доступности с использованием тегов <fieldset> и <legend>.

HTML-форма ввода