Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17358 / 1606 | Оценка: 3.91 / 4.09 | Длительность: 12:32: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 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Оксана Горбань
Оксана Горбань
Казахстан, Казахстан Павлодарская область город Павлодар
Илья Черёмкин
Илья Черёмкин
Россия