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.
- 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:
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.
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).
textarea: Good for longer responses, like "please describe in detail what you are looking for in an insurance policy."
checkbox: A yes or no answer. It can have the attribute 'checked' which is relatively simple: either it is checked or not 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):
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:
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: