- Text box
Text box named t1:
(element 0)
HTML to produce the object shown above is shown in yellow below:
<input type="text" name="t1" size="10" maxlength="20" value="ABC123def">
DIV block for displaying properties and values -- click the button below
- Textarea
Textarea named ta (element 2):
HTML to produce the object shown above is shown in yellow below:
<textarea rows="3" cols="20" name="ta">Row 1 has this data
Row2 has this data
Row3 has this data
</textarea>
DIV block for displaying properties and values -- click the button above
- Radio
Radio named rad1 (elements 4,5 and 6):
radio 1
radio 2
radio 3
HTML to produce the object shown above is shown in yellow below:
radio 1 <input type="radio" name="rad1" value="100" checked>
radio 2 <input type="radio" name="rad1" value="200">
radio 3 <input type="radio" name="rad1" value="300">
DIV block for displaying properties and values -- click the button above
- Checkbox
(Elements 8,9 and 10)
Checkbox named chk1
Checkbox named chk2
Checkbox named chk3
HTML to produce the object shown above is shown in yellow below:
Checkbox named chk1 <input type="checkbox" name="chk1" value="abc" checked>
Checkbox named chk2 <input type="checkbox" name="chk2" value="def">
Checkbox named chk3 <input type="checkbox" name="chk3" value="ghi" checked>
DIV block for displaying properties and values -- click the button above
- Select (dropdown menu)
This is the select named 'sel1' (element 12)
HTML to produce the object shown above is shown in yellow below:
<select name="sel1">
<option value="duck1">Huey
<option value="duck2" selected>Dewey
<option value="duck3">Louie
</select>
DIV block for displaying properties and values -- click the button above
- Range (aka as a slider):
HTML to produce the object shown above is shown in yellow below:
<input type="range" min="10" max="90" value="50" step="5" name="slider_1">
DIV block for displaying the slider properties and values -- click the button above