Add a drop-down list, a text box and a button

Now you'll add elements to the HTML page that allow users to interact with it:

These elements are all "form" elements which means they must go inside <form> tags.

1. Go to the <body> section of your page, after your heading, and type your opening and closing form tags like this:

<form>
</form>

2. Put a blank line between the form tags and type the basic tags for a drop-down list that you see below (notice this is similar to an ordered list <ol>or an unordered list <ul> where you have the tags that indicate where the list starts and stops and then list items <li> in between)

<select>
<option></option>
<option></option>
</select>

3. Now fill in the information for some concerts (you can use your own concert names and dates, if you like). Notice each option has a value attribute and text in between the opening and closing tags. You'll learn about the value attribute later:

<option value="Herbie Hancock: June 18, 2008">Herbie Hancock</option>
<option value="Nine Inch Nails: July 26, 2008">Nine Inch Nails</option>
<option value="Eddie Izzard: July 11, 2008">Eddie Izzard</option>
<option value="Foo Fighters: July 09, 2008">Foo Fighters</option>

In a browser, this drop-down box will look something like this:

Now you will add a text box - which is an empty box that a user can type into, and a button. Both are created with the
<input /> tag which is a self-closing tag (notice the space and slash at the end that closes it). The "type" attribute determines whether the input item is a button or text box.

4. Type these lines after the drop-down box code, but before the ending form tag </form>:

<input type="text" size="30" />

<input type="button" value="print ticket" />

The "size" attribute of the text box determines its length. The "value" attribute of the button determines the text that will appear on the button. When you look at them in your browser, they will look something like this: and this: .

5. Now make them look nice on the page by putting line breaks between them (<br />), and adding some text so the user knows what they are for (for example, you might type "Choose a concert" before the drop-down list and "Enter your name here" before the text box).

6. Answer questions #4 on the Catalyst quiz

Next...

previous page next page