Chapter 10: HTML Forms

HTML forms are the primary way in which online commerce occurs. Without forms for customer input (mailing address, credit card information, etc.), there will not be such a bustling online industry. The HTML form is the interface in which readers enter data, but this is only the input. The data needs to be processed on the web server using applications or in the Common Gateway Interface (CGI). The CGI is the “communication bridge” between the web server and the internet. The CGI collects data sent by the user through HTTP (Hypertext Transfer Protocol, the web browser, basically), using computer programs called scripts. It then transfers the data to a variety of data-processing programs that are running on the server. It can work on the data and then send back confirmation (or any other type of information) to the CGI that in turns sends it to the original sender.

JavaScript is a client-side scripting language, which means it runs on the user’s computer and not the server. JavaScript can enhance your site’s usability with beneficial programming functions, such as checking to ensure all entries are accurate before submitting. This language is the most commonly used scripting language for HTML forms.

Using the <form> Element

<form> is the container element that will create forms in HTML. This element has the following attributes: action, enctype, method, accept, and accept-charset. The two attributes to remember are:

  1. action: the URL of the application that processes the form data; this URL points to a script file or an email address
  2. method: specifies the HTTP method used to submit the form data; the default value is “get”
    1. get – the form data is appended to the URL specified in the action attribute
    2. post – the form data is sent to the server as a separate message

Creating Input Objects

The <input> element defines many of the form input object types. You use the type attribute to specify the object type. Type attributes include: text, password, checkbox, radio, submit, reset, hidden, image, button, and file. “Text” is the default object type.

The <label> element allows you to put a caption to the input object. For example, you have a text input object. You might want to describe what you are expecting your readers to type in, so you can say “First name” to the left of the input box and people will know to type in their first names. The code may look like this:


<label class=”username”>First Name:</label>

<input type=”text” name=”firstname”

size=”35” maxlength=”35”/>


There is so much more detail to creating a form than I really want to take notes on. I’ll frequent my textbook the next time I need to create a form…


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s