Опубликован: 01.08.2012 | Уровень: для всех | Доступ: свободно
Практическая работа 2:

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

< Лекция 17 || Практическая работа 2: 123 || Практическая работа 3 >
Аннотация: В рамках данного практического занятия мы рассмотрим процесс создания веб - форм средствами HTML

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

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

Задание

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

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

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

Ход работы

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

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

Иерархия каталогов

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

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

Шаг 1

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

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

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

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

Шаг 2

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

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

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

Промежуточный результат на шаге 2

Рис. 18.3. Промежуточный результат на шаге 2
< Лекция 17 || Практическая работа 2: 123 || Практическая работа 3 >
Сергей Крупко
Сергей Крупко
Как оплатить курс?
Галина Башкирова
Галина Башкирова
Темы Вкр для проф. переподготовки Профессиональное веб-программирование
Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989