HTML Forms

Form Tag

To begin a form, a form tag must be set up. In the form tag there are 3 main elements:
Name Tag: name of form
Method: states the method of the form – (post or get)
Action: the page that the results of the form are sent to.

<form name="myform" method="post" action="resultspage.php"> 
</form>

Text boxes

The text box is generally used for small one line inputs such as user names and email addresses. There are various options for the text box including the following:
Name / id: the name of the text box
Type: the type of the text box (text / password)
Value: the default text already in the text box when the user views a page
Size: size (in characters) of the text box
Max length: the maximum number of characters that can be typed into the text box.

<input name="textfield" id="textfield" type="text" value="Text" size="30" maxlength="30" />

Hidden field

A hidden field contains data that the user cannot view or change but will still be sent when the form is submitted. The hidden field is usually used for data such as the date, that is created when the user loads the page and reduces user error because it means that the user does not need to enter the date.
Attributes:
Type: the type of the field (hidden)
Name / id: name of hidden field
Value: the data that associated with the field.

<input type="hidden" name="hiddenField" id="hiddenField" value="Hidden Value" />

Radio / Option button

The radio button has the same use as the checkbox however if the radio buttons are put in a set only one can be ‘checked’ out of a set.
Attributes:
Name / id: radio button name
Type: states that it is a radio button
Checked: states whether that radio button will automatically be checked (leave out if not)
To make a group of button give the buttons the same name.

<input name="radiobutton" type="radio" value="radiobutton" checked="checked" />

Text area

Text areas are commonly used for large text inputs such as messages.
Attributes:
Name / id: text box name
Cols: width of text box
Rows: height of text box (rows)
Wrap: describes the word wrap of the text (DEFAULT, VIRTUAL, PHISICAL, OFF)

<textarea name="textarea" id="textarea" cols="30" rows="5">Text</textarea>

Option Box

Option boxes are used for the same purpose as radio buttons but are used when there are lots of options.
Attributes:
Name / id: name of Option Box
Multiple: whether a user can select more that one option
Size: used with multiple – the number of items visible at once

<select name="select" id="select">
   <option value="Value 1" selected="selected">Option 1</option>
   <option value="Value 2">Option 2</option>
   <option value="Value 3">Option 3</option>
</select>

Normal list:

Multiple list:

Select more than one option:

Buttons

These buttons can be used for resetting information in a form, and submitting a form. Buttons can also be set to do nothing and then be manipulated by Javascript.
Attributes:
Type: what the button does in the form (submit, reset, button)
Name/ id: name of the button
Value: value of the button

<input type="submit" name="submit" value="Submit form" />

Selecting files

The file form is often used for uploading files for storing or manipulating.
Attributes:
Name / id: name of file field
Size: size of input box (characters)
Max Length: maximum number of characters that can be entered.

<input name="file" type="file" size="30" maxlength="30" />

Grouping elements

Field sets are used to group form items.
Attributes:
Field set: defines the field set
Legend: the text displayed at the top of the field set.

<fieldset>
   <legend>My form</legend>
   <input name="file" type="file" size="30" maxlength="30" />
</fieldset>

My form

Linking text to form elements

Labels are used for linking words to checkboxes and radio buttons, the user can then select the appropriate text and the appropriate item will be selected. Note inside the label tag the ‘for’ element should be the name/id of the checkbox or radio button it is linked to.

<input name="5" id="5" type="radio" value="5" / >
  <label for="5">Click Text</label>
<input name="5" type="checkbox" id="5" value="5" />
  <label for="5">Click Text</label>