Sams Teach Yourself JavaScript in 24 Hours

The Basics of HTML Forms

Forms are among the most useful features of the HTML language. As you'll learn during this hour, adding JavaScript to forms can make them more interactive and provide a number of useful features. The first step in creating an interactive form is to create the HTML form itself.

Defining a Form

An HTML form begins with the <form> tag. This tag indicates that a form is beginning, and it enables form elements to be used. The <form> tag includes several attributes:

• name is simply a name for the form. You can use forms without giving them names, but you'll need to assign a name to a form in order to easily use it with JavaScript.

• method is either GET or POST; these are the two ways the data can be sent to the server.

• action is the CGI script that the form data will be sent to when submitted. You can also use the mailto: action to send the form's results to an email address, as described later in this hour.

• enctype is the MIME type the form's data will be encoded with. This is usually not necessary; see the "Sending Form Results by Email" section of this hour for an example that requires it.

For example, here is a <form> tag for a form named Order. This form uses the GET method and sends its data to a CGI script called order.cgi in the same directory as the web page itself:

<form name="Order" method="GET" action="order.cgi">

For a form that will be processed entirely by JavaScript (such as a calculator or an interactive game), the method and action attributes are not needed. You can use a simple <form> tag that names the form:

<form name="calcform">

The <form> tag is followed by one or more form elements. These are the data fields in the form, such as text fields, buttons, and check boxes. In the next section, you'll learn how JavaScript assigns objects to each of the form elements.