1. Introduction to HTML Forms and Servlets
SSD1 – Introduction to Information Systems
Introduction to HTML Forms and Servlets
Unit1. Lecture 3
1.3.1 Working with HTML Forms

2. FORM Element
FORM element is a container that creates a special area on an HTML page known as a form
FORM element can contain:
- usual page content
- markup tags
- special elements known as controls

3. FORM Element <FORM element attributes> form content ...
<FORM action=' method='post'>

4. Form Controls button, checkbox, radio button, label, menu,
file select,
text input controls (including password)
image

5. Form Controls Each control has a control name – NAME attribute
initial value (default value) – VALUE attribute
current value – set to the initial value first, can be modified by user actions

6. The INPUT Element
<INPUT element attributes>.  Its element attributes include the following:
The name and value attributes
Attributes dedicated to its function as an element – the type attribute (possible values: text, password, checkbox, radio, file, submit, image, reset, button)
Attributes that limit a control's input (checked, disabled,  readonly, size, and maxlength attributes)
Tabindex and accesskey attributes

7. Text control <input type='text' name='txtline'> <BR>
<input name='txtline3' type='text' value='Default Value'><BR>
<input type='text' name='txtline4' size='12' maxlength='200'><BR>

8. Text control example

9. Password control
Creates a single-line text input control; the text typed appears as *
<input name=‘passw' type='password' size='8' maxlength='8'>

10. Checkbox control
<input name='chkbx1' type='checkbox' value='value-to-be-sent'>
<input name='chkbx2' type='checkbox' value='value-to-be-sent2' checked='checked'>

11. Radiobutton control
<input name='rdbtn1' type='radio' value='value-to-be-sent'>
<input name='rdbtn2' type='radio' value='value-to-be-sent' checked=‘checked’>
<input name='btn-grp' type='radio' value='default-value-to-be-sent' checked='checked'> <input name='btn-grp' type='radio' value='alt-value'>

12. File control
<input name='selct-a-file' type='file'>

13. Submit and Image controls
<input type='submit' name='subbtn'>
<input name='subbtn2' type='submit' value='Submit Answer'>
<input name='subbtn3' type='submit' value='Log On'>
<input name='graphicsubbtn' type='image' src='tools.gif' alt='Submit Tools Information Form'>

14. Reset control <input name='resetbtn' type='reset'>
<input name='resetbtn2' type='reset' value='Reset Form'>

15. LABEL control
<LABEL>Diamonds <INPUT name='jeweltype' type='checkbox' value='diamonds'></LABEL> - implicitly
<LABEL for='rub'>Ruby </LABEL> <input name='jeweltype2' type='checkbox' value='rubies' id='rub'> - explicitly

16. TEXTAREA control
<TEXTAREA name='textarea' cols='40' rows='5'></TEXTAREA>

17. Useful attributes
Readonly
Tabindex
Accesskey
Alt