Создание формы для добавления записей

Ввод данных в таблицу БД.

В этом упражнении вы создадите HTML-форму, содержащую поля ввода для каждого столбца в таблице базы данных my_music. В предыдущей лабораторной работе мы создали восемь полей, которые соответствуют восьми столбцам таблицы базы данных. Форма (интерфейс) для добавления ваших записей должна иметь элемент для ввода значений каждого из этих полей.
Создайте с помощью текстового редактора новый файл.
Начните блок HTML:

Создание формы для добавления записей - student2.ru

Используем имена полей таблицы базы данных в качестве значений параметра NAME в определении полей HTML-формы. А также, где это возможно, используем значения размера полей таблицы в качестве значений параметра MAXLENGTH в определении полей HTML-формы.
Начните HTML-форму с методом post и действием do_addrecord.php:

Создание формы для добавления записей - student2.ru

Для лучшего размещения полей в форме создадим HTML-таблицу. Начнем с создания строки новой таблицы и ячейки данных, а затем создадим в этой ячейке поле ввода номера записи (ID) с надписью.
Для этого введите код:

<table cellspacing=3 cellpadding=3>

<tr>

<td valign=top>

<p><strong>Номер записи ID:</strong><br>

<input type="text" name="id" size=5 maxlength=5></p>

<p><strong>Дата (ГГГГ-ММ-ДД):</strong><br>

<input type="text" name="date_asq" size=10 maxlength=10></p>

Чтобы закрыть ячейку данных таблицы, введите код </TD>
(в MySQL используется дата в формате ГГГГ-ММ-ДД. Например, дата 2016-12-06 означает 6 декабря 2016 года).

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

Создание формы для добавления записей - student2.ru

Чтобы закрыть ячейку и строку таблицы HTML, введите код:

Создание формы для добавления записей - student2.ru

Чтобы создать новую строку HTML-таблицы и ячейку, в которой будет поле ввода с надписью для названия музыкальной записи, введите код:

Создание формы для добавления записей - student2.ru

Закройте ячейку HTML-таблицы:

Создание формы для добавления записей - student2.ru

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

Создание формы для добавления записей - student2.ru

Закройте ячейку и строку HTML-таблицы:

Создание формы для добавления записей - student2.ru

Чтобы начать новую строку и ячейку HTML-таблицы с полем ввода для имени артиста, введите код:

Создание формы для добавления записей - student2.ru

Чтобы закрыть ячейку HTML-таблицы, введите:

Создание формы для добавления записей - student2.ru

Чтобы создать в этой же строке новую ячейку с полем ввода и надписью для фамилии артиста, введите код:

Создание формы для добавления записей - student2.ru

Закройте ячейку и строку HTML-таблицы:

Создание формы для добавления записей - student2.ru

Чтобы начать новую строку с двумя объединенными ячейками HTML-таблицы и создать в них текстовую область с надписью, введите код:

Создание формы для добавления записей - student2.ru

Чтобы добавить кнопку Добавить запись и закрыть ячейку, строку таблицы и саму HTML-таблицу, введите код:

Создание формы для добавления записей - student2.ru

Закройте форму и HTML-документ:

Создание формы для добавления записей - student2.ru

Сохраните созданный файл с именем show_addrecord.html в папке для документов вашего Web-сервера.
Запустите свой Web-браузер, в поле ввода Адрес: введите
http://localhost/show_addrecord.html (с поправкой на Ваш адрес) и нажмите клавишу Enter, в рабочее окно браузера будет загружена страница Добавление записей.

Создание формы для добавления записей - student2.ru

На рисунке вы видите форму для добавления записей в таблицу, которая содержит все необходимые элементы для занесения данных о вашей музыкальной коллекции.
В следующем упражнении вы создадите сценарий, который создаст оператор SQL из введенных в эту форму данных. Этот оператор будет послан на сервер MySQL для записи данных в таблицу.

Наши рекомендации