HTML Tutorial Lesson 18: Setting up Forms Part 4


[Lesson 17]<<[Contents]>>[Lesson 19]

In this lesson, we shall continue to discuss setting up more form’s controls in HTML . The form’s controls we shall examine here are Drop-down box, image button and file upload.

18.1 The Drop-down Box

A drop-down box on a web page allows the user to select one item from a drop-down list. The HTML elements to create a drop-down box are select and option. The HTML for creating a drop-down box starts with an open tag <select> and a close tag </select>. The option tags are inserted between the select tag for displaying the options. A sample HTML code is illustrated below:

<p>Please select one item from the list:</p>

<form  action=”/index.php/contact-us/” method=”post”><select name=”myList”>
<option value=”Science Fiction”>Science Fiction</option>
<option value=”Thriller”>Thriller</option>
<option value=”Love Story”>Love Story</option>
<option value=”Biography”>Biography</option>


Please select one item from the list:

If we want to display more than one item in the drop-down list, we use the size attribute. A sample HTML code is shown below:

18.2 The Image Submit Button

We have learned how to send data entered by the user to the server using the submit button. In this lesson, we shall learn how to use an image button to replace a simple submit button. For example,you are selling something on the web and you want the user finish with a buy or order button instead of a simple submit button.Below is an example:

<form  action=”/index.php/contact-us/” method=”post”>

<input checked=”checked” name=”fruits” type=”checkbox” value=”apple”/> Apple
<input name=”fruits” type=”checkbox” value=”orange” />Orange
<input name=”fruits” type=”checkbox” value=”banana” />Banana
<input name=”fruits” type=”checkbox” value=”grape” />Grape
<input type=”image” src=”” alt=”Submit”>

Please select the items below and then place your order:


18.3 The File Upload button

The file upload button allows the user to select a file from the folder of his local drive to upload to the server. The attribute is type and its value is file. The sample code is shown below:

<p>Select a file and upload: </p>
<form action=”/index.php/contact-us/” method=”post”>

<input type=”file” name=”MyFile”/>
<input type=”submit” Value=”submit the File”/>

Select a file and upload:

[Lesson 17]<<[Contents]>>>>[Lesson 19]