Опубликован: 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 >
Галина Башкирова
Галина Башкирова

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

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия