Forms

The trend for search boxes these days has been bigger and bolder. This tutorial shows how to create a slick, well engineered full screen search form that works beautifully across all modern browsers and devices.

This script uses iframe loading techniques to create a fast and reliable way of pulling suggestions for your input search boxes. The script consists of a js file that contains core functionality, a css file for styles, and two images which indicate the application's current state and provide additional functionality. The suggestions can be customized to be anything you want and instructions on how to do this are also included. Additional functionality includes matching whole phrases and capitalizing the suggestions on the dropdown.

This article demonstrates you how to count characters in an input field on your html page using simple JavaScript code.

Here's a useful jQuery snippet that clears the default values of form fields on focus and refills them if no text is entered. It uses the attribute called defaultValue which stores the original value of a form field.

Creating a WYSIWYG textbox for your website is actually quite simple. Thanks to the html iframe component that contains the execCommand function, which enables us to access html tags in real time.

Sometimes it is necessary to set the focus to the first available form control. The problem is that complex web pages can contain multiple forms and each form individually can contain hidden or disabled elements and controls that cannot accept focus. In this tutorial we will create a function which iterates through all forms until it finds the first available form control.

Any interactive web site has form input. If you run a validation of the user's form input before the form is submitted, there will be no wait time and redundant load on the server. "Bad data" are already filtered out when input is passed to the server-based program. It also allows to simplify server-based program. Client side form validation usually done with javascript. For the majority of your users, JavaScript form validation will save a lot of time up front.

Here you have an example of how you can display and limit the number of characters an user can insert into an input or a textarea field.

This tutorial explains how to change a select element's content using JavaScript, from adding new options to modifying and deleting them. It also shows how to create a 2 level interdependent select list.

One of the big questions people have is how they can pass values from fields to others fields.

Complete listing of the Form object of JavaScript and its properties/methods. Also includes additional pages describing objects beneath Form, such as TEXTAREA, SELECT etc.

This tutorial shows you how to use JavaScript to dynamically enable and disable form elements, making the process of filling out forms more intuitive.

Javascript code that automatically fills in the address in all places needed on the page after just once entering it and selecting the check box.

For various web scripts it is more convenient that user will see form executed in new window when he is pressing the submit button. Using JavaScript you can control the appearance of that window. change size, turn off navigation panel, hide manubar and so on. This technique is very helpful for poll and guestbook applications.

Got a submissions form that you keep getting multiple submissions from? I've found that in most cases its because people are impatient and click the submit button repeatedly until they get a response. The unfortunate result is that you receive multiple copies of the same form. This little bit of JavaScript disables the submit button as soon as it is clicked for the first time and prevents the user sending their form multiple times. Script now also changes the text on the button to 'Thanks' (this can be modified to suit)

In forms when using text boxes or text areas with limited character length (usually needed for forms that submit data to a database) it is always a good idea to tell the user how many characters they have remaining. The following example shows how you can do this. This is a very simple and cute idea to help the user know exactly how many characters he can type further. Do these small add-ons to your forms and they will look really professional. This snippet is cross browser compliant - tested in IE, Opera, FireFox, Netscape & Safari

In forms when using text boxes or text areas and check boxes you might need a reset button that is not the usual gray HTML button. For this you can use a small JavaScript function as given below. Note: This button will reset only text boxes,text areas and check boxes as list boxes and option buttons don't usually require resetting. After resetting the form the cursor will set the focus to the first field in the form.

A tutorial on how to script forms with JavaScript. Covers different event handlers for common form elements. This is an excerpt of "Beginning JavaScript" from Wrox Press.

This tutorial shows you how to perform form-field validation and user interaction with a few lines of JavaScript.

This articles discusses two aspects of JavaScript: working with HTML forms and manipulating frames. It also present a simple but effective personalized greeting script and a script used for submitting and HTML form. Main topics covered: Personalized greetings, Submitting an HTML form using JavaScript, Input Validation, and Frames and JavaScript.