#28449
This worked example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.
Hunt, Ben. Web Design From Scratch (2006). Design>Web Design>DHTML>Forms
#27293
This approach uses Dynamic HTML (DHTML), which has several benefits over using IFRAMES to make life a bit easier for the users of your site. First, DHTML allows for more flexible formatting than IFRAMEs permit. You can apply background images, borders, fonts, and all the other features you’ve learned to expect from HTML and Cascading Style Sheets to DHTML objects. In contrast, IFRAMES have almost no configurable features. Second, if someone fills out one form, switches to another, then switches back, there’s a good chance that the browser will lose the information that was initially entered. This problem doesn’t exist in the DHTML solution. Third, with DHTML you can do tricky things like clipping and moving the form around the page. You could do these things by combining IFRAMES and DHTML, but you might as well just use DHTML in the first place.
Apple Inc. (2006). Design>Web Design>Forms>DHTML
#27299
Any sort of interactive site is going to have form inputs — a place where your users input who they are, what they want to buy, where they live, and so forth. This data is passed to whatever handles your back end — a Perl CGI script, a PHP engine, a database like Oracle, or some other technology you’ve invested in. Whatever system is back there, you can bet that it doesn’t appreciate having its time wasted with bogus information, and chances are the user doesn’t appreciate it either. If the data the user submits to the CGI contains an error, there will be a noticeable lag — typically several seconds — before the information travels over the Internet to the server, is examined on the server, and then returns to the user along with an irritating error message. If you run a little preliminary validation of the user’s form input before the form is submitted, there will be no wait time. Client-side validation is instantaneous because it doesn’t have to transmit any data. JavaScript catches any erroneous data the user enters before it goes anywhere.
Apple Inc. (2006). Design>Web Design>Forms>DHTML
#27302
This script uses dynamic HTML (DHTML) to pop open a box with info in it when you click on a link. In my demo I’ve used this to pop up contextual help about filling in a form. It could also be used, for example, to give pop-up definitions for terms in an article. In both cases, it makes sense to give the information in context, modelessly. Likewise, this solution avoids the problems of statelessness and latency.
Apple Inc. (2006). Design>Web Design>Forms>DHTML
#27619
Interactive Forms with Javascript / HTML Tutorial
One of the most important aspects of web design is getting information from the viewer to the webmaster. This is where HTML forms are used. If you have been on the internet, you have seen forms before. Google uses them for search queries, Amazon uses them for shipping and credit card information, your bank uses them for you to login. Almost every site on the web has a type of form somewhere. We can't live without forms. How about changing the forms based on input by the viewer? This is where interactive forms using Javascript and HTML can help.
Zimmer, Brian. Zimmertech.com (2001). Design>Web Design>Forms>DHTML
#28450
This worked example applies styling and functionality to a basic grid of data to produce a simple form control that's a pleasure to use.
Hunt, Ben. Web Design From Scratch (2006). Design>Web Design>DHTML>Forms
