1. Forms Data Entry and Capture
Creating Web Pages with HTML
CIS 133 Web Programming Concepts

2. Creating Web Forms Control elements
Elements in a form in which a user can enter information
Input boxes
Selection lists
Option buttons
Check boxes
Group boxes
Text areas
Buttons

3. Parts of a Web Form

4. Form tag Surrounds all form related tags (input, textarea, etc.)
SYNTAX
<form id=“formname” name=“formname” action=“page2.html” method=“get” >
other form elements go in between
</form>

5. Input tag Used for a variety of input boxes SYNTAX
<input type=“sometype” ……./>

6. Text boxes, Password boxes, Hidden boxes
By default, displays 20 characters of text on a single line
To change width, add width
<input type=“text” size="value“ value=“show me in box” width=“30”/>
<input type=“hidden” value=“show me in box” />
<input type=“password” />

7. TextArea Used to display a tall and wide textbox SYNTAX
<textarea cols=“number” rows=“number”>
content
</textarea>

8. Radio button types Also called option buttons (buttons with circles)
SYNTAX
Football <input type=“radio” name=“mydot” value=“F” checked/>
Baseball <input type=“radio” name=“mydot” value=“B” />
Tennis <input type=“radio” name=“mydot” value=“T” />
Choose a sport:
Football ● Baseball o Tennis o

9. Checkbox button types
Also called option buttons (buttons with circles)
SYNTAX
Football <input type=“checkbox” name=“box1” value=“Football” />
Baseball <input type=“checkbox” name=“box2” value=“B” checked/>
Tennis <input type=“checkbox” name=“box3” value=“Tennis” />
Choose a sport:
Football □ Baseball ■ Tennis □

10. Button types 3 types SYNTAX Submit – sends web page to server
Reset – clears all form fields
Push – performs activity on web page
SYNTAX
<input type=“submit” name=“submitButton” value=“Submit Form” />
<input type=“button” name=“pushButton” onclick=“javascript functionx();” />
<input type=“reset” name=“reset” value=“Reset Form” />
<script>
functionx() {
statements ….. }
</script>

11. HTML 5
HTML5 has several new input types for forms. These new features allow better input control and validation.
Color - used for input fields that should contain a color
Date - select a date
Datetime - select a date and time (with time zone)
datetime-local - select a date and time (no time zone)
Month - select a month and year
Time - select a time
Week - select a week and year

12. HTML 5
HTML5 has several new input types for forms. These new features allow better input control and validation.
– an address. *
Number - input fields that should contain a numeric value – can restrict values
Range - used for input fields that should contain a value from a range of numbers
Search - used for search fields (a search field behaves like a regular text field)
Tel – a telephone number
url - used for input fields that should contain a URL address *