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.
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:email@example.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:
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:
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.
[an error occurred while processing this directive]