Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 19801 / 2044 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Практическая работа 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 >
Галина Башкирова
Галина Башкирова

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

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

 

Константин Моренко
Константин Моренко
Игорь Хан
Игорь Хан
Узбекистан, Ташкент, Ташкентский педагогический институт иностранных языков, 1990
Евгений Снегиренко
Евгений Снегиренко
Россия, г. Кемерово