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.
Bit of History
A good scientist is a person with original ideas. A good engineer is a person who makes a design that works with as few original ideas as possible. There are no prima donnas in engineering.
—Freeman Dyson (b. 1923)
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.
We strive to provide
only high quality articles on our website. If
there is a specific angle on design that you would like us to cover, please contact us here.
Please note: All personal opinions expressed in the "The Basics of Web Forms" article belong to the contributing author and are not necessarily shared by WebDesignConferencing.com.
Why You Should Stick to Design Conventions By Walter Robertson Why You Should Stick to Design Conventions. A mistake often made by people who are new to web design is thinking that they shouldn't pay any attention to what has come before: they're going to design a website the way they think one should work....
Identity Theft via Internet Security Flaws By Leba Jacobs In 2002, federal investigators helped to crack an identity theft ring that had been going for almost three years. More than thirty thousand victims were involved in the problem....
Power up Education Through Video Conferencing By Allan Levine As the cost of video capture, display technology, and high speed Internet connectivity has been commonly made available at an affordable cost, special videoconferencing has emerged. This genre of videoconferencing was based on simple systems of web cameras, personal computers, software compression and broadband connection....
SEO Tips for Google By Olga M. Johnson SEO Tips for Google. Google is still the most popular search engine out there, and they're not showing any signs of slowing down....
Five Great Home Products From Bluetooth By Linda Underwood Many people now have the option to work from home. This is a convenient way to earn a living while being available for children, or to save money that would be spent on commuting....
Reduce Communication Costs through Web Conferencing By Ainsley J. Holmes As an innovation, web conferencing has certainly proven its worth in various aspects of both business and ordinary life. Through its innate capacity to literally connect and bind the whole world within a virtual global network, it is certain that this alternative means of communicating is most certainly efficient in every sense of the word....
