Template:HtmlForms

HTML forms

http://www.w3.org/TR/html4/interact/forms.html#h-17.4

Input Types

Input type from w3c http://www.w3.org/TR/html4/interact/forms.html#h-17.4

Text

creates a text entry box

<input type="Text" id="txtText1" />

Password

same as text but hides characters 'note the password is not hashed or encrypted when is it is sent to the web server; it is only masked in the web browser'

<input type="Password" id="passwd1" />

CheckBox

creates checkboxes

chkbxTest1<input type="Checkbox" id ="chkbxTest1" name="chkbxTest1" />
chkbxTest1<input type="Checkbox" id ="chkbxTest2" name="chkbxTest2" />

chkbxTest1 chkbxTest2

Radio

creates radio button. Radio buttons are grouped by name

rbTest1<input type="radio" id="rbTest1" name="rbTest1" />
rbTest2<input type="radio" id="rbTest2" name="rbTest1" />
rbTest3<input type="radio" id="rbTest3" name="rbTest1" />

rbTest1 rbTest2 rbTest3

Image

submit button. Default value is Submit Query can be changes with Value attribute.

<input type="Submit" Name="Submit" id="Submit1" />
<input type="Submit" Name="Submit" id="Submit2" Value="My Submit" />

Reset

rest button. Default value is Submit Query can be changes with Value attribute.

<input type="Reset" Name="Reset" id="Reset1" />
<input type="Reset" Name="Reset" id="Reset2" Value="Reset All Values" />

Button

button.

<input type="Button" Name="Button" id="Button" />
<input type="Button" Name="Button" id="Button2" Value="Don't Panic" />

Image

Graphical submit button. Should provide alt tag

<input type="Image" src="" Name="ImageSubmit" id="ImageSubmit" />

Hidden

hah ha can't see this

<input type="Hidden"  Name="Hidden1" id="Hidden1" value="Hide me" />

File

file uses multi part header

<input type="File"  Name="File1" id="File1" />
<input type="File"  Name="File2" id="File2" value="InitalFile.txt" />

Select Type Select

makes a dropdown list.

<select name="selectTest">
     <option selected value="Component_1_a">Select1</option>
     <option value="Component_1_b">Select2</option>
     <option value="Component_1_c">Select3</option>
     <option value="Component_1_d">Select4</option>
</select>

<select multiple size="4" name="selectTest2">
     <option selected value="Component_1_a">Select1</option>
     <option value="Component_1_b">Select2</option>
     <option value="Component_1_c">Select3</option>
     <option selected value="Component_1_d">Select4</option>
     <option value="Component_1_e">Select5</option>
</select>

Select1 Select2 Select3 Select4

Select1 Select2 Select3 Select4 Select5

Text Area TextArea

multiple line of text

<textarea name="thetext" rows="20" cols="80">
  First line of initial text.
  Second line of initial text.
</texteara>

First line of initial text. Second line of initial text.