Forms are the standard user input mechanism in HTML / XHTML. You will need another language like JavaScript or PHP to read the contents of the form elements and act upon them.
Form Structure
A number of tags are used to describe the structure of the form. Begin by looking over a basic form:
<form action = "">
<fieldset>
<legend>My form</legend>
<label for = "txtName">Name</label>
<input type = "text" id = "txtName" />
<button type = "button" Onclick = "doSomething()">
Do something
</button>
</fieldset>
</form>
Form
The <form></form> pair describes the form. In XHTML strict, you must indicate the form's action property. This is typically the server-side program that will read the form. If there is no such program, you can set the action to null ("") The method attribute is used to determine whether the data is sent through the get or post mechanism.
Fieldset
Most form elements are inline tags, and must be encased in a block element. The fieldset is designed exactly for this purpose. Its default appearance draws a box around the form. You can have multiple fieldsets inside a single form.
Legend
You can add a legend inside a fieldset. This describes the purpose of the fieldset.
Label
A label is a special inline element that describes a particular field. A label can be paired with an input element by putting that element's ID in the label's for attribute.
Input
The input element is a general purpose inline element. It is meant to be used inside a form, and it is the basis for several types of more specific input. The subtype is indicated by the type attribute. Input elements usually include an id attribute (used for CSS and JavaScript identification) and / or a name attribute (used in server-side programming.) The same element can have both a name and an id.
Text
This element allows a single line of text input:
<input type = "text"
id = "myText"
name = "myText" />
Password
Passwords display just like textboxes, except rather than showing the text as it is typed, an asterisk appears for each letter. Note that the data is not encoded in any meaningful way. Typing text into a password field is still entirely unsecure.
<input type = "password" id = "myPWD" />
Radio Button
Radio buttons are used in a group. Only one element of a radio group can be selected at a time. Give all members of a radio group the same name value to indicate they are part of a group.
<input type = "radio" name = "radSize"
value = "small" id = "radSmall" selected = "selected" />
<label for = "radSmall">Small</label>
<input type = "radio" name = "radSize"
value = "large" id = "radLarge" />
<label for = "radLarge">Large</label>
Attaching a label to a radio button means the user can activate the button by clicking on the corresponding label. For best results, use the selected attribute to force one radio button to be the default.
Checkbox
Checkboxes are much like radio buttons, but they are independent. Like radio buttons, they can be associated with a label.
<input type = "checkbox" id = "chkFries" />
<label for = "chkFries">Would you like fries with that?</label>
Hidden
Hidden fields hold data that is not visible to the user (although it is still visible in the code) It is primarily used to preserve state in server-side programs.
<input type = "hidden"
name = "txtHidden"
value = "recipe for secret sauce" />
Note that the data is still not protected in any meaningful way.
Button
Buttons are used to signal user input. Buttons can be created through the input tag:
<input type = "button"
value = "launch the missiles"
onclick = "launchMissiles()" />
This will create a button with the caption "launch the missiles." When the button is clicked, the page will attempt to run a JavaScript function called "launchMissiles()" Standard buttons are usually used with JavaScript code on the client. The same button can also be created with this alternate format:
<button type = "button" Onclick = "launchMissiles()">
Launch the missiles
</button>
This second form is preferred because buttons often require different CSS styles than other input elements. This second form also allows an <img> tag to be placed inside the button, making the image act as the button.
Reset
The reset button automatically resets all elements in its form to their default values. It doesn't require any other attributes.
<input type = "reset" />
<button type = "reset"">
Reset
</button>
Select/Option
Drop-down lists can be created through the select / option mechanism. The select tag creates the overall structure, which is populated by option elements.
<select id = "selColor">
<option value = "#000000">black</option>
<option value = "#FF0000">red</option>
<option value = "#FFFFFF">white</option>
</select>
The select has an id (for client-side code) or name (for serverside code) identifier. It contains a number of options. Each option has a value which will be returned to the program. The text between <option> and </option> is the value displayed to the user. In some cases (as in this example) the value displayed to the user is not the same as the value used by programs.
Multiple Selections
You can also create a multi-line selection with the select and option tags:
<select id = "selColor" size = "3" multiple = "multiple">
<option value = "#000000">black</option>
<option value = "#FF0000">red</option>
<option value = "#FFFFFF">white</option>
</select>
