Web Design Wikiclass | Lecture / Web Forms

A Web Design Lecture by Steven Choy

Overview: What is web forms - How forms work - Basic form elements - Error checking - Online form design tips

What are web forms?

Online forms are a way for users to send information to the web server.
They are very similar to the printed forms you have to fill out when you set up a bank account or apply for a job.
Forms play an important role in web-based applications.
Your users will send you the information on the web form once they've filled it in.
You can then do lots of different thing with the information you receive from a web form.
- Add the information to a database
- Email it to your comany staff
- Accept money from the customer's credit card
See the following website for an overview of online forms:
- HTML Form Gallery by the Wufoo - http://wufoo.com/gallery/templates/

How forms work

How a web form looks like in HTML code

<fieldset><legend>Contact Us</legend>

 <form action="FormToEmail.php" method="post">

  <label>Name</label><br/>

  <input type="text" class="text" name="name"/><br/>

  <label>Email</label><br/>

  <input type="text" class="text" name="email"/><br/>

  <label>Address</label><br/>

  <input type="text" class="text" name="address"/><br/>

  <label>Message</label><br/>

  <textarea name="message"></textarea><br/>

  <input type="submit" value="send" />

 </form>

</fieldset>

[Get Code]

Important attributes of <form>: action and method
How a web form looks like in a browser screen

When a user click the submit button, the browser send the information to a computer program on the web server.
- Example:

      name=Steven+Choy&email=steven@stepwise.hk&address=123+King+Road&message=This+is+a+test+message

The program can do many different things.
- Can you list some of those possible processing jobs on the server side? (class discussion)
How does a program obtain the information?
- Example code segment in PHP

        $name = $_REQUEST['name'];
        $email = $_REQUEST['email'];
        $address = $_REQUEST['address'];
        $message = $_REQUEST['message'];

Basic form elements

(Source: http://www.phpform.org/)

Basic reference: http://www.w3schools.com/html/html_forms.asp
Single line text (text field)

      <form>
      First name:
      <input type="text" name="firstname" />
      <br />
      Last name:
      <input type="text" name="lastname" />
      </form>

What the server-side program will receive?

      firstname=xxx&lastname=yyy

Paragraph text (text areas)

      <textarea name="comment" rows="60" cols="20"></textarea>

What the server-side program will receive?

      Comment=xxx

Radio buttons

      <form>
      <input type="radio" name="sex" value="male" /> Male
      <br />
      <input type="radio" name="sex" value="female" /> Female
      </form>

What the server-side program will receive?

      sex=male, or
      sex=female

Check boxes

      <form>
      I have a bike:
      <input type="checkbox" name="bike" value="1" />
      <br />
      I have a car:
      <input type="checkbox" name="car" value="1" />
      <br />
      I have an airplane:
      <input type="checkbox" name="airplane" value="1" />
      </form>

What the server-side program will receive?

      bike=1, and/or
      car=1, and/or
      airplane=1

Select boxes (drop downs)

      <select name="fruit">
        <option value="apples">Apples</option>
        <option value="bananas" selected>Bananas</option>
        <option value="cherries">Cherries</option>
      </select>

What the server-side program will receive?

      fruit=apples, or
      fruit=bananas, or
      fruit=cherries

Submit buttons

      <form name="input" action="html_form_submit.asp" method="get">
      Username:
      <input type="text" name="user" />
      <input type="submit" value="Submit" />
      </form>

What the server-side program will receive?

If there is no name attribute for the input submit type, no value will be sent to the server.

If there is a name attribute for the input submit type, name=value will be sent to the server.

What other types of things you can sumbit to the server via the Web form?
Hidden field

      <input type="hidden" name="Language" value="English">

      <input type="hidden" name="comment_post_ID" value="30" />

A hidden field is similar to a text field, but it does not show on the Web page. Therefore the user can't type anything into a hidden field. It is used to submit information that is not entered by the visitor.

Form Field Label

In Web form, the LABEL element is used to associated a label with an input element.

The form field labels are important for assessibility of Web forms.

Let's create a Web form and see its HTML code.
- pForm - http://www.phpform.org/
A simple contact form example:

http://css-tricks.com/examples/NiceSimpleContactForm/

Class discussion: What is the advantage of adding a contact form (vs. giving a contact email) for a website?

Error checking / Input Validation

Using JavaScript

Advantage: the work of input validation is offloaded from the Web server to the client (users' computer)

Disadvantage: the input validation can be bypassed by users

Using a server-side program

Advantage: your visitors do not need JavaScript

Disadvantage: it is slower

Which method shoud you use?

Many sites use both JavaScript and server-side errer checking, as it is quickly for the majority of visitors with JavaScript, but still works for those who don't have it.

Some online form design tips

Forms are the main way people interact with a website. In order for your site to achieve your business goals, it is important your forms are easy to use.

Keep the number of fields to a minimum
Select required fields carefully
Be flexible
Split long forms into separate sections
Have a page count
Use plain English in your error messages
Get real people to test your forms

Reading and Resources for you to explore more

There are a number of resources available that have been created to make it easier for designers, developers, and website owners to quickly and easily create attractive, usable forms without the need to code. In this post we’ll look at some of the best options available.

pForm - http://www.phpform.org/

Free HTML Form Builder - Create Web Form Template Online

Web Form Factory - http://www.webformfactory.com/

Forms aren’t there just to look pretty, they need to work. There are two primary functions a web form can have: to interface with a database or to generate an email. Web Form Factory is an open source service which takes your form and generates the code needed to make it do what it needs to do.

phpFormGenerator - http://phpformgen.sourceforge.net/

phpFormGenerator is an easy, online tool for creating reliable, efficient, and aesthetically pleasing web forms in a snap. No programming of any sort is required: phpFormGenerator generates the HTML code, the form processor code (PHP), and the field validation code automatically via an easy, point-and-click interface.

FormToEmail - http://formtoemail.com/

FormToEmail is a form processor (form mail) script written in PHP. It comes in a free version and a Pro version. It processes web forms. It sends the contents of web forms by email. It will process any form. It doesn't make forms, it processes them. It comes with HTML code for a basic contact form that you can use on your website. It is very secure and cannot be hijacked by spammers. It is very simple to install, you only need to add your email address to it. Step-by-step instructions written in plain English.

wForms - http://www.formassembly.com/wForms/

wForms is an open-source, unobtrusive javascript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.

Online Form Business

http://www3.formassembly.com/pricing.php

http://wufoo.com/signup/

http://jotform.com/premium?banner=nav

Thanks for Reading

If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.

If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.