Creating the Record Addition Form

The HTML form will contain an input field for each column in the my_music database table. In the previous chapter, you created eight fields, which correspond to eight columns. Your record addition interface should have a space for each of these fields.

Note

Use the database field names as the value of the NAME attribute in the HTML form fields. Also, where appropriate, use the size of the database field as the value of the MAXLENGTH attribute in the HTML form fields.

Open a new file in your text editor and type the following HTML:

<HTML>
<HEAD>
<TITLE>Add a Record</TITLE>
</HEAD>
<BODY>
<H1>Adding a Record to my_music</H1>

Begin your form. Assume that the method is POST and the action is a script called do_addrecord.php:
```
<FORM METHOD="POST" ACTION="do_addrecord.php">
```
Begin an HTML table to assist in layout. Start a new table row and table data cell, and then create an input field for the ID, with a text label:
```
<TABLE CELLSPACING=3 CELLPADDING=3>
<TR>
<TD VALIGN=TOP>
<P><STRONG>ID:</STRONG><BR>
<INPUT TYPE="text" NAME="id" SIZE=5 MAXLENGTH=5></P>
```
Create an input field for the date acquired with a text label. Close the table data cell after the input field:
```
<P><STRONG>Date Acquired (YYYY-MM-DD):</STRONG><BR>
<INPUT TYPE="text" NAME="date_acq" SIZE=10 MAXLENGTH=10></P>
</TD>
```
Note
The date type used in MySQL uses the YYYY-MM-DD format. An example of a date using this format is 2004-03-02 (March 2nd, 2004).

In a new table data cell, create a set of radio buttons to select the format of the recording. Close the table data cell and the table row after the set of radio buttons:

<TD VALIGN=TOP>
<P><STRONG>Format:</STRONG><BR>
<INPUT TYPE="radio" NAME="format" VALUE="CD" checked> CD
<INPUT TYPE="radio" NAME="format" VALUE="CS"> cassette
<INPUT TYPE="radio" NAME="format" VALUE="LP"> LP
</P>
</TD>
</TR>

Start a new table row and table data cell, and then create an input field for the title with a text label. Close the table data cell after the input field:
```
<TR>
<TD VALIGN=TOP>
<P><STRONG>Title:</STRONG><BR>
<INPUT TYPE="text" NAME="title" SIZE=35 MAXLENGTH=150></P>
</TD>
```
In a new table data cell, create an input field for the record label information with a text label. Close the table data cell and the table row after the input field:
```
<TD VALIGN=TOP>
<P><STRONG>Record Label:</STRONG><BR>
<INPUT TYPE="text" NAME="rec_label" SIZE=35 MAXLENGTH=50></P>
</TD>
</TR>
```
Start a new table row and table data cell, and then create an input field for the artist's first name with a text label. Close the table data cell after the input field:
```
<TR>
<TD VALIGN=TOP>
<P><STRONG>Artist's First Name:</STRONG><BR>
<INPUT TYPE="text" NAME="artist_fn" SIZE=35 MAXLENGTH=100></P>
</TD>
```
In a new table data cell, create an input field for the artist's last name (or group name) with a text label. Close the table data cell and the table row after the input field:
```
<TD VALIGN=TOP>
<P><STRONG>Artist's Last Name (or Group Name):</STRONG><BR>
<INPUT TYPE="text" NAME="artist_ln" SIZE=35 MAXLENGTH=100></P>
</TD>
</TR>
```
Start a new table row and a table data cell that spans two columns. Create a TEXTAREA field with a text label to hold your notes regarding the recording:
```
<TR>
<TD VALIGN=TOP COLSPAN=2 ALIGN=CENTER>
<P><STRONG>My Notes:</STRONG><BR>
<TEXTAREA NAME="my_notes" COLS=35 ROWS=5 WRAP=virtual></TEXTAREA></P>
```
Add a submit button, and then close the table data cell, the table row, and the table itself:
```
<P><INPUT TYPE="SUBMIT" NAME="submit" VALUE="Add Record"></P>
</TD>
</TR>
</TABLE>
```
Close your form, and add some more HTML so that the document is valid:
```
</FORM>
</BODY>
</HTML>
```
Save the file with the name show_addrecord.html, and place this file in the document root of your web server.
Open your web browser and type http://127.0.0.1/show_addrecord.html.

In the next section, you create the script that takes the form input, creates a SQL statement, and adds the record to the database table.