JavaScript Tutorial JavaScript Examples JQuery Tutorial CSS Tutorial HTML Tutorial About Us

Lesson 18: Creating Forms Part 4

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. THe size attribute determine the number of items that are shown to the user. A sample HTML code is illustrated below:

<p>Please select one item from the list:</p>
<form name="book" action="" method="GET">

<select size="4">
<option>Art and Drawing
<option>Best Sellers
<option>Business & Investment
<option>Children Books
<option selected>Computer & Internet
<option>Health & Fitness
<option>Horror & Thriller
<option>Non Fiction
<option>Science & Nature
<option>Science Fiction
<option>Self Improvement
<option>Sports & Games
<option>Young Readers' Corner
<input Value="OK"><

Please select one item from the list and click OK.

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:

Apple Orange Banana Grape
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:

❮ Previous Lesson Next Lesson ❯

Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy