XHTML Forms
I don't doubt that you have all encountered and used online forms before now. The Google search engine (and others) uses a simple form for search term entry.
Forms are created using the <form> element. Forms can contain text fields (where a user can enter text), checkboxes, radio buttons and pick lists. They are used to gather information from a user and pass this back to the server or e-mail it to a designated address.
The Form Tag and Action Attribute
The <form> tag is used to encapsulate form controls and input elements in a page. As for other XHTML tags we need to be aware of the tag attribute requirements that apply. If you pay a visit to.... yep, W3Schools.com you will find that the 'form' element has a required attribute: action. Some sources state that both the 'action' and the 'method' attributes are required, but this does not appear to be true, (ref. w3c.org) although you will generally use both together. The action attribute defines what is to happen when the form submit button is pressed. For instance, if the form data is to be e-mailed to a specified e-address the action attribute might be set as follows:
action="mailto:destination e-mail address"
If the form data is to be passed back to the server for processing by a server side CGI script this will be referenced by the action attribute. E.g.
action="/cgi-bin/new-user.pl"
This snippet references a perl script called new-user.pl residing in the 'cgi-bin' directory on the server.
What is CGI? Good question. Here are a couple of relevant online tutorials:
The Form Tag and Method Attribute
The method attribute is a reference to the HTTP request method. It specifies how the data will be transmitted. Two values are commonly used: get and post. Setting the value of the 'method' attribute to 'post' is most suitable for sending data via e-mail. E.g.
method="post"
Read more on the 'get' and 'post' values at this address: Get and Post Method differences.
Here is a basic 'mailto:' example: Basic Mailto: example.
Get and Post Methods
The 'method' attribute of the <form> element specifies the submission method that is to be used for the form data. The 'get'method passes the form input values as part of the URL whereas the 'post' method passes the information as part of the data body. The default is the 'get' method and this is often used with smaller forms such as search term entry in a search engine.
The <Input /> Tag
The <Input /> tag is what you use to define the elements of your form. All input tags exercise their respective 'type' attributes as this is what is used to define the 'type' of input element (no surprises there then.) Notice that the XHTML version of this tag must be closed properly (the HTML version has no end tag). Here is an example form in which I have exercised a number of the possible values for the type attribute: Form Input Type Values.
Text Boxes
Text input boxes are very common form elements. They are used to get text input from a user. Attributes can be set to define the size of the visible box and how much text (in characters) can be entered. In the following example I have exercised some of the attributes that apply to the <input> tag with type="text" setting: Text Box Example
The <textarea> Tag
The <textarea> tag is used to define a textbox into which a user may enter a block of text. Notice that this is a tag in its own right and not simply a 'type' of <input> tag. This tag does have a closing tag. Here is an example textbox: Simple Textarea Example. You will have noticed that the size of the textarea is defined in columns and rows using the attributes of the <textarea> tag. The text that initially appears within the text area is written between the textarea tags. Sometimes you may want to present some text to the user that they are not allowed to modify. To do this the 'readonly' attribute is set. Remember that this must be done in an XHTML compliant manner. Here is an example: Text Area not modifiable.
Radio Buttons
Radio buttons are generally used when a user is required to pick only one option from a number of possible choices. Here is a little example in which I have implemented two questions with radio buttons used to obtain the answers: Radio Buttons. The 'name' and 'id' attributes are used to group radio buttons and the value attribute defines what will be returned to the server or e-mailed when the form is submitted. In order for one of the radio buttons to be checked at the outset we exercise the 'checked' attribute for that button.
Check Boxes
Check boxes differ from radio buttons in that they are square and they allow for multiple selections to be made. Check boxes are defined using the 'type' attribute of the <input> element. Here is an example in which I ask a number of questions: Checkbox example.
Buttons
A basic button can be created very simply in a form by setting the value of the 'type' attribute of the <input> tag to 'button'. Here is a very simple example: Button Example.
Reset Button
By setting the type attribute of an <input> element in a form to 'reset' you create a reset button. When clicked all of the fields in that form are reset to their starting values.
Take a look at the following example in which I have implemented two forms (each with unique names and IDs) each with its own reset button: Reset Button Example
Submit Buttons
You've seen these used in a few of the examples so far. By setting the value of the 'type' attribute of an <input> tag to <submit> you can create a submit button. When clicked the form contents are submitted to the defined destination. Here is a basic example: Submit Example.
Other Form <Input> Types
The 'type' attribute of the <input> element can be set to other values such as 'hidden', 'password' and 'image'.
Selection Lists
The <select> tag is used to create lists from which a user may make a selection. Each option in the list is defined using the <option> tag and the starter default option is designated using the 'selected' attribute of this tag. Here is a basic example from me: Selection List Example
Form Styling
Of course it is possible to take control of the way in which form elements are rendered for display using CSS. You now have enough knowledge of CSS to investigate this further if you need to. Here is a link to a very good tutorial on this topic: Styling Forms with CSS.
Form Examples
Here follows yet another example from me in which I have used a little CSS to style the form: Form Example.
Styling Buttons
Here is a basic example in which I have implemented some styling control over the text boxes, the paragraph text associated with them and the submit button: Simple Button Styling. Take a close look at the embedded style sheet to learn how the button was styled in this way.
Here is another example derived from the excellent: DHTML Kitchen.: Button Bar. Take a close look at the code for this page and pay particular attention to the embedded stylesheet. Hopefully you will have noticed that there are no actual form button elements in the page at all. The buttons in the button bar are actually implemented by defining a class of the anchor tag called 'btn' and nesting these left floated elements inside an absolutely positioned div. The styling of the hyperlinks is changed using the pseudo classes :hover and :active to emulate the action of buttons.
Looking closely at the XHTML you will see that the buttons themselves are implemented using anchor tags with the href attribute set to the value: "javascript:void(0)". The void operator evaluates an expression without returning a value and is often found where an XHTML anchor tag's 'HREF' attribute or 'onclick' event handler contain a javascript expression or function call. The void operator is placed before them in order to neutralise a value that may be returned by the function call or expression.
Styling Selection Lists
<Option> tags are used within the <select> tags to define the various choices in the list. Here is a simple selection list that has been styled using CSS: Selection List. If you take a close look at the code for this page you will hopefully spot another new tag: <optgroup>. This tag has one required attribute: 'label'. This attribute provides the text that will form the option group heading.
You may also notice a new pseudo class used in the embedded stylesheet. The ':focus' was added to the CSS specification with CSS2. It can be used to define how an element is to be styled whilst it is receiving focus. You can read more here: Westciv on Pseudo Classes.
Forms and Accessibility
Forms can present some accessibility hurdles for people with certain disabilities. Accessibility can be improved by laying out the form fields in a sensible, logical sequence (people often navigate forms using their tab key) and using additional tags and attributes. See tabindex and accesskeys.
Using Labels
The <label> tag allows us to label up our form elements. Every form element (except buttons) should have an associated label that is adjacent to the form element. Take a look at this example wherein <label> tags have been associated with the various form elements: Sitepoint Form with Labels. Hopefully you will spot how the 'for' attribute of the <label> tag has the same value as the 'name' and 'id' attributes of the associated form element.
Using Fieldsets and Legends
Related form elements may be grouped using the <fieldset> tag. Within this fieldset the <legend> tag should also be used to provide a title for the grouped fields. E.g. You might choose to group first name, last name and title into one fieldset.
Using Tabindex and Accesskeys
Use the "tabindex" attribute of form elements to define the order in which form elements will receive focus as someone tabs though the form using their tab key. See W3C on form elements.
The accesskey attribute enables each form element to be assigned a character that may be entered from the keyboard. Accesskeys may be effectively used in conjunction with labels to support form accessiblilty. In the following example the letter 'U' has been assigned to the label element associated with the 'input' element. By pressing 'U' the cursor will move into the input field ready for text input. (On MS-Windows systems you need to press ALT-SHIFT-U and on MAC-OS you need to use the CMD key in place of the ALT. )
Take another look at this form: Sitepoint Form with Labels to see 'tabindex' in use.