Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 18887 / 1859 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Практическая работа 2:

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

< Лекция 17 || Практическая работа 2: 123 || Практическая работа 3 >
Шаг 3

Создадим поля для ввода email и номера телефона, почтового индекса и города:

<fieldset>
  <legend>Форма регистрации</legend>
  
    <label for=fio>ФИО</label>
    <input id=fio name=fio type=text>
   
    <label for=email>Email</label>
    <input id=email name=email type=email>
   
    <label for=phone>Номер телефона</label>
    <input id=phone name=phone type=tel>   
</fieldset>
18.3.

Как можно видеть по следующему рисунку, результат немного иной, нежели мы ожидали:

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

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

Для выравнивания элементов формы построчно и относительно друг друга необходимо создать таблицу с двумя колонками и без видимых границ. Изменим код следующим образом:

<fieldset>
  <legend>Форма регистрации</legend>
  <table class="alignment">
    <tr>
   <td> <label for=fio>ФИО</label> </td>
   <td> <input id=fio name=fio type=text> </td>
  </tr>
    <tr>
   <td> <label for=email>Email</label> </td>
   <td> <input id=email name=email type=email> </td>
    </tr>
  <tr>
   <td> <label for=phone>Номер телефона</label> </td>
   <td> <input id=phone name=phone type=tel> </td>
  </tr>
    </table>   
  </fieldset>
18.4.

В результате получим следующее:

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

Рис. 18.5. Промежуточный результат на шаге 4
Шаг 5

Добавим поле для ввода даты рождения, для этого используем type=date (работает не со всеми браузерами). Добавим к таблице следующую строку:

<tr>
   <td><label for=dateofbirth>Дата рождения</label></td>
   <td><input id=dateofbirth name=dateofbirth type="date" /></td>
  </tr>
18.5.

В случае, если ваш браузер поддерживает данный тип элементов управления, получим следующее:

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

Рис. 18.6. Промежуточный результат на шаге 5
Шаг 6

Для логической группировки, добавим еще один fieldset, объединяющий элементы, указывающие адрес и почтовый индекс:

<fieldset>
  <legend>Параметры доставки</legend>
  <table>
   <tr>
    <td><label for=address>Адрес</label></td>
    <td><textarea id=address name=address rows=5 ></textarea></td>
   </tr>
   <tr>
    <td><label for=postcode>Почтовый индекс</label></td>
    <td><input id=postcode name=postcode type=text ></td>
   </tr>
   
  </table>
 </fieldset>
18.6.

Поскольку написание полного адреса, скорее всего займет не одну строку, зададим атрибут rows, со значением равным 5 для соответствующего тега.

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

Рис. 18.7. Промежуточный результат на шаге 6
< Лекция 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 () "

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

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

Евгений Ключников
Евгений Ключников
Россия, Уфа, УГАТУ, 2011
Vladislav Kimir
Vladislav Kimir
Россия, Kemerovo