This course will be retired on December 10, 2019. We recommend "Build a Basic PHP Website" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Creating Input Fields2:52 with Alena Holligan
Now that we have our form element in place, we will be adding the fields needed to collect user information and submit our form.
Update Label Tag for Details
You'll need to update the label on the details field to match the "name" of the details textarea.
<td><label for="details">Suggest Item Detail</label></td>
Course: HTML Forms
Let's add a few more fields to our form.
For forms with multiple fields,
it's fairly common to use an HTML table element.
For each form field, we'll add a row to the table.
Each row will have two columns, one column for the label, and
one column for the field.
The table cell with label acts as a heading to the table cell with the field.
We'll use the table header cell element, TH, for the label,
and we'll use the table data cell, TD, for the cell with the field.
Let's move these elements into the proper space.
Our label And our input field.
To add additional fields to the form, we can add additional rows to this table.
Let's copy this row.
And paste it.
The next field we'll be adding is where the site visitor can enter their
Let's change the name on the ID to email, and the name to email.
Then, we need to change our label, email, and email.
We need to make sure that the label attribute for
matches up with the input field attribute ID.
Let's place another row here.
This field will be for suggest item details.
This input element allows for only one line of text.
It's ideal for fields like name and email address, but it won't work for
the fields like a multi-lined message.
There's a separate HTML element for that, the text area.
The text area element has an opening and closing tag.
If you wanted some text to appear inside the text area by default,
you'd put text here, default, between the opening and closing tags.
Let's give this a name and ID.
Equals details and
Next we'll add a button down below the table.
A submit button is another type of input.
With the type equals submit.
You can also specify what text appears on the button
by specifying a value attribute.
Value equals, let's use "send".
We now have a nice form in place.
The user can fill out data, and submit the form to our server.
You need to sign up for Treehouse in order to download course files.Sign up