Whenever you want people to enter data and send it to you, you
need a web form. Whether the data is as simple as a username and
password or as complicated as a full address form, the basic
principles remain the same.
The Tags
Form tags have always been a troublesome part of HTML, simply
because they're not often used and require you to memorise a lot
of words, depending on what kind of input boxes you want on your
form.
To set up a form, you need to have a form tag with a method and
an action, like this:
These properties aren't very well-named, but they basically tell
the browser where and how you want things that are entered on
the form to be sent. The file named in action should be a script
that is prepared to do something with the data from your form,
such as entering it into a database. It's worth knowing that you
can make use odd things like "mailto:youremail@address.com" as
the action (that one submits by email), although it's not
recommended.
Once you've got that, the next step is to put input tags between
the form tags. There are lots of different kinds of input tags,
and you say which kinds you want using the 'type' property. For
example:
one
This is a checkbox (the boxes you can tick). The name property
lets you give the checkbox a name so you can refer to it your
scripts later on. The text between the tags ('one') is what
appears next to the tick box.
Other input types include:
text - a text box. radio - a set of options where only one can
be chosen. button - a clickable button. file - a box that allows
someone to upload a file to your site. submit - a special kind
of button that sends the result of the form to the server. reset
- a button that clears everything a user has entered in the
form, so they can start over.
Web Forms and CSS
Those forms you just made, however, aren't going to be pretty:
they'll be displayed in only the most basic style, one after the
other and surrounded by ugly boxes. Luckily, it's simple to add
some styling using CSS in exactly the same way as you would add
it to normal text. You can change the boxes' background-color,
font (font-family), remove the borders, and so on.
You might also like to make use of the various CSS 'events',
such as the hover event. Take a look at this example CSS:
input:hover { background-color: yellow; }
It makes the input box go yellow when the user hovers over it -
combine that with a bit of Javascript that automatically moves
the typing cursor into input boxes that the user hovers over,
and you've got an easier to use form right away. Try as much as
you can to make your input boxes look and behave like ones you
like in software you find easy to use, and you won't go far
wrong.
Validating Input
Once the user has typed something in, you need to validate it -
that is, check it makes sense. If they're supposed to be filling
in an email address, there needs to be an @ in there somewhere.
If they've chosen a username, you need to make sure it's not
already been taken by someone else. That kind of thing.
There are two ways of validating input: client-side and
server-side. To put it simply, client-side validation is done by
Javascript, and is purely there for the user's convenience, so
they don't have to submit a form only to find out it was wrong.
Server-side validation will be done with a language like PHP,
and is the final check before the data gets written to a
database - if it's wrong at that point, you have to throw the
user an error page and ask them to re-enter the relevant piece
of information.
It's very important that you don't leave vital checking purely
up to the Javascript, as some of your visitors may have
Javascript turned off, or may even turn it off deliberately to
get around your checks. The last thing you want is people being
able to fill your database with bad information.