Sample form properties.

Input Element Control Types

(text, password, checkbox, radio, submit, image, reset, button, hidden, file)

 

<fieldset></fieldset> puts the box around the form

<legend>Title of form</legend>

 

Title of Form
Input Type HTML Example Rendered
text <input type="text" name="num" size ="10" value="abc" maxlength="10">
password

<input type="password" style="display:block"
name="invisible-password"
value="mypassword">
checkbox <INPUT name="history_illness"
type="checkbox"
value="Smallpox" tabindex="20"> Smallpox
<br />
<INPUT name="history_illness"
type="checkbox"
value="Mumps" tabindex="21"> Mumps<br />
<INPUT name="history_illness"
type="checkbox"
value="Dizziness" tabindex="22"> Dizziness<br />
<INPUT name="history_illness"
type="checkbox"
value="Sneezing" tabindex="23"> Sneezing
 Smallpox
Mumps
Dizziness
Sneezing
radio <input type="radio" name="gender" value="M">Male
<br />
<input type="radio" name="gender" value="F">Female

Male
Female
submit <input type="submit" value="Submit" size ="40" maxlength="20">
image <input type="image" src="arrow.gif" alt="Submit" />
reset <input type="reset">
button <INPUT TYPE="BUTTON" VALUE="Home Page" ONCLICK="window.location.href='http://www.automationinformation.com'">  
hidden

<input type="hidden" name="my_hidden_input_form" value="def" size ="40" maxlength="20">
file <INPUT type="file" name="name_of_file">
     

 

TextArea Syntax:
<textarea name="mytextarea" cols=60 rows=4>def</textarea>

 

Select Option:

<select name="age">
<option value="0-29">Under 30</option>
<option value="30-60">Between 30 and 60</option>
<option value="60+">Over 60</option>
</select>




Cascading Menu (sub menus):

<SELECT name="select_example">
<OPTION selected label="none" value="none">None</OPTION>
<OPTGROUP label="Color">
<OPTION label="red" value="red">Red</OPTION>
<OPTION label="green" value="green">Green</OPTION>
<OPTION label="blue" value="blue">Blue</OPTION>
</OPTGROUP>
<OPTGROUP label="Shape">
<OPTION label="circle" value="circle">Circle</OPTION>
<OPTION label="square" value="square">Square</OPTION>
<OPTION label="triangle" value="triangle">Triangle</OPTION>
</OPTGROUP>
<OPTGROUP label="Fill">
<OPTION label="left" value="left">Left</OPTION>
<OPTION label="right" value="right">Rightt</OPTION>
<OPTION label="top" value="top">Top</OPTION>
<OPTION label="bottom" value="bottom">Bottom</OPTION>
</OPTGROUP>
</SELECT>




TabIndex (1,3,2,5,4)

<input type="text" tabindex="1" name="tabindex1" size ="10" value="1" maxlength="10">
<input type="text" tabindex="3" name="tabindex2" size ="10" value="2" maxlength="10">
<input type="text" tabindex="2" name="tabindex3" size ="10" value="3" maxlength="10">
<input type="text" tabindex="5" name="tabindex4" size ="10" value="4" maxlength="10">
<input type="text" tabindex="4" name="tabindex5" size ="10" value="5" maxlength="10">

 
 
 
 
 

Access Key

Alt-b pushes the Home Page button

<p><INPUT TYPE="BUTTON" accesskey="b" VALUE="Home Page" ONCLICK="window.location.href='http://www.automationinformation.com'"></p>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Valid XHTML 1.0 Transitional        Valid CSS!