HTML5. Работа с веб-формами

Целью данного практического занятия является обучение таким основам работы с веб - формами, как:

• создание веб - форм;
• стилизация форм;
• валидация вводимых значений;
• задание маски ввода.

Задание

• создать страницу регистрации с веб - формами, по образу многочисленных регистрационных веб - страниц, следующего вида:

Рис. 18.1. Примерный макет веб - страницы для выполнения задания

Необходимо также создать соответствующие стили для оформления веб - формы и валидацию вводимых значений.

Ход работы

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

По аналогии с предыдущим практическим заданием создадим папку для стилей и основную HTML - страницу.

Рис. 18.2. Иерархия каталогов

Рассмотрим по шагам создание требуемой страницы с регистрационной формой.

Шаг 1

Непосредственно создадим форму регистрации.:

<form id="registration">
  <fieldset>
    <legend>Форма регистрации</legend>
  </fieldset>
</form>

Тег <fieldset> используется для логической группировки объектов формы.

Тег <legend> определяет заголовок.

Шаг 2

Добавим поле для ввода ФИО пользователя:

<fieldset>
    <legend>Форма регистрации</legend>
    
        <label for=fio>ФИО</label>
        <input id=fio name=fio type=text>
</fieldset>

На данном шаге форма будет выглядеть в браузере следующим образом:

Рис. 18.3. Промежуточный результат на шаге 2