HTML Web Forms

Created Tuesday, 27 November 2012 01:07 Last Modified Sunday, 16 June 2013 13:17

Forms are used for a lot of applications on the internet. There are simple contact forms, forms that you can use as part of an advanced search, forms that can take on the function of a survey, forms that can submit credit card data to a payment processor, and many, many other boring examples of forms.

What is a <form>?

A form is a section of your web page which contains elements called controls. There are many types of controls: textfields, text areas, checkboxes, radio buttons, select lists, and more. Usually these controls will have labels. Controls allow a user to enter data to fill out the form.

Forms also contain buttons. These buttons will usually have events tied to them that do something with the data: they may cause the data to post to the server, or they may cancel a request and go back to a previous page, or they may actually clear the data the user has already entered.

What do <form>s look like in HTML?

We'll go piece by piece through a form and show you what it's made of. First, forms contain a <form> tag. This tag has a number of special attributes:

The action is the thing that processes the data submitted by the form. Typically it is a file or a function. This does not have to be located on the same server as the website itself - many credit card processing forms actually go directly to a third party website.
The method is the protocol (either GET or POST) that is used to process the data. POST sends data to the processor specified by the action attribute, GET uses the data submitted to retrieve data using the processor.
It is good practice to give your form a name to distinguish it from other forms. On complex websites it is normal to have multiple forms per page, and naming the forms makes it easy to keep them identifiable.
This is a javascript command that can do something once a form is submitted. For example, you may want to run a function once the user submits that displays a little twirly image along with some text that tells your visitor that the form is being submitted.
id & class
Just like many other html elements, forms can be given css properties by using the id and class attributes.

So, all that probably sounds about as interesting as a stale cucumber sandwich (unless you're me, in which case it's riveting pulp fiction). Let's get down to what all that mumbo jumbo looks like in the code:

<form action="page_on_server.php" method="post" name="sample_form" onsubmit="do something" id="sample_form" class="typical_form">
<h2>A all put together</h2>

    <!--...controls inside the form, and submit buttons...-->


Somewhat simple, huh? Even though you may not be able to understand yet exactly what actions do and what methods are, you at least know what one of these looks like in the wild. Now let's get down to some of the controls.

<input> controls

There are a lot of input controls. Input controls can have a lot of different attributes, for a full list, see here. The main ones we'll worry about are type, which quite simply tells us what type of input control it is (pretty self explanatory), and also 'value', which can be quite important at times (especially in radio controls). Some examples of type are:

text: Good for small, one line responses (for example, things like names, phone numbers, and cities).

<label>Location of last alien abduction: </label><input type="text" name="first_name">

textarea: Good for longer responses, like "please describe in detail what you are looking for in an insurance policy."

<label>Please describe, in detail, what happened during your last alien abduction: </label><input type="text" name="crazy_story">

checkbox: A yes or no answer. It can have the attribute 'checked' which is relatively simple: either it is checked or not checked.

<label>Were you probed? </label><input type="checkbox" name="probed" checked="checked">

radio: Good for questions with more than one possible answer. You can create a radio group by using the same 'name' attribute with square brackets following the name(like this: []) for multiple radio controls. You can also use the 'checked' attribute to pre-select an answer. Note that you can use 'value' here to differentiate between the options (the value attribute is what would actually be sent when the form is submitted):

<input type="radio" name="feeling[]" checked="checked" value="happy"><label>Happy: </label>
<input type="radio" name="feeling[]" value="sad"><label>Sad: </label>
<input type="radio" name="feeling[]" value="whatever"><label>Whatever: </label>

<select> controls

Select controls (or select lists) are good for when you want to define a large set of options (for example, a list of states or countries - it would be impractical to have these types of data as radio groups). A select control consists of an outer select tag which will surround multiple option tags. Please note that the option tags have 'value' attributes, and that they can also have 'selected' attributes:

<select name="state">
   <option value="MO" selected="selected">Missouri</option>
   <option value="IL">Illinois</option>
   <option value="KS">Kansas</option>
   <option value="NE">Nebraska</option>


Like many other form controls, a button should have a 'type' and a 'value'. For many buttons, the 'type' will simply be 'submit'. In fact, for most of the forms that most of you will be creating in this class, that's the only type you should worry about. Worry about others at your own risk. A button usually looks something like this:

<button type="submit" value="submit">Submit</button>

A <form> all put together:

<form action="page_on_server.php" method="post" name="sample_form" onsubmit="do something" id="sample_form" class="typical_form">
    <label>Name: </label><input type="text" name="name">
    <label>Email address:</label><input type="text" name="email">
    <label>Message:</label><input type="textarea" name="message">
    <button type="submit" value="submit">Submit</button>
Web Analytics