From a webpage designers point of view, drop-down lists require a lot of html tags. Wouldn't it be nice if you could just let the user drag-and-drop text into a simple text box. You can!
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Replace Drop-down with Drag-and-drop

We are all familiar with drop-down lists. From a webpage designers point of view, they require a lot of html tags. When used in a form that is submitted to the server, it's a bit complicated to extract data from a drop-down list. Wouldn't it be nice if you could just let the user drag-and-drop text into a simple text box. You can!

In this article, I'll show you how to replace a drop-down list with a simple text box. I'll also show you how to test your server-side form processing code with client-side simulation. And for an extra kicker, I'll throw in a dieting tip!

Shown below is the html code for a simple form with a text box and a submit button.

<form method="get">
<input type="text" name="text"><br>
<input type="submit" value="Submit">
</form>

As simple as this code is, it's actually twice as complicated as it needs to be. For example, in the form tag you don't actually need the method="get" attribute because "get" is the default submission method. It means the submitted data will be tacked on to the end of the URL. In the text box tag you don't actually need the name="text" attribute because you only have that one input element.

- If you design a form with more than one input element, you will need to provide each one with a name attribute so they can be identified at the server end.

The attribute value="Submit" in the submit tag defines the name for the submit button. You don't actually need value="Submit" attribute because the browser will provide a default name. In Internet Explorer, the default name will be "Submit Query". So you see, the code for a simple form that I have provided is actually twice as complicated as it needs to be.

Shown below is an example of a list of items that the user can drag-and-drop into the text box.

 
Gardening
Hiking
Housecleaning
Jogging
Shopping
Walking

We don't need all the tags required to make this into a drop down list. All we need is simple text on the webpage for the user to select and drag to the text box. Okay, if we want to make our webpage look neater we might put the list and the text box inside a table. The code for that is shown below.

<table cellpadding=6><tr><td>
Gardening<br>
Hiking<br>
Housecleaning<br>
Jogging<br>
Shopping<br>
Walking
</td><td>
<form method="get">
<input type="text" name="text"><br>
<input type="submit" value="Submit">
</form>
</td></tr></table>

A form can be processed at either the client side or the server side. There are many articles that show you how to do this. So in this article, I'm going to show you something a little different. I'll also show you how to test your server-side form processing code with client-side simulation.

With client-side processing, you would use DHTML on the webpage so that the form's data doesn't get sent back to the server. With server-side form processing, the form's data is sent back to the server by either the "post" method, where it's sent in the header, or by the "get" method where it's attached to the end of the URL.

At the server-side, you can use the same code for either submission method, so it's very common for programmers to use the "get" method for debugging, which allows them to see the form's data in the URL, and then switch to the "post" method for production in order to hide the form's data from the user.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268