SHARE

HTML Forms: From Basics to Style–Getting Started

Written By

May 11, 2010

5 minute read

Forms are a staple of web sites. Almost every web site has one or more forms. Forms can be as simple as a “contact us” form or as complex as an order entry form. There are numerous ways to create forms. But how do you create forms? How do you make them look nice? How do you make them accessible? How do you make them easy to use? These are some of the many questions asked when first starting to create forms. In this series of articles, we hope to answer those questions and many more.

So what are forms and how do they work? HTML forms are nothing more than a collection of "input" boxes with a submit button. That is the simplest way to explain it. Of course, forms are a little more complex than that. Figure 1 shows an example of a login form.

Figure 1

This login form asks for two inputs: username and password. There is also a submit button. What happens when the user click this button? The user agent or browser sends the form data to the URL contained in the form’s "action" attribute. The action is performed by taking the input elements and performing the logic. We will not be discussing actions in these articles since there are many ways to performance actions depending on the programming language you are using.

There are several HTML elements designed just for forms. Some elements are designed for the layout and grouping of the form fields, while others are designed for input from the user. Let’s explore some of these HTML elements.

The FORM Element

Syntax: 
<form action="url to submit form data" 
accept="MIME Type" accept-charset="character set" 
enctype="text/plain| application/x-www-form-urlencoded|multipart/form-data" method="get|post">
</form>

All forms begin with a

HTML tag. All form specific HTML tags are placed in between the opening and closing

HTML tags. You can have multiple tags on the page. Each tag can have a different action.

The ACTION Attribute

The "action" attribute is the only required attribute and specifies what URL to use to send the form data. When the user clicks a button on the form, the action is invoked. There can only be one action for the form. You can have multiple buttons on a form that would perform different actions, but they would all still submit to the same URL. Multiple buttons will be discussed in detail later.

The ACCEPT Attribute

The "accept" attribute allows you to specify what types of files a user can submit through the file upload. Forms can collect user input from form fields and may also accept files to upload. The accept attribute limits the file types. This attribute is optional and if it is not specified, any file type may be uploaded.

The values for the accept attribute are specified by "MIME_type" values. MIME type is sometimes referred to content type. Examples of these values are: text/plain, text/html, image/png, and image/gif. You can specify more than one MIME type by separating them by commas. The accept attribute is only used if the form contains an tag with a type set to "file".

The browser may look at the MIME types and filter the list of files in the upload dialog box accordingly. This is a function the browser must support. What does that mean? It means that a user could select an image even though the attribute is set to accept only HTML files. Why is that? Well, MIME type is controlled by the operating system and since different operating systems handle MIME types differently, the browser must be able to understand that.

The ACCEPT-CHARSET Attribute

The "accept-charset" attribute is the list of character sets the server can use for the form data. This attribute is optional, but it can help to limit forms to a certain character sets. The character sets are separated by either a space or a comma. Examples of these values are: ISO-8859-1, ISO-8859-2, etc.

Why would you use this? Let’s say you have a form that will route depending on a keyword that is entered in one of the form fields. If a user enters Kanji (Japanese) characters, the form processor might not handle it properly. Of course, you should make sure the form processor can handle problems like this, but still, you might not have control over that so you can limit this using this attribute.

The ENCTYPE Attribute

The "enctype" attribute specifies the encoding used to encode the form data before it is sent to the server. There are two values: application/x-www-form-urlencoded and multipart/form-data. There can only be one encoding type per form.

When the method of the form is set to "post", the encoding is set to "application/x-www-form-urlencoded". This is done by default so you do not need to specify the encoding type. What this does is convert some values to escaped values. Spaces will be replaced by a "+" and reserved characters will be converted to a percent sign and two hexadecimal digits representing the ASCII code of the character.

The METHOD Attribute

The "method" attribute tells the form’s action what to do. This is also referred as the HTTP method. There are two methods used: get and post. The get method appends the form data to the URL specified in the action attribute and the form is sent to the form processor. The form data is appended using the question mark ("?") and the data is separated by ampersands ("&"). In figure 2, you will see the form HTML and below that is the URL that is generated when the form is submitted. You will also notice that the name of the input control is also included. The post method includes the form data in the body of the form and is sent to the form processor.

Figure 2

The attributes above are form only attributes. The form HTML tag also supports many of the standard HTML attributes like id, lang, style, and title. It also supports client-side style attributes like onsubmit, onreset, onclick, etc.