Here is a simple form:
<form id="" action="" method="post">
<label for="first">First name</label>
<input type="text" name="first" id="first"><br />
<label for="family">Family name</label>
<input type="text" name="family" id="family"><br />
<input type="submit" name="personal">
Here's an explanation -
- The name of the form or control.
- The URL of a server-side script which can process the data.
- The method used to send the information. Two methods are supported, POST and GET. POST is the preferred method except for simple searches which generally use GET. Use with server-side languages.
- Form controls are normally contained in a fieldset element. Complex forms may have multiple fieldsets. Fieldsets can contain other fieldsets.
- Each fieldset begins with a legend element. The content of the element is used as a title placed in the border of the fieldset.
- label for=""
- A label for is a single form control. The value of the for attribute must match the id attribute of a form control in the same form.
- input type="" name ="" id=""
- various types of input controls. Supported types are - submit, text, password, checkbox, radio, reset, file, hidden, image and button. The name attribute is used by the server to identify which piece of data was entered in a given box on the form. The id attribute is used to match an input with its label. The name and id attributes normally have identical values for text inputs but different values for checkbox and radio inputs.
- There is also a SELECT element for drop down lists and a TEXTAREA element for multi-line text input.
This simple example uses <br /> tags to force newlines between the different controls. A real-world form would use more structured markup to layout the controls neatly.
Formatting with CSS
The HTML for this form is amazingly simple and you do not have to create hundreds of divs all aligned left and right; this will cause a lot of frustration and a lot of debugging as various browsers still interpret CSS code differently.
<input id="name" name="name"><br />
<input id="address" name="address">
The CSS for this code is a little bit more interesting:
Let's explain the code
The CSS for the label has four sections to it:
- float: the float command is used to establish that the label is floated to the left hand side of the form
- width: this defines how big the label must be, keeping all the labels at a fixed width keeps everything in a nice ordered line.
- display: the element will be displayed as a block-level element, with a line break before and after the element
- margin-bottom: by adding a margin to the bottom of this label it insures that labels are positioned nicely one under another with a nice padding between each
- width: again this is to define a fixed width giving everything a nice defined unity.
- Text-align: align the text right keeps everything away from the left aigned labels again keeping things in unison.
- Padding-right: this means that there is a nice padding on the right keeping things once again fine tuned.
- clear: this is the most important part without the clear:left nothing will align properly this basically makes everything within each element sequence align underneath each other and to the left.
For more details, see the HyperText Markup Language/Tag List/form section of this book.
For a nice and comprehensive reference on forms, see the official W3 Technical Recommendation for forms.