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" />
Button 2
Button 3
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>
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>